Your cart

Your cart is empty

Thinking about working together?

Grab a free call to figure out if now is the right time to invest in your website.

Shopify 101: Using Color Swatches on Your Theme

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

Previous post
Next post

Leave a comment

Please note, comments must be approved before they are published

Book your free call yet?

We are standing by. OK maybe not standing by, because that would just be weird. But we are here!