How To Add Shopify Color Swatches On Product Page (2024) Step by Step

How to add Shopify color swatches on product page

Hey guys, welcome back! If you're looking to add color swatches on your Shopify store on your product pages, I have a step-by-step

guide for you guys. Now a lot of times people complicate this by introducing different code editors and I don't recommend those

because those can be pretty difficult for a average creator to make those codes and make those edits and

that is usually only applicable on the Dawn theme. So if you're using a different theme then your code is going to be different, you

know, the lines you're supposed to be edit are going to be different so that's why I'm going to show you guys a simpler method to do this

and build your color swatches. So the first thing I'm going to do

is I am going to create a new product and I'll show you guys how you can add

even a single color swatch. So I'm just going to click on hoodie and

I'm going to click on upload new and I'm just going to open this image

up over here. We're going to add a price and then we're going to add variants. In our variants I'm going to click on

color and then I'm going to add two values green and let's say blue and then I'm going to click on done

over here and save our product. So this is our new product that we have just

created. Now let's take a look at what it's looking like in our Shopify store. So this is our product and if I click

on our product over here you guys can see it says green and blue. It does not

have the product swatches as I have added in this particular product over here. So how can you get started with adding

your actual product swatches? Well the first thing I'm going to do is I am

going to edit the inventory on these items so we're going to

scroll down and I'm going to just save this. Now the way that I like to do this is with an application so

what you're going to do is click on settings on the bottom left and then click on apps and sales channels on the left as well

and then click on your Shopify app store. Now a lot of people say that if I'm

doing this with an app then it probably means I won't get accurate colors. Well

don't worry I'll show you guys a little tip at the end of this video where you

can build accurate color swatches. So you're going to search for color

swatch over here and once you search for color swatch you're going to install

this application called glow color swatch. Now this is the one you want

because this is free to use you don't have to pay for this no one wants to pay for a simple little item like this and you can

add it for over 100 products so I really don't think for most businesses

they have you know more than 100 products listed at products listed at once when you're starting out

So you're going to click on install over here and once you click

on install you're just going to be led back to the Shopify installation page

Now in this installation page you're going to click on install app on the top

right and I'm just going to take a blue hoodie image as well just so I can

later on just add this into our products as well. Now once you have installed your color swatch over here you're going to click on

the bottom right it says continue as free. Now once you proceed with the free plan

you're going to insert your data. So you're going to click on let's start

over here and now you're going to configure what you want to add. So we're going to be adding our product

colors that is what we're specifically looking to add which is going to be a

color swatch of our product. Now you guys can see there are three

options. Now I'm going to turn off the size options and I'm going to add

the color or custom image option. Then I like to keep it simple first and

I just like to go to the next step. You can directly click on configure over

here and you're going to be led to the configuration page. However when I do it when my actual app is not completely set up

you might end up loading the page for a really long time. So just to make it a bit simpler I go into our global color swatch, click on

next step, just leave the color swatches open. Then you're going to size how you want them to be

So I want them to be circular and I want them to be large in size. This is the

preview just so you guys can see. Then you have the swatch spacing so how

large of a distance should there be. Then you have your swatch border style

I only want one border and let's say I want the thickness of

the border to be larger. So you can add that as well. Now after

that you have your border colors and then after that you have your hover effect and more. So over here you're just going to add

your size how you want this to appear to whether or not it should

reduce the size when someone hovers their mouse over it. Then if it should increase the size if someone hovers their mouse over it

then you also have other options like if you want the image to be

zoomed in on when you have the item displayed. Now you might be wondering

this is the item display. I'm going to show you guys later on how to add colors

in this as well so don't worry about that. But after that we have the alignment of our content if this should be centered

right or left. I want it to the left and then I'm just going to click on next

step. Now after this I don't like to change anything I'm just going to click

on next step simply because you don't need to do a lot of changes to this

And then you're going to apply this to your live theme whichever one is your

live theme you want to click on that and click on go to theme editor

Now once you click on go to theme editor you will see on the top left in your app

embeds you will have this enabled and once you have this enabled just click on

save on the top right to make sure that this is enabled like so

Now after that you're just going to click on I see the swatches widget even if you don't see it you're just going to leave that and

now you're just going to click on your global color swatch options and then

you're going to turn off the size options and then you're going to click on the configuration button on the bottom right

Now after that you're going to be able to see the actual colors of your

products. Now you can search for your particular product that you have so we're doing this for our hoodie and

the hoodie colors are green I'm pretty sure green yeah so you can search for

those colors as well or you can just go on ahead and see the colors over here

I have green and blue added so now what you're going to do in color

one I want to insert the green color of my hoodie. Now a lot of people say that oh I'm just eyeballing the color

well you don't have to eyeball the color you can actually go into the Shopify app store just open up your image

and then you're going to download the eyedropper chrome web extension I have

this downloaded over here just install this extension and then you're going to click on the extension over here

and then you're going to click on pick color from web page now you can hover

over your mouse and just select the color and then the color will appear on the top right over here

Now you're going to go back into your Shopify web color and you're going to open up the extension and then the extension will

show you the hex code on the top right and you're just going to copy this

and then paste it in the bottom left hex section like this and now the actual particular color of your item will be shown

Now I'm going to do the same with the blue item I don't have the blue image

added yet so I'm just going to or this one is the one that I'm going to use so

I'm just going to use this shade the lighter shade that is present like this one and then I'm going to go into my

store settings and then copy the hex code from here and then paste it right over here so once I've pasted both of my hex codes I

can click on save on the top right and once you click on

save you can open up your online store so this is our online store and let's

scroll down to our hoodie product like so now you guys can see this is now

displaying green and blue now another great thing you can do is

that once you've added this item so now we have our color swatches

we can go into our product section and you can go into your actual product

so open up your product over here scroll down and in your variants you're going to

click on edit just click on any variant option this will open up the variant detail and you can add a

particular image for each individual variant so I'm going to add this image

for our blue variant when people click on the blue variants it actually displays that particular image so I'm just going to click on done

and then click on save on the top right and just like that now if I open up my

online store now with these newer changes I'm going to scroll down open up the hoodie over here and we

have the color variations and by clicking on the blue color we have the blue image displayed so in this way you can get started

with creating color swatches on your Shopify store it's simple easy and you don't have to learn a lot of code to do this

so I hope you guys found this video helpful if you did make sure to leave a

like and subscribe to our YouTube channel and if you have any questions or

queries leave those in the comment box down below and I will catch you guys in the next video