> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomelixir.com/llms.txt
> Use this file to discover all available pages before exploring further.

# A color setting does not change anything

> Why a button or section keeps its old color after you change it, and the two settings that override your choice

You changed a color in the theme editor, saved, and the storefront looks exactly the same. Almost
always one of two settings is overriding you, and neither is obvious from the setting you were
editing.

Work through them in this order. The first is on by default, so it is the usual answer.

## 1. The section is following your brand palette

Most sections carry a checkbox near the top of their color settings, labelled **Use Theme Colors**
or something close to it: **Use theme colors**, **Apply Theme Colors**, **Use Global Theme Colors**.

**It is on by default.** While it is on, the section paints itself from your brand palette and every
individual color picker in that section is ignored, including the ones still visible below it. That
is the trap: the pickers stay on screen and accept your changes, they simply have no effect.

<Steps>
  <Step title="Open the section in the theme editor">
    Click the section whose color will not change.
  </Step>

  <Step title="Find the theme colors checkbox">
    Look at the top of that section's color group.
  </Step>

  <Step title="Turn it off">
    The section's own background, text, accent, and button colors now apply.
  </Step>

  <Step title="Set your colors and save">
    Recheck the live storefront, not only the editor preview.
  </Step>
</Steps>

<Note>
  Leaving it **on** is the better choice when the color you want is already your brand color. Change
  the swatch in **Theme settings → Colors** and every section still following the palette updates at
  once. Turn the checkbox off only for sections that genuinely need to differ. See
  [Set up your brand](/guides/branding).
</Note>

## 2. A button gradient is painting over your button color

If the stubborn element is a **button**, and it renders in a pink or red shade you never chose,
check **Theme settings → Button Styling → Enable Gradient Background**.

When that is on, every button fills with **Gradient Start Color** and **Gradient End Color**
instead of the color set on the section or block. Those two default to `#EF4A65` and `#D63953`, a
pink to red fade, which is why the button often looks orange or pink regardless of what you picked.

<Steps>
  <Step title="Go to Theme settings → Button Styling">
    This is global, not per section, so it explains a button color failing everywhere at once.
  </Step>

  <Step title="Turn off Enable Gradient Background">
    Buttons fall back to the color set on each section or block.
  </Step>

  <Step title="Or keep the gradient and restyle it">
    If you want the gradient, set Gradient Start and End to your own colors rather than turning it
    off.
  </Step>
</Steps>

<Warning>
  This catches the **sticky add to cart** button most often, because it is global and merchants
  usually look for the fix inside the sticky add to cart section rather than in theme settings.
</Warning>

## Still not changing

<AccordionGroup>
  <Accordion title="It changed in the editor preview but not on the live store">
    You are looking at an unpublished theme, or the page is cached. Confirm you edited the published
    theme, then reload the storefront in a private window.
  </Accordion>

  <Accordion title="Only one button out of several is wrong">
    That element has its own color pinned on its block. Select the block itself rather than the
    section around it, and check the color settings on the block.
  </Accordion>

  <Accordion title="The section came from a premade template">
    Sections installed from a template ship with their own colors already set, so they do not follow
    your palette until you set them to your brand colors or turn the theme colors checkbox back on.
    See [Set up your brand](/guides/branding).
  </Accordion>

  <Accordion title="A color changed everywhere except one section">
    That section has the theme colors checkbox off and a pinned color of its own. Turn the checkbox
    on to rejoin the palette, or paste your palette hex into that section.
  </Accordion>

  <Accordion title="There is a border or outline I cannot remove">
    Focus outlines on click come from the browser, not the theme. Those need a small CSS rule, see
    [Custom CSS](/guides/custom-css).
  </Accordion>
</AccordionGroup>

## If it is still not resolved

Raise a ticket with:

* The section or block whose color will not change
* The color you set and the color it renders
* Whether the theme colors checkbox on that section is on or off
* Whether **Enable Gradient Background** is on


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.