Product Updates

App devs everywhere, rejoice! Shopify is pleased to announce that we’re replacing our current API authentication system with one based on OAuth 2.0.

Anyone who knows anything about webapps will tell you that OAuth 2.0 is quickly becoming the de-facto standard for authenticating users against an API. Facebook, Foursquare, Google, Github, and other big names are already using it. We’ve been working on our own implementation here at Shopify for a while now, so we’re really pleased to finally make it public.

Why Use Oauth2?

Our previous authentication scheme was pretty good, but it lacked in some key areas. Primarily, it was completely custom and so the first thing a new dev would often have to do was implement our auth mechanism in their favourite environment. By implementing OAuth 2.0, developers can tie into existing auth solutions that implement the spec for them. We hope this makes getting stuck into the Shopify API much easier.

Secondly, we’re adding the ability to request granular access scope for your application. If you’ve ever used a Facebook or Twitter app, you’ve already seen this in action. We’ve divided up the API into a number of categories and apps can request read or write access to these individually. Now merchants won’t have to trust a product-related app with all their customer info for example. The available scopes are as follows:

• Content: Blog posts, pages, comments, etc.
• Themes: Themes and theme assets.
• Products: Everything product-related. Images, variants, etc.
• Customers: Customers and customer groups.
• Orders: Orders, transactions, and fulfillments
• Script Tags
• Shipping: Coming Soon!

Related to this, you can also change the scopes you ask for as your app functionality evolves. You’ll need merchants to approve the changes of course, but it’s a lot more flexible. A full scope reference is available in our documentation.

What This Change Means

If you’re the owner of an app that uses the old auth system (i.e. everyone at the moment), don’t worry! The old system isn’t going to be going away any time soon. We're phasing it out eventually, but there will be lots and lots of notice before we do that.

One thing that is going to change is that new apps are going to be required to use Oauth 2.0 starting soon. We’re  leaving both options up for a short while so that the authors of our various community API clients have time to update their libraries but after that it’s Oauth all the way down.

Resources

We’ve updated our technical docs with new instructions on how to get up and running with the new auth scheme. Read this page throughly before you get started.

There’s already an updated version of the shopify_api gem available that works with Oauth 2.0. We’re working on converting the shopify_app gem as well as bringing our other official adapters up to date. There’s also an omniauth solution available here.

Feedback

We’d love to hear what you think of the new changes. You can leave a comment on this blog post or head over to our developer mailing list and discuss it there.

Switching between your Shopify admin and your storefront has always been a bit tricky. The new storefront admin bar makes it simple to switch between your admin and your storefront. 

When you're logged into your store and viewing your storefront you will now see a dark grey bar at the top of your storefront.  

To go back to your admin you can click "Go to store admin" and jump right back into you store's admin.

If you find the bar annoying and want to turn it off just hit the "x" and the bar will minimize to the far right corner. 

We also added a notification asking you to view saved changes to products, articles, and collections in your storefront. This will make it easier to review your latest changes to your store.

On a collection page in a store admin, we now have a new image upload button that looks like this:

That new image is meant to represent your collection in Shopify Themes that feature collections.

Here is a partial list of free Shopify Themes that feature collections in one way or another:

• The Radiance theme, on its /collections page.
• The Couture theme, on its /collections/all page.
• The Monochrome theme, on its home page (optionally, via the theme's settings).

Up until now, most Shopify Themes that featured collections used the featured image of the first product in the collection to illustrate the collection. It's now become possible to control what image to use for the purpose of illustrating your collection.

In your Liquid, you'd use something like this to show your collection image:

{% if collection.image %}
{{ collection.image.src | collection_img_url: 'medium' | img_tag: collection.title }}
{% else %}
{{ collection.products.first.featured_image.src | product_img_url: 'medium' | img_tag: collection.title }}
{% endif %}

The new collection.image object is documented in the Shopify Wiki.

Do not expect to see your collection image on the corresponding collection page. If you wish to show an image on your collection page, what you need to do then is insert an image in your collection description. Please read this article for further instructions.

You can now use your Chase Paymentech Orbital account to accept credit card payments in Shopify if your shop is set up to use USD or CAD currency. We integrate with both the Salem platform for high volume merchants and the Tampa platform for lower volume merchants.

Shopify is officially certified as a submitter with Chase Paymentech and you can link your existing Orbital account with Shopify by talking to your Chase account manager and get started accepting payments immediately. As a new merchant you can sign up here.

Custom Page Titles

When it comes to better ranking on search engine results, page title tags that include relevant key words can play a valuable part. This new feature lets you set a custom value on the <title> html tags of your shop's pages by replacing the default value of page_title in your shop's liquid templates. And because page_title already exists in all default Shopify themes, there's likely no need to make any changes to your templates to take advantage of it!

You can now set this custom value for the majority of your shop's content: products, collections, pages, blogs, and articles.

To set a title tag, go to the edit page of any product, collection, page, blog or article and click on "Modify title tag and url" to expand the form.

Now you'll be able able to set your title tag to a custom value.

From now on, this title tag value should replace the default title in the page_title liquid tag. To change it back, simply set the field to blank once again.

Here's an example of how to make use of the page_title within your template's theme.liquid <head>:

{% if template == 'index' %}
<title>{{ shop.name }}</title>
{% else %}
<title>{{ page_title }} | {{ shop.name }}</title>
{% endif %}

Product Image ALT Tags

 {% for image in product.images %}
  <div class="thumbnail">
    <a href="{{ image.src | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
      <img src="{{ image.src | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
    </a>
  </div>
 {% endfor %}
  

Have you ever wanted to link directly to the Shopify checkout with a specific cart already loaded? Cart Permalinks allow you to do this easily.

This is what a cart permalink looks like:

http://store.shopify.com/cart/70881412:1,70881382:1

Visiting a cart permalink takes you directly to the first page of the checkout with the specified variant ids and quantities. Any cart that is currently in the session will be completely untouched and ignored.

The format of the url is:

http://shopname.com/cart/#{variant_id}:#{quantity}(,...)

Notes, cart attributes, and tracking parameters can be added as query parameters like usual. If customer accounts is enabled, and the user is not logged in, they will see the login page before reaching the checkout.

This feature is useful for things like putting "Buy it now" buttons on blogs, sending reorder links, and selling comic prints (like in the above image from Penny Arcade).

Over the past few days we've rolled out several new features to liquid templates. These are the additions:

for...else condition

Currently it's pretty common to see liquid markup with a for loop nested in an if condition like this:

{% if cart.item_count > 0 %}
  {% for item in cart.items %}
    <!-- display items -->
  {% endfor %}
{% else %}
  no items in your cart.
{% endif %}

Now, that markup can be simplified to this:

{% for item in cart.items %}
  <!-- display items -->
{% else %}
  no items in your cart.
{% endfor %}

If the object that the for tag is looping through is empty, the optional else condition will be used instead.

split filter

The new split filter makes it easy to display parts of a string. For example, to have a different product description on the collection and product pages:

In collection.liquid:

{{ product.description | split: '<!-- split -->' | first }}

In product.liquid:

{{ product.description | split: '<!-- split -->' | last }}

New Variables

We have also exposed several new variables to liquid templates.

The cart is now accessible to the json filter, which allows you to power all sorts of Javascript logic easily.

{{ cart | json }}

We have also exposed customer tags, so if a customer is logged in, you can display contextualized information.

{% if shop.customer_accounts_enabled and customer and customer.tags contains 'Wholesale' %}
  <p>Use the discount code WHOLESALE at checkout. That'll give you 40% off. Cheers!</p>
{% endif %}