How can you make color architecture at Shopify?

Hello everyone!

Today, I wanna to talk about something very popular in the E-commerce community, the color swatches Archtech, A lot of own of e-commerce websites looking for ways to fix the color issues of products which can be a T-shirt with different colors, and more.

So if you are familiar with this issue, this is the post right for you!

Also maybe you wanna all the same products on the collection page, like this:

I wanna give you two solutions for this:

1. Using variants.
2. Using every product as color, and grouping with related to metaobject, collections, or tags.

So let’s talk about every method what is good, and what is bad.

1. Using variant

Let’s talk about the first method Using variants, this is actually the native way to work with product sizes and colors at Shopify.

So if you are familiar with Shopify products, you know that every product has variants is a single product you can get one, if you want more size, color, etc. Just add by clicking on “+ Add another option”.

So before we wanna show our customers on the collection page two types of products, we need to actually, add an image to each variant
Like do so:

So now we are seeing the images on the variants

The next step is coding, but before that, we just need to see how are products look on the product page and collection page:

Product page:

Collection Page (the most problem)

Some Shopify themes offer color swatches for variants, I’m showing you only the architecture idea to understand it.

If you know Liquid and JS, you can develop this issue for the collection page, on the theme not offering the color swatches.

first of all, you need to know what actually happened in the standard main collection or any collection page:
So all of the products print but not the variants actually

And what do we need to do about this?
So for our example let’s have 4 variants in the “T-shirt 1”, so we need to print all variants on our main-collection page:

For our example let us have 4 variants in all products, so we need to print all variants on our main collection page:

You can think about grouping the variants as color

Actually, you can use Shopify as a variant, but you need to know why it is not always a good idea

So what is the bad scenario that can be with using the Varinats method?

1. You need the Handle/product ID to know where to upload each variant, and if you thinking about having new variants come to your store, you need to export all the products that already exist and make some lookup to take the Handle or Product ID and use it to know where to put your new variants, if you always know your the handle it’s can be a good idea.
2. Sometimes you need to upload the same image for the same product with the same color, but with different options like size, it’s a new variant which means a new image for each one.

2. Related to metaobject, collections, or tags.

So in this method, we use every product that has only one color, and then we connect them by can be a specific metaobject entry or just a collection for each group of products.

In this tutorial, I’m gonna use collection.

So let’s see how this should work, shall we?

Let’s create a new collection.

Now we create new products and put the related “a” collection in our products

Let’s see our collection details

Also here, If you don’t know Liquid and JS, you need a developer to help you with this for the collection page and product page.

So what is the bad scenario that can be with using the related method collection/metaobject?

1. You need to add the collection or metaobject before.
2. You also need a developer on the product page

So what is the bad scenario that can be with using the Related method with a tag?

1. If you wanna change the group name you need to change all the products to the new name.
2. Sometimes can affect your performance if you choose to use tags you need to search all over the products with the same tag, in the collection you can print all the products directly
3. It can be messy if you have other tags and you need to export and import and you need to give attention when you using on excel or other spreadsheet software, ex: tag = “summer sale 2023, a, outlets”
4. You also need a developer on the product page

Hoping I can help you here.

Thank you for reading! ☺️