37 search results for “Keir Whitaker”

Build Your Ecommerce Business: Livestream

Build Your Ecommerce Business: Livestream

Ross Beyeler built a successful ecommerce-focused web design business from the ground up — and he's willing to share the secrets of how he did it. 
In an upcoming General Assembly livestream,  Ross Beyeler — founder of the Boston-based ecommerce web agency Growth Spark — will share his experiences building a successful web agency focused on ecommerce and the Shopify platform. Learn how to get started or grow your business from a technical and business perspective in our first ever Shopify Partners livestream event.

Continue reading

Ways to Customize the img element in Shopify Themes

Ways to Customize the img element in Shopify Themes

When creating a Shopify Theme, you can add any number of images — in any format, and at any size — to the assets folder within your theme directory. Typically, these images are used for backgrounds, sprites, and branding elements.

In this week's Shopify Tutorial, we are going to have a look at the humble HTML img element. Find out how to add classes using the img filter and learn how to get your markup under control. 

Continue reading

Creating Useful CSS Hooks in Liquid

Creating Useful CSS Hooks in Liquid

Creating useful CSS hooks in LiquidMany of us use the <body> class for CSS and JavaScript hooks and just like in WordPress it’s pretty easy to add a number of useful classes to our <body> element in Shopify.

Here are a few ideas that you might find useful placing in your main (or alternate) layout file:

Add the currently rendered template name to the body class

<body class="{{ template | handleize }}">

In this example, we are using template to return the name of the currently used template. Some examples of this are:

<body class="index">
<body class="product">
<body class="collection">

This can be really useful when you need to target a specific alternate template for example.

Add the currently rendered product handle to the body class

Building on this we may wish to add the current product handle to our body class. To keep things neat and tidy we can use an if statement to conditionally add the product handle only when we are viewing a product:

<body class="{{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">

Note how I include the space before the {{ product.handle }} output tag.

If you are using alternate product templates you may wish to use the contains operator instead:

<body class="{{ template }}{% if template contains "product" %} {{ product.handle }}{% endif %}">

Add the current page title to the body class

Some themes also add the current page title to the body element in the form of an id, building on the above our code would now look as follows:

<body id="{{ page_title | handleize }}" class={{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">

Note in this example we are using the Liquid filter handleize to ensure that the id or class that we add is URL safe and therefore easy to reference in our CSS and JS files. For example, it will turn a page title of “Blue Jeans” into “blue-jeans”.

Add the currently viewed collection’s name to the body class

For good measure, we could even add in a check for collections and add that too:

<body id="{{ page_title | handleize }}" class={{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}{% if template == "collection" %} {{ collection.handle }}{% endif %}">

It’s pretty easy to adjust this logic for your own purposes. Again you may wish to use the contains operator if you are utilising alternate templates.


Hopefully you’ve seen how flexible Liquid is in the above examples. Being able to add a variety of classes to the <body> element gives us useful hooks that we can use in CSS and JavaScript.

Continue reading

How to Use all_products in a Shopify Theme

How to Use all_products in a Shopify Theme

How to use all_products in a Shopify Theme

For this week's advanced Liquid Shopify tutorial, we'll be looking at a way to access product information without having to loop over a collection or be on a product detail page.

We can achieve this by using all_products. Here’s a quick example:

{{ all_products["coffee-cup"].title }}

Let’s have a look at what’s happening. The syntax is pretty simple: all_products takes a quoted product handle as it’s argument.

Liquid Handles

If you aren’t familiar with handles, the Shopify docs provide a great explanation:

The handle is used to access the attributes of a Liquid object. By default, it is the object's title in lowercase with any spaces and special characters replaced by hyphens (-). Every object in Liquid (product, collection, blog, menu) has a handle. For example, a page with the title "About Us" can be accessed in Liquid via its handle “about-us”.

In the above example, we have a handle of coffee-cup which represents the product available at yourstore.com/products/coffee. We follow that by .title. When rendered, this will output the title of the product with the handle of coffee-cup.

Using all_products we can access any property of the product:


Note that some of the returned values will be a Liquid collection and because of this would need to be “looped” over. Let’s use the images collection as an example:

{% for image in all_products["coffee-cup"].images %} ​
<img src="{{ image.src | img_url: 'grande' }}" /> ​
{% endfor %}

This example would output all of the images associated with the coffee-cup product.

More than one handle

You can go one step further and create a simple Liquid array of handles that you can use to output specific products. Here’s an example:

{% assign favourites = "hand-made-coffee-tamper|edible-coffee-cup" | split: "|" %}
{% for product in favourites %}
<li>{{ all_products[product].title }}<li>
{% endfor %}

Using the Liquid assign tag, we create a new variable called favourites, which are product handles separated by a | character. The | is used as a delimiter to divide the string into an array that we can loop over using for. 

We now have access to both products in turn and can output any property associated with it — in the example above I simply display the title.

When to use all_products

all_products is a great option when you need to pull out a couple of products in a particular template. Of course, if you are outputting a lot of products, a collection is still the best way forward — principally as you won’t have to manually know all the different product handles. However, all_products makes a great option when you have need of outputting a single, or small number of products, that won't change frequently.

You might also like: An In-Depth Look Into Designing a Shopify Theme

Continue reading

How to Use Alternate Templates in Shopify Theme Development

How to Use Alternate Templates in Shopify Theme Development

Shopify theme development tutorial: alternate templates

If you are new to Shopify theme building your first impression might be that every collection, page, and product page is controlled by a single template. Luckily this isn’t the case and there are, in fact, a number of ways you can apply different, or “alternate”, templates to these various page types.

This Shopify tutorial will run you through the basics of creating your first alternate template so that you can start customizing your Shopify themes even further.

Creating an alternate template

Creating an alternate template is straightforward. There are two approaches.

If you are using the Shopify Theme gem or are uploading your theme using a ZIP file, you can simply add a file to your themes templates folder using the following filename syntax:


For example, an alternate page template could be called:


Or, for an alternate product template, you could use:


The name itself is irrelevant — the more obvious the better so your clients can recognize it's purpose easily.

The second approach is to create an alternate template within the Shopify admin itself. Here’s how:

  1. From your Shopify admin, click Online Store, then click Themes
  2. Find the theme you want to edit, click the … button, then click Edit HTML/CSS
  3. Under the Template folder, click the Add a new template link
  4. Choose the appropriate option for your new template and give it a meaningful name
  5. Edit and save your new template as you normally would

A full description and run through is available in the Shopify Docs.

Selecting an alternate template 

Shopify tutorial: Liquid and selecting alternative templates

Once an alternate template exists, a new drop-down menu will appear in the relevant edit page in the Shopify admin. This will allow you to select which template you would like applied to the collection, page, or product. Shopify will use the base template by default so you won’t need to change every existing item — just the ones you wish to be rendered with the new alternate template.

Switch templates via the URL

Finally, there’s one other option for template selection that you have at your disposal. That is being able to select a particular template using the view querystring.

Here's an example for you to review (NB: these links are for demo purposes only).


In this instance, Shopify will load a product template called:


This technique works for all templates. Here’s a collection page example:


In this case, Shopify will load a collection template called:


If the template requested does not exist, Shopify will fail gracefully and use the default template, or the template specified in the admin. You can see a full demo of this with a live theme in the Shopify tutorial screencast above.

A really common use case for this technique is for switching between a list and grid view within a product collection.

Start implementing this Shopify tutorial today

Alternate templates are a great example of the power of Shopify themes. By taking a few minutes to understand how to create them, apply them, and even switch them via a querystring, you start to expose the power of the platform and offer your clients, and their customers, even richer ecommerce experiences.

This is the first in a series of Shopify tutorials covering Liquid and themes that we'll be publishing throughout 2016. If you would like to be notified of new articles, subscribe for updates.

Continue reading

How to Use Liquid's "case/when" Control Tags in Shopify Themes

How to Use Liquid's "case/when" Control Tags in Shopify Themes

How to Use Liquid's case/when control tags

I am sure many of you are more than familiar with Liquid control tags such as if and else, but are you familiar with case/when?

Here's how the Shopify docs describe it:

Case/when creates a switch statement to compare a variable with different values. case initializes the switch statement, and when compares its values.

Here's an example:

{% assign handle = 'cake' %} {% case handle %}
{% when 'cake' %}
This is a cake
{% when 'cookie' %}
This is a cookie
{% else %}
This is not a cake nor a cookie
{% endcase %}


In this instance, the output will be determined when the variable called handle is "equal" to "cake" or is equal to "cookie". If neither condition evaluates to true, it will output the text after the last else clause.

If you omit the else clause and the handle variable never evaluates to true, no output will be output. This is because the else clause acts as a fallback in the above example.

Real world example

As nice as our example is, you might be wondering when you might use this in your own theme development.

One example I have used in the past is in relation to banners in a theme. Despite my love of alternate templates, there are occasions where creating a variety of templates simply to display different promotional banners would be very time-consuming. Not only would you have to build the templates, but you'd also have to assign them to each product in turn. A more practical approach is to let Shopify do the heavy lifting for you.

Let's say we wanted to display different promo banners on particular products. One way we could do this is to use product handles and case/when. This code example will work in a product.liquid template.

{% assign handle = product.handle %}
{% case handle %}
{% when 'coffee-cup' %}
{% include 'promo-coffee-cup' %}
{% when 'cup-saucer' %}
{% include 'promo-cup-saucer' %}
{% else %}
{% include 'promo-default' %}
{% endcase %}


We start off by creating a variable called handle and assign it the current value of product.handle. If you aren't familiar with handles then the docs have a great primer to get you started. Next we instantiate our case clause. What follows is a series of when statements.

In our example, if our product handle equals coffee-cup then the snippet titled promo-coffee-cup will be included and Shopify will head right to endcase and carry on.

Alternatively, if the product handle is equal to cup-saucer then the snippet titled promo-cup-saucer will be included. If the product handle is neither coffee-cup or cup-saucer then the else clause kicks in and the snippet titled promo-default will be output.

We have achieved quite a lot with a little. We are conditionally loading different snippets depending on the product being viewed and outputting a default promo banner if neither condition is met. We've also achieved this without having to create any alternate templates.

To extend the example, you could simply add in further specific product handles when needed. However, an alternative approach might be needed if you wanted to include tens of different banners. Of course, there's many different ways to achieve the same thing in Liquid and in a future tutorial we'll look at how to use other Liquid constructs such as contains and unless to achieve similar results.

You might also like: Ways to Customise the img element in Shopify Themes

Continue reading

PODCAST: How Do We Build Profitable, Long-Term Relationships With Customers?

PODCAST: How Do We Build Profitable, Long-Term Relationships With Customers?


In their fourth Ecommerce Lifecycle podcast, Keir and Ross turn their attention to the subject of retention. This focuses on ways in which we can get customers to continue coming back and purchasing products. Having long-term relationships with customers who have already purchased from you can be highly profitable as your “cost per acquisition” reduces.

Continue reading

PODCAST: How Do We Help Clients With Fulfillment?

PODCAST: How Do We Help Clients With Fulfillment?


In part two of “The Ecommerce Customer Lifecycle,” Ross and I discussed "conversion" – ways in which we can help our clients get visitors to their ecommerce stores to purchase products and services. In particular, we looked at how user experience, design, branding and content all play a key role in this process.

In our third episode, we turn our attention to the often overlooked topic of fulfillment. Whilst on first glance you might think that it's a simple case of putting a product in a box and adding a postage label, there are plenty of other factors to consider – many of which will help your clients showcase themselves and their brand values.

Continue reading

PODCAST: How to Convert Your Client's Visitors Into Customers

PODCAST: How to Convert Your Client's Visitors Into Customers


In part one of “The Ecommerce Customer Lifecycle,” we focused our attention on the “acquisition” phase  and asked the question: “How can we get potential customers to visit our sites?” Tactics discussed included social media, paid advertising, influencer marketing, among others.

In our second episode, we move on to discuss “conversion” which focuses on getting the visitors of your website to actually purchase products. This step is where user experience, design, branding, content and your on-site strategy are crucial.

Let's take a look at how to improve conversion on your client's store

Continue reading

Grow your business with the Shopify Partner Program

Learn more