Add a divider line as a section choice/design asset? Origin theme

Store Design

Topic summary

Topic: Adding a divider line as an insertable section in the Shopify Origin theme.

Key approaches:

  • Use a “Custom Liquid” section (Shopify’s templating block for custom HTML/CSS) and duplicate where needed.
  • Install a free section called “Brandify Divider” that works with any theme by adding a new section in Edit Code and pasting the provided Liquid/CSS/HTML and schema.

Code features:

  • Renders an
    with customizable border width (1–20 px) and color.
  • Optional small-width container (max-width 1200px) via a checkbox.
  • Accessible in the theme editor as a section named “Brandify Divider.”

Latest status:

  • Original requester plans to try the provided solution.
  • A follow-up question asks how to reduce the gap/spacing around the line; guidance on which part to change was not yet provided.

Notes:

  • The code snippet is central to implementing the divider.
  • No final resolution on spacing/margins; discussion remains open on that point.
Summarized with AI on December 21. AI used: gpt-5.
1

Hi -
I’d love to have a divider line as a section option to insert wherever I want/need on my page. Is that a thing? Like “add section” and then in the list there’s a “divider line” . Not to thick or thin so I guess I need to specify pixel height? But a standard divider line is what I’m thinking.
TIA!

2

You can use custom liquid, and duplicate it whenever you want.

3

You can use one of our FREE sections called ‘Brandify-Divider’. It works with any theme!

Here’s how to use it:

  1. Install the code by going to Sales Channel > Online Store > (theme you want to add the code to) > Edit Code.

  2. Open the Sections folder and click "Add a new section".

  3. Name the section "brandify-divider".

  4. Copy and paste this code into the new section and click Save.

    {% style %}
    .sm-width {
    max-width: 1200px;
    margin: auto;
    }
    .border-style {
    border-top: {{ section.settings.border-width}}px solid {{ section.settings.border-color}};
    }
    {% endstyle %}

    {% schema %}
    {
    “name”: “Brandify Divider”,
    “presets”: [
    {
    “name”: “Brandify Divider”
    }
    ],
    “settings”: [
    {
    “type”: “header”,
    “content”: “Settings”
    },
    {
    “type”: “checkbox”,
    “id”: “use-sm-width”,
    “label”: “Use small width”,
    “default”: false
    },
    {
    “type”: “range”,
    “id”: “border-width”,
    “min”: 1,
    “max”: 20,
    “step”: 1,
    “unit”: “px”,
    “label”: “Border width”,
    “default”: 1
    },
    {
    “type”: “color”,
    “id”: “border-color”,
    “label”: “Border color”
    }
    ]
    }
    {% endschema %}

  5. Go back to the visual editor of the theme you just added this code to and search for the "Brandify Divider" section.

  6. Add that section to the page and edit the settings to fit your needs!

1 Like
4

Oh, thank you! Gonna go try now!

5

hello, how would i then make the gap around the line smaller? which section do i change? as the line is ok but the spacing around it is to big??