> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/color-palette.md).

# Color palette

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Color Palette** section helps customers explore products by color using interactive color pills. Each color pill can represent a product color, finish, or collection and can be linked to a product, collection, or custom page.

This section improves product discovery by allowing customers to quickly browse items based on their preferred colors while creating a clean and visually engaging shopping experience.&#x20;

#### When should I use this?

Use the **Color Palette** section when color plays an important role in your products or shopping experience.

It is ideal for:

* Fashion and apparel stores
* Footwear stores
* Furniture and home décor
* Paint or wallpaper stores
* Beauty and cosmetics
* Accessories and lifestyle products

**Examples**

* Shop by Color
* Explore by Colors
* Find Your Shade

{% hint style="info" %}
**Recommendation Size**\
Color pill image size: 30x30
{% endhint %}

## How to add this section

{% hint style="success" %}
Steps

1. From your Shopify Admin, go to **Online Store → Themes**.
2. Click **Customize** on your published theme.
3. Open the page where you want to display the section.
4. Click **Add section**.
5. Select **Color Palette**.
6. Configure the section settings.
7. Click **Add Color Pills** to create individual color options.
8. Save your changes.
   {% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><p><strong>Text</strong> <br>Displays the title for the Color Palette section. </p><p></p><p>Keep the heading short and descriptive.</p><p></p><p><strong>Position</strong></p><p>Controls where the heading and text are displayed.</p><ul><li>Top — Displays the heading above the color pills.</li><li>Beside — Displays the heading beside the color pills.</li></ul></td></tr><tr><td>Content details</td><td><p><strong>Alignment</strong> </p><p>Controls the horizontal alignment of the heading and text.</p><ul><li>Left</li><li>Center</li></ul><p></p><p><strong>Formatting</strong> </p><p>Controls the text style for the heading.</p><ul><li>Default</li><li>Lowercase</li><li>Capitalize</li><li>Uppercase</li></ul></td></tr><tr><td>Enable separator</td><td>Enable this to show section separator.</td></tr><tr><td>Color scheme</td><td><p>Selects the predefined color combination used for the section. You can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Outer space</td><td><p><strong>Top space</strong> </p><p>Add extra space (in pixels) <strong>above the section</strong> to control its placement on the page. </p><p></p><p><strong>Bottom space</strong> </p><p>Add space <strong>below the section</strong> to create proper spacing between sections.</p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/lTcKNlmwuTkYhz8jEL8E" alt=""><figcaption></figcaption></figure></div>

## Color Pills Block

Each **Color Pills** block represents one clickable color option.

You can add multiple Color Pills to showcase different colors available in your store.

To add color pills to the color palette section, click on the 'Color pills'.&#x20;

There are many options available similar to the color pills, as you can see in the below points and screenshot:

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Color</td><td><p>Choose the <strong>color</strong> you want to display for this pill. </p><p>This is usually shown as a colored circle or block within the section. </p><p>For visual guide show <a href="#color"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Image</td><td><p>Adds an optional image associated with the selected color. </p><p></p><p>This can be a product image, swatch, texture, or promotional image. </p><p>For visual guide show <a href="#image"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Title</td><td><p>Displays the name of the color. </p><p>For visual guide show <a href="#title"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Link</td><td><p>Makes the color pill clickable.</p><p>Customers are redirected to the selected destination when they click the color.</p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/TZYw6y2PFoWQqBNDFFfK" alt=""><figcaption></figcaption></figure></div>

## Block Settings Screenshot

#### Color

<div data-with-frame="true"><figure><img src="/files/tGJwIIxj68edmTCl22Qm" alt=""><figcaption><p><strong>Color</strong></p></figcaption></figure></div>

#### Image

<div data-with-frame="true"><figure><img src="/files/zkCtUWr1hvDMUJfdhb73" alt=""><figcaption><p><strong>Image</strong></p></figcaption></figure></div>

#### Title

<div data-with-frame="true"><figure><img src="/files/yHQTEojQxp5GvaSivg2J" alt=""><figcaption><p><strong>Title</strong></p></figcaption></figure></div>

## Best Practices

* Use color names that match the product colors.
* Keep the number of color pills manageable for easy browsing.
* Link each color to the most relevant product or collection.
* Use consistent spacing and color styles across all pills.
* Choose colors that are visually distinct from one another.
* Use high-quality images if adding image previews.