How To Add Shopify Color Swatches On Product Page (2024) Step by Step
Show More Show Less View Video Transcript
0:00
How to add Shopify color swatches on product page
0:04
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
0:12
guide for you guys. Now a lot of times people complicate this by introducing different code editors and I don't recommend those
0:21
because those can be pretty difficult for a average creator to make those codes and make those edits and
0:28
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
0:35
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
0:41
and build your color swatches. So the first thing I'm going to do
0:46
is I am going to create a new product and I'll show you guys how you can add
0:51
even a single color swatch. So I'm just going to click on hoodie and
0:55
I'm going to click on upload new and I'm just going to open this image
0:59
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
1:06
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
1:13
over here and save our product. So this is our new product that we have just
1:18
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
1:24
on our product over here you guys can see it says green and blue. It does not
1:29
have the product swatches as I have added in this particular product over here. So how can you get started with adding
1:37
your actual product swatches? Well the first thing I'm going to do is I am
1:41
going to edit the inventory on these items so we're going to
1:45
scroll down and I'm going to just save this. Now the way that I like to do this is with an application so
1:51
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
1:58
and then click on your Shopify app store. Now a lot of people say that if I'm
2:02
doing this with an app then it probably means I won't get accurate colors. Well
2:06
don't worry I'll show you guys a little tip at the end of this video where you
2:10
can build accurate color swatches. So you're going to search for color
2:14
swatch over here and once you search for color swatch you're going to install
2:18
this application called glow color swatch. Now this is the one you want
2:22
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
2:29
add it for over 100 products so I really don't think for most businesses
2:33
they have you know more than 100 products listed at products listed at once when you're starting out
2:38
So you're going to click on install over here and once you click
2:42
on install you're just going to be led back to the Shopify installation page
2:47
Now in this installation page you're going to click on install app on the top
2:51
right and I'm just going to take a blue hoodie image as well just so I can
2:56
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
3:04
the bottom right it says continue as free. Now once you proceed with the free plan
3:10
you're going to insert your data. So you're going to click on let's start
3:14
over here and now you're going to configure what you want to add. So we're going to be adding our product
3:21
colors that is what we're specifically looking to add which is going to be a
3:25
color swatch of our product. Now you guys can see there are three
3:28
options. Now I'm going to turn off the size options and I'm going to add
3:33
the color or custom image option. Then I like to keep it simple first and
3:38
I just like to go to the next step. You can directly click on configure over
3:42
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
3:51
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
3:59
next step, just leave the color swatches open. Then you're going to size how you want them to be
4:05
So I want them to be circular and I want them to be large in size. This is the
4:09
preview just so you guys can see. Then you have the swatch spacing so how
4:14
large of a distance should there be. Then you have your swatch border style
4:18
I only want one border and let's say I want the thickness of
4:22
the border to be larger. So you can add that as well. Now after
4:26
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
4:34
your size how you want this to appear to whether or not it should
4:38
reduce the size when someone hovers their mouse over it. Then if it should increase the size if someone hovers their mouse over it
4:46
then you also have other options like if you want the image to be
4:49
zoomed in on when you have the item displayed. Now you might be wondering
4:53
this is the item display. I'm going to show you guys later on how to add colors
4:57
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
5:03
right or left. I want it to the left and then I'm just going to click on next
5:07
step. Now after this I don't like to change anything I'm just going to click
5:11
on next step simply because you don't need to do a lot of changes to this
5:16
And then you're going to apply this to your live theme whichever one is your
5:20
live theme you want to click on that and click on go to theme editor
5:23
Now once you click on go to theme editor you will see on the top left in your app
5:28
embeds you will have this enabled and once you have this enabled just click on
5:33
save on the top right to make sure that this is enabled like so
5:37
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
5:43
now you're just going to click on your global color swatch options and then
5:47
you're going to turn off the size options and then you're going to click on the configuration button on the bottom right
5:53
Now after that you're going to be able to see the actual colors of your
5:56
products. Now you can search for your particular product that you have so we're doing this for our hoodie and
6:03
the hoodie colors are green I'm pretty sure green yeah so you can search for
6:07
those colors as well or you can just go on ahead and see the colors over here
6:11
I have green and blue added so now what you're going to do in color
6:15
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
6:22
well you don't have to eyeball the color you can actually go into the Shopify app store just open up your image
6:28
and then you're going to download the eyedropper chrome web extension I have
6:33
this downloaded over here just install this extension and then you're going to click on the extension over here
6:39
and then you're going to click on pick color from web page now you can hover
6:43
over your mouse and just select the color and then the color will appear on the top right over here
6:48
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
6:56
show you the hex code on the top right and you're just going to copy this
7:00
and then paste it in the bottom left hex section like this and now the actual particular color of your item will be shown
7:08
Now I'm going to do the same with the blue item I don't have the blue image
7:12
added yet so I'm just going to or this one is the one that I'm going to use so
7:16
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
7:24
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
7:33
can click on save on the top right and once you click on
7:37
save you can open up your online store so this is our online store and let's
7:42
scroll down to our hoodie product like so now you guys can see this is now
7:46
displaying green and blue now another great thing you can do is
7:50
that once you've added this item so now we have our color swatches
7:54
we can go into our product section and you can go into your actual product
7:58
so open up your product over here scroll down and in your variants you're going to
8:03
click on edit just click on any variant option this will open up the variant detail and you can add a
8:09
particular image for each individual variant so I'm going to add this image
8:13
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
8:20
and then click on save on the top right and just like that now if I open up my
8:25
online store now with these newer changes I'm going to scroll down open up the hoodie over here and we
8:33
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
8:41
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
8:48
so I hope you guys found this video helpful if you did make sure to leave a
8:52
like and subscribe to our YouTube channel and if you have any questions or
8:55
queries leave those in the comment box down below and I will catch you guys in the next video
#Business & Industrial
#Shopping

