Add color swatches to your products using line item properties

If your products can be customized with a color — e.g. dyeable shoes, color-printed cards — and you do not need to track inventory of that color, then you can collect that color value on the product page using a line item property. When you have completed the steps in this tutorial, you will have added a color swatch to your products without using a Color product option.

If you're not sure whether you should use a line item property or product option for your Color, ask yourself: do I have in stock products that are already have that color on them, or do I add the color to my product when it is ordered? If you have them in stock, you need to use a Color option, and this other tutorial is the one you need. If you add the color to the product when processing your orders, then you don't need a Color option, and this tutorial right here is the one you need.

Color swatches lip example

Take a look at this demo page to see the tutorial in action.

Create a new Liquid snippet

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. On the left side, click on the Snippets heading to reveal your Snippets content.

  4. Under the Snippets heading, click on the Add a new snippet link:

    Color swatches click add snippet
  5. Call your new snippet swatch-lip. Click Create snippet.

    Color swatches added snippet lip
  6. Copy+paste the content of this file into your new swatch-lip.liquid snippet.

  7. Save your changes.

Include swatch-lip.liquid in product.liquid

  1. On the page, under the Templates heading on the left, locate and click on product.liquid to open your product template in the online code editor.

  2. Include your swatch-lip.liquid snippet where you want to insert your color swatch. Include it with a comma-separated list of your color options. Only include the swatch on products that need it. For example, if you sell dyeable shoes and their product type is “Dyeable shoes”, and you also sell other products, use the following:

    
    {% if product.type contains 'Dyeable' and product.available %}
      {% include 'swatch-lip' with 'Ivory, Hot Pink, Navy Blue, Olive' %}
    {% endif %}
    
    

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

Color swatches click include snippet lip

Make your theme compatible with LIPs

Follow these instructions to make your theme compatible with Line Item Properties. Your theme may already be compatible in part, or completely. You will need to focus on these two sections:

Add CSS to your stylesheet

  1. On the Edit HTML/CSS page, locate and click on 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.liquid, style.css.liquid or shop.css.liquid.

  3. Once you have located your file, click on it to open it on the online code editor. Copy+paste the content of this file at the very bottom of your file. It is very important that you append the CSS at the bottom of your stylesheet.

If you can't find your theme's stylesheet, copy+paste the CSS provided into a style element, and add that style element at the very 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 up 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 handleized, 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

Other example, if your color is 'Blue/Gray', then name your image blue-gray.png.

Most simple example, if your color is 'Black', the name your image black.png.

  1. On the Edit HTML/CSS page, locate and click on the Assets folder to reveal its content.

  2. Under the Assets heading, click on the Add a new asset link.

  3. Upload your image.

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

FAQ

  • What if I want to use JPEG images for my swatches instead of PNG?

    In your swatch.liquid file, edit line number 5 to this:

    {% assign file_extension = 'jpg' %}
  • What if I forget or do not upload an image for one of my colors, what happens then?

    Nothing will explode. The script will take the last word of your color name and set the swatch box color to that name:

    background-color: {{ value | split: ' ' | last | handle }};

    If the color is 'Sky Blue', then the CSS will apply the color blue to the box.

    Here is a list of CSS color keywords and their hex value: http://en.wikipedia.org/wiki/Web_colors.

    If there's no color associated with that word, then the box will be gray, but the color name will be displayed in the tooltip.

  • So, I don't need to upload an image if I am okay with the default web color associated with my color name?

    Correct.

  • What are the default web colors again?

    Here is a list of CSS color keywords and their hex value: http://en.wikipedia.org/wiki/Web_colors.

  • Those sexy tooltips are using JavaScript?

    No, only CSS and Dane Tello is the genius behind them. They work well in Internet Explorer, albeit without the animation and drop-shadow.

  • Can the boxes be any smaller? They are kind of big!

    Yes. At the beginning of the provided CSS, you have 2 Liquid variables you can edit, width and height. Edit those values. That's it.

Want to discuss this page?

Visit the Shopify Community