Up next in 10
How To Add Shopify Color Swatches On Product Page
5K views
May 19, 2024
Adding color swatches to your Shopify product page enhances the shopping experience by allowing customers to see and select different color options visually. To implement color swatches, start by accessing your Shopify admin panel and navigating to "Online Store" > "Themes." Click "Actions" and select "Edit code." Find the product template file (usually product.liquid or product-template.liquid). You'll need to add custom HTML and Liquid code to display the swatches. Alternatively, you can install a Shopify app designed for color swatches, which simplifies the process with user-friendly settings. Customize the appearance of the swatches to match your store’s design. By adding color swatches, you make your product options more engaging and easier to navigate, improving overall user experience and potentially increasing sales.
View Video Transcript
0:00
How to add Shopify color swatches on your product page
0:05
Hey guys, welcome back to the YouTube channel. Today I will be going over how you can add color swatches onto your product page
0:13
So what do I mean by color swatches? Well, if you take a look at your product page, this is the product page for my website
0:21
I have this item and we can display the colors by name. But instead of having, you know, the colors displayed just by name
0:27
I would much rather have color swatches that can be illustrative of the color of the product
0:33
This can help your website appear more updated, more in touch, and it really elevates your website to the next level to make it stand out from all the other Shopify stores
0:44
So you can easily, you know, do this with a integration, and I'm going to show you guys exactly how
0:51
So you want to log into your Shopify account, open up your dashboard, and in your dashboard, you are going to go
0:57
into settings, go into your apps and sales channels, click on the Shopify App Store
1:03
and this will open up the Shopify App Store. Once your App Store has been opened in a new tab
1:09
you're just going to search for a certain integration. And it is called Globo Color Swatch
1:15
So you're going to search for Globo Color Swash, and you can see Global Product Options
1:21
variants then you also have glow color swatch variant image then you also have PL product color swatches
1:27
so you can choose any three of these they all work pretty good and they have free versions so i like
1:33
to use the glow color swatch and we're going to just click on add application and just like that this
1:39
application will be added now from here you're going to click on install application and just
1:45
taking a couple of seconds this will install the application so i'm just pinning it to the navigation bar over here
1:51
so it's a lot easier for us to do. Now, once you have your application integrated
1:58
you can see this will be like the welcome page of the application and we are just going to click on Let Start And it will you know start you know syncing up to your store to see your products to see option settings
2:10
And from there, we're going to add our color swashes. And it can take a little bit of time depending on the number of products that you have
2:18
So you guys can see automated display, uh, color or custom image swash
2:23
I want a color or custom image swash. And, uh, you know, for sizes, I want it to be a button
2:28
Now after that I'm going to click on next step and this will ask me for the template setting
2:35
So how do I want my swatch to appear if I want it to a circle, a square or just to fit the text
2:43
So I want the color swatches to be circular and I want the swat size to be a little large like so
2:50
Then you have your swat spacing, you have your swash border style, the borders, the thickness as well
2:56
And then you have the hover effects as well that you can add
3:01
Now, you also have zoom image on hover. If you want, I don't want that
3:05
Then you have size change on hover. I'm not going to add that. I want it to be aligned to the center
3:11
And now I'm just going to click on next. Now, after that, you have sold out variant display if you want to display it or hide it
3:19
I want to hide it. I don't want my, you know, customers to see a specific color is sold out
3:24
If they are only interested in that, I want them to open up product you know view it a little and then if it's sold out maybe they will be more inclined to
3:32
buy the other color so for that i like to do this then you have some basic options like your
3:37
add to cart button sold out button all those button names i don't like to change any of those
3:42
then you have shown product page require customers to select an option your collection page and once
3:47
you have done that you're going to and even on your collection page you guys can see uh you can
3:52
you know add to cart button directly to your collection page as well and
3:56
You can choose your enable color swash even if a product has only one variant
4:00
So if a product only has one color do you want a color swash present of that I don want one so that what i going to do now i going to click on next step on the top and from the top right i will have my
4:16
theme integrate it will ask me to uh you know integrate my theme once we have this completed now
4:23
i'm just going to add this go to theme editor and now we have this application you know this
4:32
app embed doesn't have customizable settings but we have this embedded and you want to make sure that
4:37
you embed this into the code of your template so if i go into the sections and you can see multiple
4:45
different sections over here in my product information i will click on add block and then you have
4:51
your apps and you want to search for global over here if it doesn't say if it can't find it we are
4:58
just going to enable it over here and just making sure this gets integrated
5:05
So check the swatches widget is now available. I see the swatches widget and now I'm
5:11
just going to save it, enable it and save it. Now once our saved changes have been created
5:19
I want to go into my catalog and once I go into my catalog I want to go into a product
5:25
and you guys can see I have my color squashes. Obviously, I haven't added any colors, but what I will do is I will select I see the swatches widget
5:35
And this will obviously enter, you know, your actual colors. You want to enter your colors
5:40
So for that, we can actually go into our product page, how it appears, all the colors
5:46
And you can even go into your product. And let's say we have this product over here
5:50
We can click on this. And if you scroll down, you have..
5:55
the color variants that are shown and you have multiple different values obviously are going to integrate those and this is how it going to appear now i want to go back into my glow color swatch and it says it takes you know one to two minutes to sync up like so so just making sure that we have our color field set and you can put out customization requests over here as well
6:25
now i'm just going to go into our product page appearance and now from here you can choose the selection of the fields
6:35
So whatever you want, that is totally up to you. Like so, it will add, you know, the different swatches
6:43
Obviously, you have to add images to your swatches in your product section
6:47
So in my product section, I want to make sure, you know, I have multiple different options
6:53
And in these multiple different options, I want to link my images as well in my variance
7:00
So we have color like so. And you can select the blue ones like this
7:04
and then you have your second option called orange and we can select those so those are linked to that specific color and we're going to click on save and just like that you can actually display your color variants on your shopify store in the form of you know swatches instead of just having basic text hovering around you have you know this gorgeous looking bubble and in the bubble it will display the image of your color variant so that was it for today I hope
7:34
hope you guys found this video helpful make sure to like this video and subscribe to the
7:40
youtube channel and comment down below the best tips and tricks that i have taught you within this
7:45
video and make sure to also share this video with your friends and family and to other creators
7:51
as well so you can help them out as well and to anyone that might need to know this basic detailed
7:56
platform and how you navigate through these different social websites so i hope this was helpful
8:03
enough for you and make sure that you do leave a comment down below if I missed out on anything
8:08
and if there is anything you would like to add and I will catch you guys in the next video
#Retail Trade
#Shopping