EComposer is #1 Drag & Drop Page Builder that helps you create professional Shopify websites without any coding. Provide 100+ design elements and 300+ templates, there’s no limit to what you can build. Install EComposer for free today and start building the store you’ve always wanted.
How to Add Color Swatches to Shopify Product Pages
Table Of Contents
In online shopping, visual appeal is crucial in attracting and retaining customers. A wonderful method to improve your visual presentation and maybe improve the way that customers interact with your items is by using color swatches. The overall engagement and user-friendliness of the shopping experience are increased when product color options are shown in a clear and engaging manner.
In this blog, "How to Add Color Swatches to Shopify Product Pages", we will guide you through the simple steps needed to implement color swatches on your Shopify store. The aesthetically pleasing appearance of your product pages as well as client happiness and revenue might both increase with this upgrade.
Why Color Swatches Are Essential for Your Shopify Store
A Shopify store's customer experience can only be improved with the use of color swatches. Giving customers a rapid and clear overview of all the color options, they make the picking process easier for them and improve the intuitiveness of the buying experience.
Improve User Experience
Customers can instantly and clearly observe all of the color options available using color samples, greatly improving the user experience. Customers may compare and select their preferred colors fast with this option, saving time and effort by eliminating the need to navigate many pages or complex menus.
Increase Conversion Rates
Increased conversion rates can result from improved user experiences. When customers find it easier to choose their desired color and complete their purchase, they are less likely to abandon their carts. Through the process of making selections easier, color swatches have the potential to increase sales and enhance consumer satisfaction in general.
Visual Appeal
The visual attractiveness and professionalism of your product pages are enhanced by the use of color swatches. Your product pages will seem more professional and captivating if they provide a simple, interactive way for users to examine color selections. Your Shopify business may seem more trustworthy and appealing as a result of this improved presentation, which contributes to making a favorable first impression.
How to Add Color Swatches on Shopify Product Page (2 Methods)
Method 1: Add Color Swatches in the Shopify Themes Editor
Step 1: Go to Shopify Themes Store
Begin by visiting the Shopify Theme Store. In the left sidebar, locate the "Features" section and click on the "Color swatches" filter. This action will narrow the theme options to those with built-in color swatch support.
Step 2: Choosing themes with Color Swatches available
Review the filtered themes to find one that suits your store's design and functionality needs. Be aware that most themes with color swatch features are paid, typically between $140 and $400. Select a theme that offers the color swatch functionality you require and proceed with purchasing and installing it.
Step 3: Back to the Products section
After installing your chosen theme, return to your Shopify dashboard. Navigate to the "Products" section by clicking on "Products" from the main menu. This is where you'll set up color variants for your products.
Step 4: Add variants
Find and select the product you want to enhance with color swatches. Scroll down to the "Variants" section on the product page and click the "Add options like size or color" button. This allows you to create new variant options for your product.
Step 5: Select the Online store field
Next, return to the Shopify dashboard and click "Online Store" in the left sidebar. This section allows you to manage and customize your store's theme.
Step 6: Customize your theme
Click on "Customize" next to the theme you've installed. This action opens Shopify's theme editor, where you can change how your product pages appear.
Step 7: Add Color Swatches
In the theme editor, use the dropdown menu at the top of the page to select the "Default product" template. Look for the "Variant picker" block in the layout. If the block is not already present, you can add it to the template. Click on the block, open the "Color selector type" dropdown menu, and choose "Color swatch" from the options. This setting will enable color swatches on your product pages.
Step 8: Click Save
After configuring the color swatches, click the "Save" button to apply your changes. Your product pages will now feature color swatches, allowing customers to view and select color variants for your products easily.
Method 2: Add Color Swatches using Shopify Liquid Code
Step 1: Select Online Store
From your Shopify admin dashboard, navigate to the "Online Store" section in the left-hand menu. Click on it to open the theme management area, where you can customize your store's appearance.
Step 2: Edit code
Locate the theme you are currently using. Click on the "..." button dropdown menu next to the theme and select "Edit code." This will open the code editor, which you can use to access and modify the theme files.
Step 3: Open the "settings_schema.json" file
Find the "Config" folder in the left sidebar in the code editor. Click on it to expand the folder, then click on the "settings_schema.json" file. You will add choices for color swatches in this file, which also contains your theme's setup information.
Under Row 9, insert a line break. Enter the following code in that area:
|
{ "name": "Color Swatches", "settings": [ { "type": "text", "id": "optionName", "label": "Swatch option name", "default": "Color", "info": "Make sure capitalization is same as variant for e.g Color not color " }, { "type": "paragraph", "content": "If your store is in different languages, type in all the different words and separate them with commas. For example: Color, Colour, Couleur" }, { "type": "select", "id": "swatchType", "label": "Swatch type", "options": [ { "value": "color", "label": "Color" }, { "value": "variantImage", "label": "Variant image" } ], "default": "color" }, { "type": "textarea", "id": "swatchColors", "label": "Colors", "placeholder": "Red:#ff0000\nGreen:#00ff00\nBlue:#0000ff", "default": "Black:#000000\nWhite:#f5f5f5\nBlue:#005eff\nRed:#c9002c\nPink:#ffd5e6\nBrown:#a2896b\nOlive:#808000\nGreenRed:#008000#c9002c\nGreenRedBlue:#008000#c9002c#005eff", "info": "One rule per line. Example: Blue:#005eff\n2 Color Swatch Example: GreenRed:#008000#c9002c\n3 Color Swatch Example: GreenRedBlue:#008000#c9002c#005eff" }, { "type": "paragraph", "content": "You can also add [image files](/admin/content/files?selectedView=all&media_type=Image) instead of using colors, in lowercase with spaces replaced by hyphens. Example: Green kaki: green-kaki.png" }, { "type": "select", "id": "swatchStyle", "label": "Swatch style", "options": [ { "value": "round", "label": "Round" }, { "value": "square", "label": "Square" }, { "value": "square-round-corners", "label": "Square round corners" }, { "value": "portrait", "label": "Portrait" } ], "default": "round", "info": "Portrait mode is only available for the variant image type." }, { "type": "range", "id": "swatchSize", "min": 20, "max": 120, "step": 2, "unit": "px", "label": "Swatch size", "default": 40 } ] } |
Save your edits when the new code has been added.
Step 4: Open the "product-variant-picker.liquid" file
Navigate to the "Snippets" folder in the left sidebar and find the "product-variant-picker.liquid" file. Click to open it. This file is responsible for rendering variant options, and you'll need to replace parts to include color swatches.
Look for the section starting around line 51 that handles how variants are displayed:
|
<fieldset class="js product-form__input product-form__input--pill"> <legend class="form__label">{{ option.name }}</legend> {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} </fieldset> |
Replace the existing code with the provided snippet to integrate color swatches. This code snippet checks if the variant option is a color and then uses a new snippet to render color swatches.
|
<fieldset class="js product-form__input product-form__input--pill"> {%- liquid assign optionNames = settings.optionName | split:"," assign useColor = false for optionColor in optionNames if optionColor == option.name assign useColor = true break endif endfor -%} {%- if useColor -%} <legend class="form__label ">{{ option.name }}:<span id="selected-{{ option.name }}"> {{ option.selected_value }}</span></legend> {% render 'color-option', product: product, option: option, block: block %} {%- else -%} <legend class="form__label">{{ option.name }}</legend> {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- endif -%} </fieldset> |
Save your edits when the new code has been added.
Step 5: Open the "Snippets" folder and select "Add a new snippet"
Still, within the "Snippets" folder, click on "Add a new snippet." Name this new snippet "color-option.liquid" and click "Create snippet." This will create a new file where you will define the code for the color swatches.
Add the code below:
|
{% comment %} Renders product variant options Accepts: - product: {Object} product object. - option: {Object} current product_option object. - block: {Object} block object. Usage: {% render 'product-variant-options', product: product, option: option, block: block }% {% endcomment %} {%- liquid assign variants_available_arr = product.variants | map: 'available' assign variants_option1_arr = product.variants | map: 'option1' assign variants_option2_arr = product.variants | map: 'option2' assign variants_option3_arr = product.variants | map: 'option3' assign product_form_id = 'product-form-' | append: section.id assign swatchType = settings.swatchType assign swatchStyle = settings.swatchStyle assign swatchSize = settings.swatchSize assign swatchColors = settings.swatchColors | newline_to_br | split: '<br />' -%} <style> .product-form__input input[type='radio'] + label.color-swatch, .product-form__input input[type='radio'] + label.color-swatch:after, .product-form__input input[type='radio'] + label.color-swatch:before{ border-radius: 0; } .product-form__input input[type='radio'] + label.color-swatch.round, .product-form__input input[type='radio'] + label.color-swatch.round:after, .product-form__input input[type='radio'] + label.color-swatch.round:before{ border-radius: 100%; } .product-form__input input[type='radio'] + label.color-swatch.round-corners, .product-form__input input[type='radio'] + label.color-swatch.round-corners:after, .product-form__input input[type='radio'] + label.color-swatch.round-corners:before{ border-radius: 5px; } .product-form__input input[type='radio'] + label.color-swatch{ border:1px rgb(214,214,214) solid; width: {{swatchSize}}px; height: {{swatchSize}}px; background-repeat: no-repeat; background-position: center; background-size: cover; margin-right: 9px; } .product-form__input input[type='radio'] + label.color-swatch:before{ content: ""; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 1px rgb(214,214,214) solid; z-index: 0; } .product-form__input input[type='radio'] + label.color-swatch:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; {%- if settings.dark or swatchType == "variantImage" -%} border: none; {%- else -%} border: 3px rgb(255 255 255) solid; {%- endif -%} } .product-form__input input[type='radio'] + label.color-swatch:hover:before{ border: 1px rgb(125 124 124) solid; } .product-form__input input[type='radio']:checked + label.color-swatch:before{ {%- if settings.dark -%} box-shadow: 0 0 0 2px rgb(var(--color-foreground)); {%- else -%} box-shadow: 0 0 0 1px rgb(var(--color-foreground)); {%- endif -%} border-color:rgb(var(--color-foreground)); } .product-form__input input[type='radio'] + label.color-swatch.variant-swatch{ background-color:white; {%- if swatchStyle == "portrait" -%} height: calc({{swatchSize}}px/ 0.66); {%- endif -%} } </style> {%- for value in option.values -%} {%- liquid assign option_disabled = true for option1_name in variants_option1_arr case option.position when 1 if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] assign option_disabled = false endif when 2 if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] assign option_disabled = false endif when 3 if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] assign option_disabled = false endif endcase endfor -%} {%- if block.settings.picker_type == ''button'' -%} <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}" form="{{ product_form_id }}" {% if option.selected_value == value %} checked {% endif %} {% if option_disabled %} class="disabled" {% endif %} > {%- if swatchType == ""variantImage"" -%} <label data-{{ option.name }}="{{value}}" style="background-image:url( {%- liquid assign optionIndex = option.position | minus: 1 for variant in product.variants if variant.options[optionIndex] == value assign swatchSizePortrait = swatchSize | times: 2 echo variant.image | image_url: width: swatchSizePortrait break endif endfor -%} );" class="color-swatch variant-swatch {% case swatchStyle %}{% when "'round'" %}round{% when "'square-round-corners'" %}round-corners{% endcase %}" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"> <span class="visually-hidden"">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span> </label> {%- else -%} {%- liquid for colorData in swatchColors assign colorDataArr = colorData | split:":" assign ruleName = colorDataArr[0] | strip if value == ruleName assign colorCodes = colorDataArr[1] | strip | |
Don't forget to click "Save" your change.
Step 6: Customize your theme
Open the "color-option.liquid" snippet and paste it into the provided code. This code handles the display and styling of the color swatches on your product pages. It includes logic to apply the correct color or image based on your settings.
- The code should include styling information such as border-radius, size, and background color.
- It also handles swatch styles (e.g., round, square) and sizes.
Step 7: Add Color Swatches
Return to the theme editor and navigate to the "Default product" template. Ensure that the "Variant picker" block is set to use color swatches.
- Select "Customize theme" from the "..." dropdown menu in the page's top-left corner.
- Go to the "Default product" template and find the "Variant picker" block.
- Change the style to "Color swatch" or "Pills" in the Style section to ensure that color options are displayed as swatches.
Step 8: Click Save
After completing the changes, click the "Save" button in the top-right corner of the code editor to apply your modifications. In order to guarantee that the color swatches are current and accessible on your product pages, this step is essential.
Advanced Tips for Optimizing Color Swatches
Consider these advanced strategies to elevate the effectiveness of color swatches on your Shopify store.
Custom Swatches for Unique Products
Creating custom swatch images can make your store stand out for products with distinctive colors or patterns. Create first-rate photos that faithfully depict your distinct variations. Upload these images to Shopify and link them to the corresponding product variants. As a result, customers will feel more confident in their choice because each swatch accurately depicts the appearance of your available products.
Enhancing Mobile Experience
Color swatches should be visually appealing and functional on mobile devices. Make sure swatches adapt to various screen widths without any issues by utilizing responsive design strategies. This might involve resizing swatches or adjusting their layout. Test your swatches often across a range of mobile devices to ensure that they offer a seamless and user-friendly experience, since this may have a big influence on conversion rates and user happiness.
Using Swatches for Non-Color Variants
Swatches aren't limited to colors. They may also stand in for different product variations in terms of materials, sizes, or designs. Use symbols or pictures, for instance, to indicate various materials or patterns, providing a visual preview that aids in the decision-making process for clients. An interesting and educational purchasing experience may be offered by using creative swatch designs, such as textured pictures or patterned icons.
Related posts:
- How to show the swatch color on multi languages?
- 15+ Best Color Schemes for Shopify
- How To Add Color Swatches For Shopify Product Variants
FAQs
Do all Shopify themes support color swatches?
No, not all Shopify themes come with built-in support for color swatches. Some themes may require additional customization or the installation of a third-party app to enable this feature. Review the documentation or contact the developer to check if your theme supports color swatches. If your current theme doesn't, consider switching to a theme that does or using an app to add this functionality.
Can I use custom images for my color swatches?
Yes, you can use custom images for your color swatches. This is especially useful for representing unique colors or patterns that can't be accurately depicted with solid color blocks. You can upload your custom swatch images to Shopify and link them to the relevant product variants. This method gives clients a better understanding of their alternatives while also improving the visual appeal of your product pages.
What if my color swatches don't display correctly on mobile?
If your color swatches aren't displaying correctly on mobile devices, you may need to adjust their responsive design settings. Ensure that swatches are properly sized and aligned for various screen sizes. Use Shopify's theme customization options or code adjustments to improve their appearance on mobile. It is crucial to test on several devices in order to provide an impeccable user experience.
Are there any free apps on Shopify for adding color swatches?
While many apps for adding color swatches to Shopify are paid, some free options are available. You can find these by searching the Shopify App Store for "color swatches" and filtering for free apps. Make sure the free applications match your needs by reading user reviews and app descriptions. Keep in mind that free apps could have less functionality than their commercial versions.
How can I use swatches for other product variants besides color?
Not just color may be achieved with swatches. For further product variations, such as materials, sizes, or patterns, you may use unique pictures or icons. For instance, create swatches visually representing different materials or patterns and link them to the corresponding product variants. This will diversity your product pages and assist customers in making more informed judgments.
Conclusion
Color swatches may be added to and customized on Shopify product pages to greatly improve the aesthetic appeal and user experience of your business. We reviewed more complex methods, such using custom swatch pictures and mobile optimization, as well as how to incorporate swatches with ease using the Shopify theme editor.
With these swatches, potential customers will be able to make better decisions and your product pages will look better, maybe leading to more sales. To properly optimize your store, investigate further resources or consult a professional for more modification or advice.
Are you Ready to Enhance your Product Page by Adding Color Swatches?
With EComposer, you can easily add custom color swatches to your Shopify product pages, boosting conversions and offering a better shopping experience. No coding needed—just use EComposer’s drag-and-drop interface to showcase all available options in a sleek, organized way.
Stop waiting! Start your free trial on EComposer today and experience the ease of adding color swatches to your Shopify product pages.
comments