🔥 How to Add Custom Color Schemes to Your Shopify Sections

 

 

Want each Shopify section to have its own background, text, and accent colors—without editing theme CSS or duplicating styles? This tutorial shows you how to add custom color pickers, generate CSS variables, and optionally add color presets your clients can select from. You’ll learn how to:

• Add color pickers inside a Shopify section
• Generate CSS variables for live theme-editor previews
• Create optional light/dark/accent presets
• Allow block-level color overrides

---

📌 Step 1 — Create the Section File

Create a new file inside:

sections/custom-color-schemes.liquid

Then paste the full code below.

---

📌 Step 2 — Full Section Code (Copy & Paste)

{% comment %}
sections/custom-color-schemes.liquid
A reusable section with customizable color scheme controls.
{% endcomment %}

<section
  id="section-{{ section.id }}"
  class="custom-color-section"
  style="
    --cc-bg: {{ section.settings.bg_color | default: '#ffffff' }};
    --cc-text: {{ section.settings.text_color | default: '#1f2937' }};
    --cc-heading: {{ section.settings.heading_color | default: '#111827' }};
    --cc-accent: {{ section.settings.accent_color | default: '#0ea5a4' }};
  "
>
  <div class="custom-color-section__inner page-width">

    <h2 class="custom-color-section__title">
      {{ section.settings.title }}
    </h2>

    {% if section.settings.description != blank %}
      <p class="custom-color-section__desc">{{ section.settings.description }}</p>
    {% endif %}

    <div class="custom-color-section__grid">
      {% for block in section.blocks %}
        <article class="cc-card"
          style="
            --card-bg: {{ block.settings.block_bg | default: 'transparent' }};
            --card-text: {{ block.settings.block_text_color | default: 'var(--cc-text)' }};
          "
        >
          {% if block.settings.image != blank %}
            <img src="{{ block.settings.image | img_url: '600x' }}" alt="{{ block.settings.image_alt }}" />
          {% endif %}
          <h3>{{ block.settings.heading }}</h3>
          <p>{{ block.settings.content }}</p>
        </article>
      {% endfor %}
    </div>

  </div>
</section>

<style>
#section-{{ section.id }} {
  background: var(--cc-bg);
  color: var(--cc-text);
  padding: 48px 0;
}

#section-{{ section.id }} .custom-color-section__title {
  color: var(--cc-heading);
}

#section-{{ section.id }} .cc-card {
  background: var(--card-bg);
  color: var(--card-text);
  padding: 16px;
  border-radius: 10px;
}
</style>

{% schema %}
{
  "name": "Custom Color Schemes",
  "settings": [
    { "type": "text", "id": "title", "label": "Title", "default": "Your section title" },
    { "type": "textarea", "id": "description", "label": "Description" },

    { "type": "color", "id": "bg_color", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#1f2937" },
    { "type": "color", "id": "heading_color", "label": "Heading Color", "default": "#111827" },
    { "type": "color", "id": "accent_color", "label": "Accent Color", "default": "#0ea5a4" }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Card",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "heading", "label": "Heading" },
        { "type": "textarea", "id": "content", "label": "Content" },

        { "type": "color", "id": "block_bg", "label": "Card Background" },
        { "type": "color", "id": "block_text_color", "label": "Card Text Color" }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [
    { "name": "Custom Color Schemes" }
  ]
}
{% endschema %}

---

📌 Step 3 — How This Works

✔ 1. Color Pickers in Theme Editor

The schema adds color pickers for:

• Background
• Text
• Heading
• Accent

✔ 2. Inline CSS Variables

We inject the values directly into the section element:

style="--cc-bg: {{ section.settings.bg_color }};"

This makes colors update LIVE in the theme editor.

✔ 3. Scoped Styles

All CSS is scoped to this section instance:

#section-{{ section.id }} { background: var(--cc-bg); }

This prevents color collisions when using the section multiple times.

---

📌 Step 4 — Optional Feature Ideas

• Add preset color schemes (Light, Dark, Accent)
• Add overlay color + opacity
• Read global theme colors instead of custom pickers
• Let blocks override card colors

---

🎉 You're Done!

You now have a fully customizable, color-controlled section using clean CSS variables and theme editor settings.

If you want, I can also convert this into:

• A reusable snippet you can include in all sections
• A version that uses theme global colors
• A version with advanced presets
• A complete Shopify tutorial pack with multiple articles

Just tell me! 👇