Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Custom Color

Annie

Written by Annie

Last updated

1544 views

On this page


This section allows you to customize color for product swatches, menu labels and product custom labels.

Go to the Sections Sidebar > Custom Color and configure it.

color.gif

1. Enable use Custom color

Go to Theme Settings > Custom CSS, JS > ticked on the Use colors custom CSS checkbox. You have to turn on this option to use the Custom Color section.

setting.gif

2. Config Custom color section

Step 1: Add block to Custom color

Custom color has 3 blocks: Swatch color, Label menu color, Label product custom.

Go to Custom Color > Add block > choose the block you want to config.

add block.gif

2.1. Swatch Color:

Config flexible colors like Dark Blue, Pink Clay, etc.. to show on product swatches.

You can configure Color name and background color. Tick on 'Show image' if you want to use Image Swatches.

swatch1.gif

2.2. Label Menu Color:

This option will allow you to customize the Label color of the menu.

You can add the Label name and Background color for this block.

2023-05-12_10-28-02.gif

To add a label for the menu, go to Online Store > Navigation > Open the menu > add the content as this syntax: NameMenu[label_NameLabel].

For example: Women Collection[label_Sale]

2023-05-12_15-26-21.gif

2.3. Label product custom:

You can add Label Product name and background color, text color for the label:

2023-05-12_10-31-13.gif

To create a custom badge for a product, please follow this guideline.

Step 2: Copy CSS Code

After you have done with config the color for blocks at step 1.

Click on the green button 'Copy CSS Code' > go to Edit code > Find a file named Color.CSS > remove the default code of this file > Paste the CSS code that you have copied here.

Please follow the video below:

The last one, you can go back to the product page, reload the page to see the result.

swatch2.gif

3. Multi-languages

The Label name is separated by a comma ; if you want to support multilingual.

Eg: yellow; jaune

2023-05-12_11-26-45.gif

4. More than 200 colors

Since Kalles 2.3.1 and Unsen, Gecko, we provide a child theme called Only Config color, this theme has only one function to allow you to add more custom colors.

So to explain in a way that before the themes had only one custom color section and a maximum of 200 custom colors added, now you can add up to 25 sections and each section can add up to 200 custom colors. That means you can add up to 5000 custom colors, isn't that great?

  • Step 1: To start, please upload this theme to the store and DO NOT PUBLISH it.

Go to 'Only config color' theme > Customize and you will see this theme only have one section: Custom Color.

Click on ADD BLOCK > choose the block you want > fill in the name and background color.

21.gif
  • Step 2: After adding the custom colors, click on Copy CSS Code.

22.gif
  • Step 3: Go to your main theme. Make sure you enabled Custom CSS Color in Theme Settings.

setting.gif
  • Step 4: Still in main theme > Edit Code > open file colors.css > paste the code here > SAVE

This means that after you add 200 Blocks in the Custom Color Section and copy - paste the custom CSS code into the colors.css file and you want to continue adding other colors just repeat this process by adding more new Custom Section Color and continue adding values, then paste the new CSS after the old CSS of the previous Section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

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