How to Style Shopify Sections Using CSS Variables

How to Style Shopify Sections Using CSS Variables

CSS Variables (also called custom properties) are one of the most powerful modern CSS features. They allow you to define reusable values—like colors, spacing, shadows, fonts—and update them in one place.

In Shopify, CSS Variables become even more powerful because you can connect them to your Theme Editor settings. This lets merchants customize styles visually without editing code.

✨ What You’ll Learn

  • How CSS variables work in Shopify themes
  • How to connect variables to Theme Editor settings
  • How to use variables inside Liquid sections
  • How to override variables at section or block level

🧱 Step 1 — Create Your CSS Variables in base.css

Open your theme and edit:

assets/base.css

Add a root variable group:

:root {
  --primary-color: #4a6cf7;
  --secondary-color: #f2f2f7;
  --heading-font-size: 2rem;
  --section-padding: 50px;
}

This sets the default values used across your entire theme.

🧱 Step 2 — Use CSS Variables in Your Styles

Now you can reference variables anywhere in your CSS:

.custom-section {
  background: var(--secondary-color);
  padding: var(--section-padding);
}

.custom-section h2 {
  color: var(--primary-color);
  font-size: var(--heading-font-size);
}

Already your theme becomes much easier to maintain.

🧱 Step 3 — Add Theme Editor Controls (Schema)

Now let’s connect our CSS variables to Theme Editor settings.

Edit a section file, for example:

sections/custom-section.liquid

Add schema settings:

{
  "name": "Custom Styled Section",
  "settings": [
    {
      "type": "color",
      "id": "primary_color",
      "label": "Primary Color",
      "default": "#4a6cf7"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f2f2f7"
    },
    {
      "type": "range",
      "id": "section_padding",
      "label": "Section Padding (px)",
      "min": 20,
      "max": 120,
      "default": 50
    }
  ]
}

🧱 Step 4 — Output CSS Variables Inline Inside the Section

Inside the same section file, wrap the HTML with an inline variable block.

<div class="custom-section" 
     style="
        --primary-color: {{ section.settings.primary_color }};
        --secondary-color: {{ section.settings.background_color }};
        --section-padding: {{ section.settings.section_padding }}px;
     ">

  <h2>{{ section.settings.heading | default: "Styled Section" }}</h2>

</div>

This overrides the global variables but only for this section.

🧩 Step 5 — Use Variables in the CSS

Back in base.css, style the section using the same variable names:

.custom-section {
  background: var(--secondary-color);
  padding: var(--section-padding);
}

.custom-section h2 {
  color: var(--primary-color);
}

This lets merchants visually customize the section without editing code.

🧠 Bonus — Block-Level CSS Variables

You can even override variables per block:

<div class="feature-block"
     style="--primary-color: {{ block.settings.accent_color }};">
  </div>

Use this when building flexible grid systems or feature cards.

🚀 Final Result

After completing this tutorial, you now have:

  • Global theme styling powered by CSS variables
  • Theme Editor controls mapped directly to CSS
  • Section-level and block-level overrides
  • A fully customizable styling system

This is exactly how modern Shopify 2.0 themes create flexible, brand-consistent UI styles.

 

Back to blog

Leave a comment