32 search results for “Keir Whitaker”

How URLs Map to Shopify Templates

How URLs Map to Shopify Templates

shopify tutorial- how URLs map to Shopify themes

One of the (many) features I love about working with Shopify Themes is the simple folder structure. Each store can be powered by a single layout file and a handful of templates meaning you can achieve a lot with a little — power in simplicity.

However if you are new to Shopify Themes, you may not know exactly when each template gets rendered, or be aware that the same template gets used in various places around the store.

We've already looked at how to use both alternate layout and template files, therefore in this article we'll turn our focus to understanding under what conditions each template is rendered in a store.

URL template mapping

Internally, Shopify has its own routing table which determines which template is displayed based on the URL requested by the user. If you have ever used one of the popular development frameworks, you might be familiar with the concept of URL routing. Put simply it's a way of determining which template to send to the browser based on the requested URL.

I mentioned earlier that there are only a handful of templates required to power a store. Each of these templates serves one or more URL — in other words, we are able to utilise the same templates for multiple URLs. From a design perspective, this enables us to reduce our overhead when building a new store.

You might also like: Using Metafields in Your Shopify Theme

URLs to templates

Here's an overview of which template is rendered as determined by the URL:

/thisisntarealurl → 404.liquid
/blogs/{blog-name}/{article-id-handle} → article.liquid
/blogs/{blog-name} → blog.liquid
/cart → cart.liquid
/collections → list-collections.liquid
/collections/{collection-handle} → collection.liquid
/collections/{collection-handle}/{tag} → collection.liquid
/ → index.liquid
/pages/{page-handle} → page.liquid
/products → list-collections.liquid
/products/{product-handle} → product.liquid
/search?q={search-term} → search.liquid

Password protected

You might have noticed that the password.liquid template is not included in the list. This template is only seen if you choose to password protect your storefront and as such will override all other URLs.

If your store is password protected and you do not have a password.liquid template in your theme, Shopify will render it's default password login page instead.

Alternate templates

It's also worth remembering that the above routing table can be affected by alternate templates — something we have covered in a previous tutorial.

URL parameters

As you will see above, a number of the routes have elements of the URL path wrapped in { }. I have included this to denote a variable which will have an impact on the data loaded into a template.

For example, if we take the /collections/{collection-handle} URL pattern a different set of data will be loaded into the template and sent to the browser if we requested /collections/bikes compared to /collections/cars.

You will also notice that a number of different URL patterns share the same template file, e.g /products and /collections will both render the list-collections.liquid template. Likewise /collections/, /collections/{collection-handle}/ and /collections/{collection-handle}/{tag} all make use of collection.liquid.

Final note

If you are ever unsure which template is being rendered, there's a really simple way to check.

All you need to do is add {{ template }} to your theme.liquid file and start browsing your store. This global Shopify variable will output the currently rendered template minus the .liquid extension. It's a neat way to be doubly sure your templates are working as expected.

Here's a handy snippet that you can use in your own theme development with the output shown in the screenshot below:

<p style="display: inline-block; background: yellow; border: 1px solid #CCC; padding: 1em; font-weight: 700;">Current template: {{ template }}.liquid</p>

How URLs Map to Shopify Templates: Keir Whitaker's site

Want to learn more about building with Shopify? Check out our full list of Shopify tutorials.

You might also like: How to Optimize Themes for Performance

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

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

Top 13 Web Design Conferences You Should Attend in 2016

Top 13 Web Design Conferences You Should Attend in 2016

Web design conferences for 2016Over the last few years, the web design and development conference calendar has become increasingly congested. From events focusing on a broad range of web design topics right through to those that cater to a particular CMS, there’s plenty of choice — perhaps too much choice.

Choosing a conference that’s right for you, and your budget, isn’t easy. Not only is there the financial cost to consider, but also the time away from the office and client work. It’s important to make the right choice.

However, the benefits of stepping out of your usual routine and hearing from industry experts can often be the perfect tonic to help reinvigorate your work and a great way to keep up to date with industry developments. Plus, adding the human element to our digital world by meeting, and talking, with people IRL should not be underestimated.

This year also marks the first ever Shopify partner and developer conference, which takes place on March 22-23rd in San Francisco. Unite’s lining up to be a fantastic two days and one not to miss if you work with Shopify or want to start.

Convinced? If so, the next step is to pick a conference that works for you. Over the last few years, I have been lucky enough to attend a number of great web design and creativity focused events. Here are a few of my top picks for you to consider in 2016.

Reasons to be Creative

Web design conferences for 2016: Reasons to be creativeReasons, as it’s popularly known, happens twice a year in the UK. February sees a short one day single-track event taking place in the wonderful L.S.O. at St Luke's concert hall in London. The festivities then transfer to a full three day multi-track affair at Brighton’s Dome theatre.

I’ve been a regular attendee for a number of years and it’s certainly a highlight for any conference goer. With a healthy mix of technology, design, animation, products, and more, Reasons always leaves me inspired to get back to work. Arrive a day early for the Brighton event and enjoy the late summer sun (hopefully) whilst wandering around the Lanes.

  • London, UK — February, 19 2016
  • Brighton, UK — September 5-7, 2016

Smashing Conference

Web design conferences for 2016: Beyond Tellerrand

Smashing Conf has grown from an annual event in Freiburg, Germany to a series of events taking place across Europe and America. The conference is spread over three days — one day of workshops and two days of single track talks focusing on practical takeaways with real world examples.

  • Oxford, UK — March 15–16, 2016
  • San Francisco, USA — April 5–6, 2016
  • New York — June 14–15, 2016

Shopify Unite

Web design conferences for 2016: Shopify Unite2016 also marks Shopify's inaugural partner and developer conference: Unite. Unite will be an exploration of the future of commerce and the next steps for the Shopify platform. It'll be a great opportunity to connect with other designers, developers, and partners working in the ecommerce design from all over the globe.

You’ll also have the chance to meet the team behind Shopify and learn about upcoming developments. With a mix of keynotes from Shopify leaders and in-depth technical workshops, it’s set to be a fun, and informative, two-day event.

  • San Francisco, CS USA — March 22-23, 2016

Creative South

Unusually, Creative South starts on a Thursday and ends on a Saturday evening. Their programming focuses on process and experience with the overall goal of connecting attendees with others from the industry. There’s also a large dose of Southern hospitality thrown in with plenty of social activities and food lined up during the event.

The 2016 lineup is already announced and includes Aaron Draplin and Anton and Irene. With a motto of “Hug necks! Come as friends and leave as family” good times are guaranteed. This one is definitely on my hit list for 2016.

  • Columbus GA, USA — April 7-9, 2016

Converge SE

Web designer conferences for 2016: Converge SEConverge SE bills itself as the conference for those who want to build a beautiful web. Taking place in Columbia, SC, it features a mix of topics including design/UX, front-end engineering, Ruby on Rails, DevOps, JavaScript, animation, responsive development, JavaScript, leadership, management, strategy, sales, and marketing.

Speakers are a mix of well-known industry leaders and emerging talents. If you are interested in speaking, you can submit your own idea.

  • Columbia, SC USA — April 13-15, 2016

Generate

Web design conferences for 2016: Generate

Launched in 2013 Generate has grown from a London based event into a global series of conferences. This year sees it returning to both London and New York with rumours of further cities to be announced soon.

Run and curated by the team behind Net magazine and Creative Bloq Generate is a source of inspiration, practical advice and networking opportunities.

You can watch the entire New York 2015 conference on YouTube — it’s a great way to get an idea of what to expect.

  • New York, USA — April 22, 2016
  • London, UK — TBC

Squares

Squares focuses on design, UX, front-end, development, business, and products. Featuring a day of workshops and a day of single track talks, it’s an opportunity to learn from world-changing leaders, designers, and innovators in both the non-profit and tech community.

Our very own Levin Mejia will be running a 3.5-hour workshop on building Shopify themes at this years Squares.

  • Grapevine, TX USA — April 27-29, 2016

    Beyond Tellerrand

    Web design conferences for 2016: Beyond Tellerrand

    If you fancy a trip into the heart of Europe then I strongly recommend you pick one of the two (or both) Beyond Tellerrand events taking place in May and November.

    Now in it’s sixth year, Tellerrand continues to impress — thanks largely to the enthusiasm and passion of it’s sole organiser Marc Thiele. Describing itself as an event about web design and development, there’s plenty for everyone at this single track two-day conference. With established speakers from all parts of the globe as well as new and emerging talent taking to the stage, you’ll not be disappointed.

    Finally don’t skip the evening sessions as they are a great highlight. And don’t worry if your school German isn’t up to par as all sessions are conducted in English.

    • Düsseldorf, Germany — May 9-11, 2016
    • Berlin, Germany — November 7-9, 2016

    Confab

    If content is your focus then Confab should be high on your list of go-to conferences for 2016. Now in it’s sixth year, their main “Confab Central” event attracts 650 content strategy enthusiasts from around the world. With a broad range of speakers and topics there’s plenty to learn.

    • Minneapolis, MN USA — May 18-20, 2016
    • Seattle, WA USA — September 19-21, 2016

    Web Design Day

    Web Design Day began in 2009 with the aim of bringing the best of web design to Pittsburgh in a fun, intimate, and affordable conference. It’s organized by G. Jason & Val Head and attracts attendees from across the globe. With a great mix of talks and social activities, it's not surprising attendees come back year after year.

    Last year’s speakers included Denise Jacobs, Ethan Marcotte, Aaron Gustafson, and Lyza Danger Gardner. While this year’s lineup is still under wraps, you can bet that it will undoubtedly be great.

    • Pittsburgh, PA USA — June 22-23, 2016

      Canvas Conf

      I headed up to Birmingham last year for my first Canvas Conf and was not disappointed. 2015 was the fourth outing for the event and its popularity showed with a packed audience. It’s not a web design or development conference, but web technology, and its effects were on show throughout.

      Canvas gathers a cross-discipline audience of engineers, designers, and UX professionals into 10 sessions over a single day. 2015 saw speakers from Medium, Easy, Graze, Birchbox, and NASA. If Canvas is a conference you're considering, then take the time to watch all the sessions from last year's event for free before you make a decision.

      • Birmingham, UK — TBC

      Here: London

      Web design conferences for 2016: Here London

      Here is curated by the team behind the popular website It’s Nice That and is an annual symposium featuring some of the world’s best creative talent — from the biggest names to the most cutting-edge practitioners. While Here is not entirely dedicated to web design, it’s nice to step outside of the web sphere and see what’s happening in other, often related, industries.

      I attended the 2015 conference and learnt about branding, animation, tv commercial design, and much more. On a side note, it had one of the best goody bags of the year!

      • London, UK — TBC

      Did we miss any must-attend web design conferences? Share your favourite in the comments below.

      Photo credits: All photos by Marc Thiele except Beyond Tellerrand which was taken by Nils Wittler

      Continue reading

      The Power of Alternate Layout Files in Shopify Theme Development

      The Power of Alternate Layout Files in Shopify Theme Development

      Shopify Theme Development Tutorial: Alternate LayoutsThis is the second article in a series of advanced Liquid tutorials for designers and theme development. My previous post focused on how to create and use alternate templates when creating Shopify themes, however today I would like to turn our attention to Liquid “layout” files.

      If you aren’t familiar with layouts you’ll find the default file, theme.liquid, in the “layouts” folder within your theme directory. If you’ve never seen one before you might be wondering what’s going on!

      The theme.liquid file can be thought of as the master template for your store. Effectively it’s a wrapper for all our other templates found in the templates folder. As a general rule, elements that are repeated in a theme (ex: site navigations, header, footer, etc.) will be often be placed inside theme.liquid.

      It’s entirely up to the theme designer to decide how much, or little, code is included in a layout file. For example, I often prefer to have certain elements of a layout file included as a snippet as this allows me to re-use them in alternate layout files — a topic we’ll cover shortly.

      Just remember that all rendered pages in a Shopify theme, unless stated, will be based on the default theme.liquid layout file.

      You might also like: How to Use Alternate Templates in Shopify Theme Development

      The benefits of layout files

      One of the main benefits of layouts is that they enable us to follow the DRY (Don’t Repeat Yourself) principle. By having all our common elements in a single file, it allows us to make global changes very easily. Another benefit is that our templates (product.liquid, collection.liquid etc) aren’t cluttered with markup that is repeated across the store.

      Creating a layout file

      Regardless of how much HTML you include in a layout file, there are two important Liquid tags that you must include in a Shopify layout file:

      1. {{ content_for_header }} must be placed between the opening and closing <head> tag. This inserts the necessary Shopify scripts into the <head> which includes scripts for Google Analytics, Shopify analytics, for Shopify apps, and more.
      2. {{ content_for_layout }} must be placed between the opening and closing <body> tag. This outputs dynamic content generated by all of the other templates (index.liquid, product.liquid, etc.).

      theme.liquid, along with it’s two required placeholders tags, are required in order for Shopify to validate a theme.

      Alternate layouts

      One layout file isn’t going to cover every eventuality and there will be situations where you will require a completely different layout. You could start hiding elements with CSS but that feels a little wrong - the far better approach is to create an alternate layout complete with different HTML markup.

      A good example of this might be a specific landing page for a product or perhaps a newsletter sign up page that doesn’t require the same “site furniture” as the rest of the site. In these situations, it’s possible to designate that the micro render with an “alternative” layout file.

      Creating an alternative layout is very straightforward. The first thing to do is create a new file and give it a relevant name and the .liquid extension. Next save it in the layouts folder in your theme directory. In this file place any HTML you need (i.e. HTML declarations, CSS, JS links etc) along with the two placeholders discussed above.

      In order to use this layout file, and effectively override the default theme.liquid layout file, we use the following Liquid syntax as the first line in any of a template file (index.liquid, product.liquid, etc.):

      {% layout 'alternative' %}

      In this instance, the default theme.liquid will be not be applied but rather the layout called alternative.liquid.

      It’s also possible to request that the layout file isn't applied. The syntax to request that a layout file isn't applied is:

      {% layout none %}

      This needs to be the first line at the top of the relevant template (index.liquid, product.liquid, etc.). A use case for this might be when rendering output from your store in an alternative syntax such as JSON.

      Using snippets to be even more DRY

      If I know that a theme will be using multiple layouts I often remove code out of the layout file and into a snippet. This means that I can reuse code across multiple layouts. For example, I often have the following structure:

      • snippets/html-header.liquid - Contains all the essential head items right up to the opening body tag
      • snippets/html-footer.liquid - Contains any relevant script tags and the closing body tag
      • snippets/header.liquid - The main header that is used across the majority of the site
      • snippets/footer.liquid - The main footer that is used across the majority of the site

      In order to use these are base layout file would look as follows:

      {% include html-header %}
      {% include header %}
      {% include footer %}
      {% include html-footer %}

      The benefit of this approach is that when you come to create an alternate layout file you don’t need to recreate all your HTML header and footer content meaning you can update it all from two files. If you are only using one or two layouts it’s perhaps overkill.

      Start using alternate layouts in your Shopify theme development workflow

      Alternate layout files can come in extremely handy when you require radically different markup for a particular page or set of pages. Coupled together with the use of alternate templates it’s a powerful tool in your theme building toolbox and literally gives you endless possibilities to customise the look and feel of a store.

      You might also like: How to Optimize Themes for Performance

      Continue reading

      10 Bookmark-Worthy Websites for Free Stock Photography

      10 Bookmark-Worthy Websites for Free Stock Photography

      feature

      We’ll be the first to say that having visually stunning images is one of the most important factors for any web design project, especially ecommerce stores. We are also the first to appreciate how hard it is for web designers to get high-quality photography from their clients without having to take the photos themselves.

      Therefore, having a number of “go-to” royalty-free photo sites on hand is always helpful. Whether you need a great product image to showcase your design, inspiration to brighten up your day, or a background for your latest project, here are 10 free stock photography websites worth a visit.

      Continue reading

      Grow your business with the Shopify Partner Program

      Learn more