32 search results for “Keir Whitaker”

Paul Boag Shares a Favorite Ecommerce Project

Paul Boag Shares a Favorite Ecommerce Project

feature

In Part 1 of my interview with Paul Boag, we discussed the importance of making a name for yourself in the web industry. Content marketing has played a key part in his own success and that of the agency he co-founded, Headscape.

Of course, getting the “gig” is only the first hurdle – you have to deliver good work too. In this excerpt, I ask Paul about his experiences working on ecommerce projects. What follows is an illuminating and unusual insight into an ecommerce site catering for a demographic where the typical user is over 60.

Continue reading

Paul Boag on Content Marketing & How to Start Your Blog

Paul Boag on Content Marketing & How to Start Your Blog

feature

Paul Boag has been working on the web since 1994. He was one of the original founders of Headscape, a UK digital agency, and is a well-known and respected author, blogger and conference speaker. He’s also co-host of the long running, and perhaps the original, web design and business-focused podcast BoagWorld.

In this interview with Keir Whitaker, Paul shares why content marketing is here to stay, tips on improving your writing process, and why you should get comfortable with public speaking.

Continue reading

Customize Shopify Password Pages With the password.liquid Template

Customize Shopify Password Pages With the password.liquid Template

Customize Shopify password page

There will be occasions when you need to enable password protection on your own, or a client’s, Shopify store. This may be because the site is still being built and tested, or you need to make a quick change to the theme.

By default, Shopify allows you to add a custom message (which can include HTML) to the standard password protected page, but what if you're looking for even greater personalization?

In this tutorial, we'll show you the basics of customizing a password page on Shopify using the password.liquid template.

Continue reading

The Essential List of Resources for Shopify Theme Development

The Essential List of Resources for Shopify Theme Development

Shopify Theme Development Resources and Tutorials

Whether you are starting out with Shopify Themes or are a seasoned Shopify Expert, there are always new and useful things to learn that will help with your everyday theme development. But with so much content at your fingertips, one of the problems is knowing where to start. 

With that in mind, we have created a comprehensive list of resources to help you master your theme development. In this article, you will learn:

  • Where to find online courses on Shopify Theme development
  • Resources on all things Liquid
  • Tips and tricks for optimizing theme performance
  • And more

Continue reading

Shopify Tutorial: The product.liquid template

Shopify Tutorial: The product.liquid template

So far in our Shopify tutorial series we've looked at a lot of concepts relating to how Liquid works in Shopify themes. In this article, I'd like to take a more in-depth look at one particular template — product.liquid.

If you are new to Shopify themes, product.liquid is the template that is rendered by default whenever a customer views a product detail page. As discussed in a previous tutorial, it is also possible to have alternate product templates. You can also build a customizable related products section. However in this post we'll stick to the basic template, which resides in the templates folder within a Shopify theme. 

By way of an example, I am going to use the product.liquid template from my own starter theme “Birthday Suit”. Here it is in its entirety:

<h2>{{ product.title }}</h2>
{{ product.description }}
<form action="/cart/add" method="post" enctype="multipart/form-data">
<select name="id">
{% for variant in product.variants %}
{% if variant.available == true %}
<option value="{{variant.id}}"> {{ variant.title }} for {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled"> {{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<input type="submit" name="add" id="add" value="Add to Cart" class="button">
</form>

As you will see, there's very little HTML in this template. This is on purpose as it's intended as a starting block for your own theme. If you download a theme from the Shopify theme store, you'll notice that the product.liquid template will be more involved but may not actually contain much more Liquid code.

Let's examine what's happening in detail. We begin by using Liquid output to display the product's title and description:

<h2>{{ product.title }}</h2>
{{ product.description }}

As the description is entered via the Shopify admin, we don't need to wrap this output with further HTML. Of course, if you need to add in a wrapper element of some sort then you can.

Moving down the template, we come to the form and opening <select> element:

<form action="/cart/add" method="post" enctype="multipart/form-data">
<select name="id">

The action attribute is important – it must be set to /cart/add in order for products to be added to the cart. We also need to ensure that the <select> element has its name attribute set to id.

Next comes the main output of the template:

{% for variant in product.variants %}
{% if variant.available == true %}
<option value="{{variant.id}}"> {{ variant.title }} for {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled"> {{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}

A few things are at work here:

  • We create a for loop to iterate over all the current products variants
  • We check to see if the current product in the loop has inventory using {% if variant.available == true %}
  • If the product has inventory, we output the title in an <option> element and set the value of the <option> to the variants id. As well as outputting the variant title, we output the price and use the money_with_currency filter.
  • If the product has no inventory, we output a disabled <option> element and output the title followed by sold out!
  • Finally, we close off our if statement and for loop

Next we add in a <input type="submit"> that when clicked will add an available product to the cart:

<input type="submit" name="add" id="add" value="Add to Cart"> </form>

We complete the template by closing out the </form> element.

This template makes use of both the product and variant objects. They have a large range of properties that you can display in this template and are worth investigating as you develop your Shopify theme skills.

You might also like: 10 Top Questions About Developing Shopify Themes Answered

Extending the template

Of course this example is relatively simplistic and is intended as a starting point for your own development. There's a lot more you could include in this template including:

  • Adding in Liquid code to display product and variant images
  • Use the Shopify JavaScript snippet option_selection.js to allow better display of variant options
  • Use the | t filter for retrieving translated strings from your theme's locale file
Template Icon

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.

Template Icon

Continue reading

Grow your business with the Shopify Partner Program

Learn more