Blog


Adding color swatches to your Shopify store | Seller Panda Manual

Posted By Seller Panda comments February 23, 2015

With our Swatchify app you can easily add color swatches to your Shopify store. To do so simply install the app, after you’ve set your colors and chosen a layout for your swatches continue on with the instructions below to add the swatches snippet to your theme.

 

Standard installation

1. Copy the following code snippet:

{% if product.available and product.variants.size > 0 %} {% include ‘panda-swatch’ with ‘Color’ %} {% endif %}

2. In your Shopify admin’s right side menu click on Themes.

themes

3. Under Themes click on Customize theme for your published theme.

InstallSwatchify.2

 

 

 

4. Click on Edit HTML/CSS.

InstallSwatchify.4

5. Click on Templates and open your Product.liquid template.

InstallSwatchify.5

 

If Product.liquid is empty, click here to learn how to proceed.

6. In the code of your product.liquid search for the </select> tag.

If you can’t find the </select> tag in your product.liquid click here to learn how to proceed.

InstallSwatchify.6

7. After each </select> tag, paste the snippet you copied.

InstallSwatchify.7

8. Click Save and now your swatches will show in your store!

Installing in product-form.liquid

If you can’t find the </select> tag in your product.liquid template proceed with these instructions.

1. Find under Snippets > Product-form.liquid.

InstallSwatchify.132. Search for the tag </select>. You should see the </select> tag  twice.
InstallSwatchify.14

3. Paste the swatches snippet after each one of the </select> tags:

InstallSwatchify.15

Installing in Product.liquid under Snippets

Proceed with these instructions if you couldn’t find the code in Templates >  Product.liquid, instead your Product.liquid looks like this:

InstallSwatchify.8

 1. Under Snippets look for Product.liquid.

InstallSwatchify.92. In the code of your product.liquid search for the</select> tag.
InstallSwatchify.10

3. After the </select> tag, paste the snippet you copied.

InstallSwatchify.7

4. Click Save and now your swatches will show in your store!

If you need any help installing your swatches don’t hesitate to contact us at support@sellerpanda.com.


Comments

Leave a Reply

Leave a Comment.