"i only speak liquid" #3: Color Product Variants and Shopify Editions

Hey all,

Welcome to "i only speak liquid", where active Shopify developers like me (Roberto) share learnings we face daily. 

PS: I'm an expert on Storetasker and take on freelance projects from their client base. I've worked on Cubitts and other fantastic brands. Apply here if you want in.

What I’ve been thinking about:

I can not start writing this issue without mentioning Shopify Editions. We are in the best moments of the Shopify ecosystem. And the marketing around it is phenomenal. To avoid boring talking about what you can read on Twitter or Shopify docs, let’s talk about code ;)

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.

One learning as a freelancer:

Try not to waste time preparing quotes for clients that are not in the right moment or don’t have the resources to invest in custom development. 

When speaking with new customers, it’s important to understand their expectations as quickly as possible. And even though I don’t like meetings so much, it's one of the fastest ways to uncover your customers expectations. 

In these meetings, I try to explain the estimated development costs so that the client has a ballpark figure in their head. If this does not fit their expectations or budget, I suggest finding other solutions. 

I always find that building new quotes is one of the biggest bottlenecks in services.

How do you do it? Reply to this email and let me know. I’m curious about how you filter clients & build out quotes. 

Meet Rich Cherry - Freelance web developer on Storetasker, based in Durham, NC, USA.

I hope you've enjoyed this 3rd issue. 

Let me know your thoughts and honest feedback by replying to this email. Or just share what you most love about building on Shopify! :)

Speak in 2 weeks,

Roberto Aresena