Shopify 101: Using Color Swatches on Your Theme

May 08, 2020 2 min read

You know those AWESOME color swatches you see on some websites. Did you know you can even use patterns or textures there too!?!? It takes a teeensy bit of upkeep, but it's a super cool feature - especially if you have a large catalog and many items with multiple colors. Don't miss out on a sale because your customer didn't love the main product photo - maybe that color just didn't do it for them!

Ok - let's do this!

Just 3 steps!

Firstly, I'll assume that you are on a Shopify theme that has swatches already (if not, start there, or you will have to have these custom coded in).

Your theme pulls from a very basic set of colors. So for patterns, prints, or non-standard colors that are showing as white swatches by default. Just:

  1. In Canva or any basic design program, create a graphic that is 200x200 pixels. Set the background color to the color in question (or pattern, you can even use an actual snippet of a photo if you want to show an exact print on an item).
  2. Save your graphic as: color.png, examples:
    • blue.png (use all lowercase)
    • or light-blue.png (if there is a space or / in your title, use a dash and name it like this)
  3. Now upload your graphic file/s to the assets in the coding of your theme.

Viola! Easy peezy!!

Video more your jam? Watch our Youtube tutorial!




OK - THAT'S MY FRIENDLY TIP FOR THE DAY!!! TUNE BACK NEXT WEEK :)!

Cheers! Angela

Need help optimizing your website to increase your revenue? That's what we do!

Read Next

THE BOUTIQUE WEBSITE TRAFFIC CALCULATOR


Leave a comment

Grab your Bad-A** Brand Checklist FREE!