When making a Shopify online store, you want to be able to control every single aspect of your website. You want each page to look exactly like you want (or your client asks for) and the website to be editable and scalable depending on your future needs. This can be achieved through the use of different templates for different layouts with different fonts and colors. In fact, this is one of the biggest benefits of using a platform like Shopify, the constant and simple editing you can do to every single aspect of your online presence.

However, there is a catch...

The major disadvantage of this method is that if you need to make a change to some of the templates at the same time, you have to make a change in EACH of those templates separately. 

Let’s say, for example, you have some special offers pages and you’ve decided that all the buttons that appear on these pages will now be red, the product titles to be blue and the fonts used on these pages to be different from the other pages… That’s great, but now comes the difficult part of updating every instance of this on your website, in perhaps an endless number of templates and styles. This can be a major project, and it may not even be the last time you make a decision like this… so what can you do?

The good news is that the styles (colors and fonts for example) can be changed no matter the template, the visual impact being significant. 

Before we dive into how to make different styles work for the same template, we need to decide... How do we tell Shopify that one page should use the new colors rather than the normal ones that come with that template? 

One easy way to do this is using the handle chosen for these specific pages. For example, if the handle contains the letters ”style2”, then the new style will be displayed. To get the URL in Shopify we use:

page.url, collection.url, blog.url article.url or product.url

in the theme.liquid file and if the URL contains “style2”, we could set a class for the body, let’s say: “style-2”.

What you may not realize is that most of the trick is already done! The rest is just SCSS, which has a great feature, if we use...

.button {
  body.page-one & { }
}

The result will be...

body.page-one .button {}

We can actually use this exact tool to our advantage. Everywhere we want a style change when the URL contains ”style2”, the new style will be implemented.

For example, on the buttons that have the class .add-to-cart, we can use:

.add-to-cart {
  color: red;
  .style-2 & {
    color: blue;
  }
}

And the new color for the “Add to cart” text will be blue.

That’s it! 

I beg you, do not get wrapped in the false sense of security that if your site works now and looks fine now that the job is over! 

As platforms change and update and your business needs grow and evolve, it is incredibly important to keep your site nimble and easy to edit. You never know when a slight change to your brand needs or the needs of the platform will throw off all of your hard work. It’s much better to prepare in advance and make these changes early, so that later, you are able to adjust and pivot with lightning fast speed if you ever need to!