Shopify Theme from Scratch Part 12: Customer Accounts 1/2


Today we’re going to set up four of the seven customer account templates. You may be thinking “whoa whoa, four templates in one tutorial!? You’re crazy!!”. Don’t sweat! A lot of these templates are really simple and we can re-use a lot of the same CSS classes across templates.

Let’s dew this!

Shopify Theme from Scratch Part 11: Customer Accounts – the Setup


The last set of templates we need to work on are the customer accounts templates. The customer accounts templates consist of seven .liquid files that allow returning customers to create an account, view their previous orders, set their default addresses, and more.

Shopify provides default customer account templates, but we’re going to rebuild each template from scratch so that they look consistent with the rest of our themes (you’ll see later in this Part that the default customer account templates look nothing like our current theme).

But, before we move on to these new templates, we need to take some preliminary steps. Let’s gitter done!

Shopify Theme from Scratch Part 10: list-collections.liquid


Alright! Now that the list-collections.liquid bug if fixed, let’s get the show on the road! The list-collections.liquid template is loaded when you go to The purpose of this template is to list the collections that are available in your shop.


list-collections.liquid is fixed!

The list-collections.liquid bug has been fixed!


I will be starting the Shopify Theme from Scratch tutorials again ASAP. I should have Part 10 out this week.


Waiting on a fix

There is going to be yet another delay for the Shopify Tutorial from Scratch series, due to an ongoing bug with the list-collections.liquid template which I want to cover in Part 10.

What’s wrong?

The issue right now is that the template that is used for the collections listing page, aka. list-collections.liquid, does not load properly. When you go to, it’s supposed to load the contents of list-collections.liquid; but currently it does not.

The only way to have content appear on /collections is by creating a snippet, and then checking for the template handle in theme.liquid as follows:

{% if template == 'list-collections' %}
  {% include 'collection-listing' %}
{% else %}
  {{ content_for_layout }}
{% endif %}

This works but we shouldn’t have to do this. I want to make sure my tutorial doesn’t include any unnecessary workarounds.

The awesome devs at Shopify are aware of the issue and are working on a fix. I really want to publish Part 10: list-collections.liquid tutorial before I move on to customer accounts because it just makes sense from an order point of view.

Apologies again for the postponing :(


No tutorial this week

Sorry everyone, just running into a bunch of roadblocks this week :( I won’t be able to have Part 10 ready until next week.

shrek cat

Super sorry!

One of the reasons is that we’re looking to make “list-collections.liquid” (i.e the /collections page) an actual template, so that we don’t have to load it through hacks. I want to make sure Part 10 outlines this process properly. If this doesn’t get implemented by next week, I’ll go ahead with the customer accounts pages before list-collections.liquid.

– tetchi

Shopify Theme from Scratch Part 9: search.liquid


In Part 9 of the Shopify Theme from Scratch series, we’re going to be the search.liquid template, where customers can search through a shop for products, pages, and blog articles.

Let’s gitter done! Head on over to “” to see your search page.

Shopify Theme from Scratch Part 8: article.liquid


Once a user clicks on an article listed on the blog.liquid template, they are taken to the article.liquid template. The article.liquid template is where the full article is shown. Users also have the option to leave comments to articles through this template.

Let’s butter some biscuits!

Shopify Theme Settings: Assigning colours dynamically using SASS

Last week I attended CSS Conf in Florida, and one of the coolest things I learned there was a technique that Tim Hettler shared in his presentation (his awesome presentation can be found here). The technique involved using SASS to dynamically assign colors to a text depending on the background-color of the button.

So I thought to myself, “hmm… now that we can use SASS in Shopify themes, I wonder if I can somehow tie this technique into Shopify’s Theme Settings…?”. Lo and behold, it worked like a charm! I think this could be really useful to prevent users from unknowingly choosing unreadable text (ex: white text on white background).

Here’s a quick video demonstration:

The text colour changes depending on the selected colour of the background. No more unreadable text!

The code for it fairly simple. It is based off this part of Tim’s presentation. In a nutshell, what we’re doing here is checking the lightness of the selecting theme setting colour ({{settings.btn_colour }}), and assigning either #333 or #fff for the text colour depending on the value of the lightness. Here’s a quick example:

/* assigning color selected thru theme settings to variable */
$color: {{settings.btn_colour}};

/* function for checking the lightness of theme setting color */
/* if lightness is below 50, apply #333, else apply #fff */

@function get-button-color( $color ) {
  @return if( lightness( $color ) > 50, #333, #fff );

/* apply colors*/
  color: get-button-color($color);

Hope this was helpful! Shoutouts again to Tim Hettler for showing me this technique :)


Shopify Theme from Scratch Part 7: blog.liquid


This week we’re going to work on the blog.liquid template, where the articles that you write in the “Blog posts” page of the admin are listed.

Let’s dooo this!

« newer / older »