37 search results for “Keir Whitaker”

Build Your Ecommerce Business: Livestream

Build Your Ecommerce Business: Livestream

feature
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.

Summary

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

PODCAST: How Do We Help Clients With Fulfillment?

PODCAST: How Do We Help Clients With Fulfillment?

feature

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

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:

all_products["coffee-cup"].available
all_products["coffee-cup"].collections
all_products["coffee-cup"].compare_at_price_max
all_products["coffee-cup"].compare_at_price_min
all_products["coffee-cup"].compare_at_price_varies
all_products["coffee-cup"].content
all_products["coffee-cup"].description
all_products["coffee-cup"].featured_image
all_products["coffee-cup"].first_available_variant
all_products["coffee-cup"].handle
all_products["coffee-cup"].id
all_products["coffee-cup"].images
all_products["coffee-cup"].image
all_products["coffee-cup"].options
all_products["coffee-cup"].price
all_products["coffee-cup"].price_max
all_products["coffee-cup"].price_min
all_products["coffee-cup"].price_varies
all_products["coffee-cup"].selected_variant
all_products["coffee-cup"].selected_or_first_available_variant
all_products["coffee-cup"].tags
all_products["coffee-cup"].template_suffix
all_products["coffee-cup"].title
all_products["coffee-cup"].type
all_products["coffee-cup"].url
all_products["coffee-cup"].variants
all_products["coffee-cup"].vendor

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: "|" %}
<ul>
{% for product in favourites %}
<li>{{ all_products[product].title }}<li>
{% endfor %}
</ul>

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 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?

feature

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 to Convert Your Client's Visitors Into Customers

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

feature

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

Upgrade Your Development Workflow for Shopify With This Webinar

Upgrade Your Development Workflow for Shopify With This Webinar

Upgrade Your Shopify Development Workflow

If you read "Using Git to Simplify Shopify Theme Deployment" then you’ll be familiar with the concept of Git and how it can be used to keep versions of all your theme files. It can also play a part in helping developers move their code from place to place — a process known as deployment. 

We thought it would be a good idea to delve a little deeper and learn how all the pieces join together in a development workflow. In this 26 minute live webinar, Matthew talks us through how to use Beanstalk and Deploybot (both of which have free starter plans) to not only keep track of your code changes but also how to deploy theme files to development and live stores.

Continue reading

Grow your business with the Shopify Partner Program

Learn more