luanfernandes-logo

Section and Block Custom CSS Classes in Shopify – A Little Hack

This guide explains how to add a custom CSS classes setting to Shopify theme sections and blocks, allowing merchants to add their own CSS classes through the theme editor.

The example below is for a section but blocks work the same way.

Step 1: Add the Setting to the Section Schema

  1. Open the section file you want to modify (e.g., sections/section.liquid)
  2. Locate the schema "settings": [] array (between {% schema %} and {% endschema %} )
  3. Add the new setting before the presets section:
{
"type": "text",
"id": "custom_css_classes",
"label": "t:settings.custom_css_classes",
"info": "t:info.custom_css_classes"
}

Step 2: Modify the Section Snippet (if needed)

If your section has a {% render 'section', [anything] %} right in the beginning, you have to open that snippet. If there isn’t, this code is in the same file as the schema (the one above).

  1. Open the corresponding snippet file (e.g., snippets/section.liquid)
  2. Find the main div element that has the class attribute
  3. Add the conditional rendering for custom CSS classes:
<div class="{% if section.settings.custom_css_classes != blank %} {{ section.settings.custom_css_classes }}{% endif %}">

If it is a block,

<div class="{% if block.settings.custom_css_classes != blank %} {{ block.settings.custom_css_classes }}{% endif %}">

Step 3: Add Translation Strings

  1. Open the translation file (e.g., locales/en.default.schema.json)
  2. Add the setting label in the “settings” section: 
    "custom_css_classes": "Custom CSS classes"
  3. Add the info text in the “info” section: 
    "custom_css_classes": "Add custom CSS classes separated by spaces"

Implementation Details

The solution works by:

  1. Adding a text input setting in the Shopify theme editor
  2. Conditionally appending the custom classes to the section’s div element only when they’re not blank
  3. Providing clear labeling and instructions for merchants through translation strings

Best Practices

  1. Always use translation keys (t:) for labels and info text
  2. Only add classes when they’re not blank to avoid unnecessary whitespace
  3. Test thoroughly in the theme editor to ensure the setting appears correctly

Troubleshooting

If the setting doesn’t appear:

  1. Check that the JSON syntax is correct in the schema
  2. Verify that the setting is placed in the correct section of the schema
  3. Ensure there are no trailing commas in the JSON

If classes aren’t rendering:

  1. Check that the conditional logic in the snippet is correct
  2. Verify that the setting ID matches between the schema and snippet
  3. Test with simple class names to rule out special character issues