How to manage Color Variants on Shopify

What I’ve been thinking about:

I've recently had multiple chats with merchants about how to manage their product colour variants. Technically, 'colour' is a product variant. But because colour choice has such a big influence on a customer's purchase decision, it makes sense for each colour to represent a separate product. Here's why:

1. Extended catalogue & SEO: You will quickly have a more extended catalogue on your collection pages which is better for showing off your products to customers + it’s better for SEO. (reminder that you can also choose to to render the variants of each product in your collection templates, but that increases your server rendering time).

2. Speed: By having each colour variant as its own product, you will have faster product pages. You can also improve your product JS to show a specific slideshow of images  depending on your colour variant, but my tests show that it decreases speed performance.

It’s just much cleaner and easier to create different products for each colour variant of one item. But don't just trust me on it: Gym Shark, Allbirds and the biggest brands agree!

Once you have the different pages for each colour, you'll need a way to connect the product pages to each other. We've historically had various workarounds, but now with the new “product list metafield”, it's much easier.

First, let's create two new fixed metafields in the Shopify admin:

1. One text metafield to specify the colour of the product
2. One product list metafield so that the merchant can select all the different colours available for this product.

Now, the merchant will be able to see this in the product editor:

Next, all we have to do is add a new block or section inside the product template to display the list of different products (see the code better via this link):

‍

After this code is implemented, add your custom CSS to have the look and feel you want - and that’s it! You will have a variant colour selector to move between different product pages!

3 links you can’t miss:

• Shopify Functions. Shopify Functions allow developers to customise the backend logic that powers parts of Shopify. The first place they will allow us to extend logic is the discounting logic that lives inside of Checkout!
• PS Database. Not necessarily related to Shopify, but it can give you ideas as a developer to create your own "productized service".
• Shopify CLI 3.0. Shopify CLI is a command-line interface tool that helps you build Shopify apps. This new update massively helps developers building apps on Shopify.

One app I like:

ORBE by Mushdesk

Shopify Editions was an excellent way to explain the advantages of Shopify Markets to merchants. ORBE is an app that recommends users with a popup window to access the right international shopping experience based on their browser preferences and location.

The advantages of the app in comparison to the Geolocation free app from Shopify are:

• It allows merchants to customise their popup geolocation window directly from their Theme Customiser.
• The application is SEO safe. We use the native Shopify form to move your customer to the right market without making unfriendly SEO automatic redirections.
• It syncs with your Shopify Markets, so the language selector will show the languages depending on the country selector that merchants set up on their markets setup.
• It works as other big brands like Zara or Burberry do with their international sites. Once it has the customer's consent to go to the local version of the site of one market, it will automatically redirect them to this version in the subsequent visits without bothering again. This guide the customer to have a better international user experience, and they always can change the country using the footer selector.