You are new to Shopify and begin introducing a symbol theme for your store. Notwithstanding, you don't have the foggiest idea of how to add intelligent color swatches on your symbol theme's collection page. Indeed, the introduction theme and show color swatches on the collection page of the store will in general be trying for any Shopify merchants since it requests a little piece of code to add them to the theme for this issue.
By using collection color swatches, you can show that your products come from various color variations. This element chips away at each product posting going from the collection page included products and related products. Likewise, you will get an opportunity to transfer pictures to be utilized as color swatches by doing it. Those pictures will show the right color, surface, and plan of each color variation.
That is the reason we have this post today, which will tell you more about the best way to Add Color Swatches to your Shopify Store's Collection Page.
We should make a plunge!
What is a Color Swatch?
A color swatch is an enormous arrangement of colors, tints, gradients, and patterns. This color swatch is significant and natural to any designer or individual who works with Adobe Illustrator and Photoshop. So for what reason would it be advisable for you to add a color swatch when designing or redoing something?
Color swatches enable you to compare colors and try different combinations between them without creating any risk.
When it comes to Adobe Illustrator and Photoshop, their color swatches bring order to your color palette and allow you to save new swatches for later purposes.
A color swatch can be used in many different projects and cases since it is not saved with any particular document, which allows you to create a color library for later use.
There are four most common categories of color swatches that can be found in Illustrator. They include:
Process Color: This library is also known as the four standard process links since it only includes colors derived from cyan, yellow, black, and magenta. Designers tend to call it CMYK library, which stands for four main colors.
Gradient Color: This library brings about more shades for one color since it contains blends between two or more colors or tints. They can include process colors, spot colors, or RGB colors (Red-Green-Blue).
Spot Color: This library can either contain CMYK process colors or premixed links that are not in that category.
Pattern Color: This library is used for specialized use of filling shapes, which asks for repetition. Therefore, Pattern Color looks at tiled paths and texts.
Activate & Customize color swatches
Step 1: Showing custom swatch images
When it comes to activating and customizing color swatches on Shopify, remember to sign in your account first.
Then, go to Shopify Admin, which is followed by Online Store. Scroll down to the theme you want to edit and click in the Customize button.
From the top-bar, you should choose Product Pages. Next, find the section Settings and choose Swatches. Finally, check off Show custom swatch images.
Step 2: Naming the Product Options
Only when you name one of the Product Options as either Color or Colour can you show color swatches. The default mode is that the color swatches tend to use the HTML (Hypertext Markup Language) color spectrum. For example, if your variant color option is named Red, it is likely to show the HTML color Red.
However, there is the case when your color name does not appear on the list of HTML colors. If you face this issue, the color swatch will automatically turn into white, enabling us to custom color swatches to create our color swatches. Also, if the color is not accurate as expected, you can use customized color swatches.
Step 3: Taking a screenshot of your products
Now, it’s high time we take a screenshot of the product. The screenshot should not be as large as possible but remain at the size of 50px x 50px. What’s more, it should be of good quality to let you see a good proportion of the color. After taking the picture, let’s save this image by the following setup:
If the image’s color is named with just one word like Gold or Silver, save it as gold.png or silver.png(all in lowercase also).
If the image’s color is named with two or more words like Light Brown, save it as light-brown.png (all in lowercase and every space are replaced by a hyphen “-”).
If the image’s color is named White/Black, save it as white-black.png (all in lowercase and every space are replaced by a hyphen “-”).
Step 4: Uploading each png swatch one by one
After having saved all your images, go to the Online Store and click on the Themes button. Then, find the actions dropdown which stays next to the theme, and click to edit code. You are now led to the next page. In the left sidebar, click on the Assets folder and continue with Add a new asset. Here you can upload each png swatch one by one.
If you use the themes of Mr. Parker V6.5+, Icon 7+, and Vantage 7+, let’s take a look at the method we suggest below, which seems to be much easier. You are enabled to upload the swatches to the Shopify Admin Files. Moreover, you can upload more than one swatch at one time.
- Go to your Shopify Admin
- Click on the Settings section
- Click on the Files button
- Upload and select all your swatches
Now, let’s refresh your product page; what do you see? The generic color is already replaced by your swatch image, right?
Display color swatches on the collection page
To display color watches on the collection page on Shopify, you should follow the steps below:
- Go to the Customize section, which is your theme editor
- Click on the Theme Settings button
- Click on the Product Grid button
- Check off the Show color swatches setting, which is included under the Collections and Search Results
After completing the above instruction, the color swatches will surely be presented below product thumbnail images on collections and search results.
What if the swatches are not appearing?
It is normal when there are errors during the process of displaying the color swatch on the collections page on Shopify. In this case, the color swatches tend not to appear as expected. However, if they do so, you can follow the following guide to fix this, which is a quick troubleshooting list:
- Check out to see if you are saving your image files with the correct rule or not which means the images are saved with .png extension, all letters are in lowercase, and not .jpg or other formats.
- Check out to see whether you are uploading the image files to the Assets folder in the Theme editor or not. Remember that is not under the Settings section followed by Files.
- Check out and correct all letters that are not used in lowercase format when it comes to your file names.
- Check out to see if you have replaces all accented characters with the standard letters and replace all spaces or special characters with hyphens.
- Be sure your image is at the correct size which is at least 50x50 pixels.
- Make sure you have had your watch setting enabled. If it is not available, the color swatches will never appear.
One of the most common reasons is that your site is not in English but any other language. Therefore, your product option is not titled as Color or Colour and the color swatches will not appear. You then need to make a small adjustment at the product-swatch.liquid file.
Go to the Online store, click on the Themes section which is continued by Actions. Then, click on the Edit code button and snippets. Here, you will see the code located stays as:
{% if downcased_option contains ‘color’ or downcased_option contains ‘colour’ %}
You should now change it to be:
{% if downcased_option contains ‘your-option-title’ %}
Your-option-title is where you can use other words to replace color and colour. Such as, you can use ‘couleur’ or ‘farbe’ instead.
Conclusion
As you can see, the small liquid code above will effectively help you represent a color swatch on your Shopify web store Collection page for each color available for that product.
Adding in one or more color swatches on your Collection page on Shopify will allow you to show the user that this product had many different colors and they have a large variety of color options besides the one from featured images.
Hopefully, this article helps you successfully activate, customize color swatches on Shopify, display color swatches on the collection page, and even solve the error if the swatches do not appear.
Article source: How To Add Color Swatches on Shopify Collection Page?