How to add color swatches code product page

shopify swatches code

Generally, the theme tries to match the color name you use in the variant name to a standard color. If this color is not available as the standard color, the color field will be left blank.

Here are the following steps to add custom color swatches to the product page:

Create a new Liquid snippet called swatch. liquid

  1. From the Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to change, then click Actions > Edit Code.
  3. On the left side, click the Snippets section to view the content of the theme’s snippets.
  4. Under the Snippets heading, click the Add New Snippet link:

(Shopify swatches code)

  1. Call your new snippet ‘swatch‘. Click Create snippet.
  1. Add following code into your new swatch.liquid snippet.
  1. Save your changes.

Include swatch.liquid in product.liquid

  1. On the Edit, HTML / CSS page, under the Templates, heading on the left, locate and click product.liquid to open the product template in the online code editor.
  1. Include the swatch.liquid snippet where you want to insert a swatch (Normally it is added below the price and review part or below the product image). Include it with the name of the product option you need to turn into a sample. For example, use this code if your product has a Color option:

If you want to use the button treatment on a Size option, use this:

If you want to apply the button or swatch  treatment button to all product options, use this:

With this final snippet, color swatch processing is automatically applied to all product options that contain the word color or size, while button processing is applied to all other options.

When you receive a color swatch treatment, your color drop-down menu is removed from the product page which is the default by theme, and replaced with a series of brightly colored buttons. When you get a button treat, your options drop-down menu is removed from the product page and replaced with a series of gray labeled buttons.

If you don’t know which snippet to use, use the latest one.

If you’re not sure where to insert your snippet, look for a select element with the name ‘id’ and add your snippet right below that element:

Locate your selectCallback function

The selectCallback function in a Shopify theme updates the state of the Add to cart button and the displayed selling and “compare at” prices when a variant is selected.

Still in your product.liquid file, locate this:

Don’t see it? Under the Layouts folder, locate and click the theme.liquid file to open it in the online code editor. In a fair amount of themes, the selectCallback function is located in this file instead of product.liquid.

After you have located your selectCallback function, add the following code to the body of the function, either at the top or bottom:

Add code at the bottom of theme.liquid


Still on the Edit HTML/CSS page, under the Layouts heading on the left, locate and click your theme.liquid file to open it in the online code editor.

At the bottom of your theme.liquid file, right above your </body> tag, add this code:

Upload a soldout.png graphic to your theme assets

We are going to upload a graphic to our theme assets that will be overlaid on top of our buttons when their associated value is sold out for all variations of our product.

You can use this one image below, save it to your desktop:

The CSS we’re using will stretch or compress that graphic so that it fits nicely onto the button or swatch box.

  1. On the Edit HTML/CSS page, locate and click the Assets folder to display its content.
  2. Under the Assets heading, click the Add a new asset link.
  3. Upload your soldout overlay.

Add CSS to your stylesheet

  1. On the Edit HTML/CSS page, locate and click the Assets folder to display its content.
  2. Under the Assets heading, locate a file with extension .css.liquid that is not checkout.css.liquid. There should be only one other file. Such file is often named styles.css.liquidstyle.css.liquid or shop.css.liquid.
  3. After you have located your file, click it to open it on the online code editor. Copy and paste this code at the bottom of your file. It is important that you append the CSS at the bottom of your stylesheet.

If you can’t find your theme’s stylesheet, copy and paste the CSS provided into a style element, and add that style element at the bottom of your product.liquid file.

Upload your color images

For the color options you have, you can either let the smartness of the script provide a color for you, or you can upload an image that represents that color.

The way I have gotten my images from my products in my demo shop was to open each product image on my storefront in the “colorbox” (lightbox) and grab around ~ 55 by 40 pixels section of the product image, then save that small screen grab to my desktop, and rename the image.

Note: There’s an important naming convention to respect here! The image must be named after the color option, but be handled, and have a .png extension.

For example: 

If you have a color called ‘Déjà Vu Blue’, then name your image deja-vu-blue.png

If your color is ‘Blue/Gray’, then name your image blue-gray.png.

If your color is ‘Black’, then name your image black.png.

  1. On the Edit HTML/CSS page, locate and click the Assets folder to reveal its content.
  2. Under the Assets heading, click the Add a new asset link.
  3. Upload your image.

Repeat steps 2 and 3 until you have uploaded all your images.

source link

Hire an expert for this type of custom coding

5 thoughts on “How to add color swatches code product page”

  1. Hello admin,

    I have tried your code in the debut theme and now in Feb 2021 this code is not working can you please update the code?

    Thanks!

Leave a Reply

Your email address will not be published.