SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Ecomus - Product - Configure color swatches

Annie

Written by Annie

Last updated

3104 views

On this page


By default, all swatches of the theme show with a blank color on all pages. This guideline helps you customize colors and images for product color swatches.

11.gif

Let's follow all steps below to make it work.

1. Create metaobject

Go to Settings > Custom data > Metaobjects > click 'Add definition'.

  • Name (required): Theme Swatch

  • Type: theme_swatch

In Field > click 'Add field'. You need to set up with the following:

  • Type: JSON

  • Name (required): Colors

  • Required field: Checked

  • Click 'Add' > click 'Save'. Please follow this video:

2. Add entry and copy color code

Go to Theme Customize > Products > only_config template > open 'Color swatch' section.

  • Click on 'COPY CODE' to use the default colors of the theme.

  • Go to Content > Metaobjects > click 'Add entry' > paste color code in 'Colors' field.

Please follow this video:

3. Add your custom colors

The same step as section 2, you can add more color swatches with your own color/image, then copy and replace the new code in the entry.

Go to Theme Customize > Products > only_config template > open 'Color swatch' section.

  • Enter a color name: you enter the name for your color. This name must be matched with 'option values' in 'product variants'.

  • Choose colors or select an image for the swatch.

  • Click on 'Copy color code' > paste it to 'Configuration' text field in a new line > then click on 'COPY CODE'

21.gif

3.1. Add color swatches

To add a new color swatches, you can follow the video below:

You can set up a swatch with more colors:

31.gif

3.2. Add image swatches

To add a new image swatches, you can follow the video below:

4. Multi-languages

4.1. Color name

If the color style doesn't work in other languages, for example: if your option name is 'Farbe' (in German)

You go to Theme > Edit default theme content > search for 'color' > then fill in your option name.

Follow the image below:

41.gif

4.2. Color value

For example, you translate your color values to German as this image

42.gif

You need to add color values in other languages as well.

Step 1: Go to Theme Customize > Products > only_config template > open 'Color swatch' section > rename all colors in other languages > COPY CODE

Step 2: Go to Metaobject > Theme Swatch > Localize > paste color code for German.

Result: Color swatches work in German too.

54.gif

🎁 Exclusive Deals for The4 Customers

SectionAI

🤖 SectionAI – Build Sections with AI

Generate Shopify sections from text or wireframes.
The4 users get +20,000 bonus tokens when verifying their theme license.

  • ✅ No-code section builder
  • ✅ Works with your The4 theme
  • ✅ Build FAQs, banners, product grids & more
🚀 Try Free – Claim Tokens
EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114).

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.