Divide each block with a line

[LB92]

Hello i would like to add a line do divide each block/section on all the pages in my shop.

I'll attach a picture to explain better.

Thanks, Lorenzo

[Elias]

Hey, @LB92.

Thank you for reaching out and posting this question.

If you're using a Shopify-supported theme, then adding a divider to your theme may be something that our Theme Support team can help you with. While we're unable to provide account-specific support via the Shopify Community, we'd be happy to assist you with a customization request through live chats. Simply visit the Shopify Help Center and login to your account to create a support request.

That being said, if you're using a third-party theme or the customization request is something that our Theme Support team determines that they're unable to help you with, then you can also consider hiring a developer to assist you with this task. Should you need help finding a developer for your store, then you can take a look at our directory of certified developers on Shopify Partners. 

[Sandro_J_Monte]

You can create a divider snippet template or each of your section template, add a configuration setting that enable border.

[LB92]

Hello Sandro thanks for the reply, do you have a code for do it?

Thanks, Lorenzo

[Sandro_J_Monte]

Try this

<section class="section__separator"><hr style="display: block; border-bottom: {{section.settings.height | append: 'px'}} solid {{section.settings.color}}; margin: 0;margin: {{section.settings.padding | append: 'px' }} 0px!important"></section>
{% schema %}
  {
    "name": "Separator",
    "settings": [
      {
        "type": "range",
        "id": "padding",
        "label": "Padding",
        "default": 0,
        "min": 0,
        "max": 200,
        "step": 10,
        "unit": "px"
      },
		  {
        "type": "range",
        "id": "height",
        "label": "Border height",
        "default": 1,
        "min": 1,
        "max": 10,
        "step": 1,
        "unit": "px"
      },
      {
        "type": "color",
        "id": "color",
        "label": "Border color",
        "default": "#ccc"
      }
    ],
    "presets": [
      {
        "name": "Separator",
        "category": "Text"
      }
    ]
  }
{% endschema %}
 

[LB92]

Hello Sandro thanks for the reply.

May i please ask you in with section should i put it?

Thanks Lorenzo.

[Sandro_J_Monte]

Just create new section template, you can name it any name then paste the code. Open your theme customizer and add this new section 'Separator'  in between of your sections and customize the border color and thickness

[LB92]

Hello i tried to put this code adding black in the id but nothing has changed, can you check please?

<section class="section__separator"><hr style="display: block; border-bottom: {{section.settings.height | append: 'px'}} solid {{section.settings.color}}; margin: 0;margin: {{section.settings.padding | append: 'px' }} 0px!important"></section>
{% schema %}
{
"name": "Separator",
"settings": [
{
"type": "range",
"id": "padding",
"label": "Padding",
"default": 0,
"min": 0,
"max": 200,
"step": 10,
"unit": "px"
},
{
"type": "range",
"id": "height",
"label": "Border height",
"default": 1,
"min": 1,
"max": 10,
"step": 1,
"unit": "px"
},
{
"type": "color",
"id": "black",
"label": "Border color",
"default": "#ccc"
}
],
"presets": [
{
"name": "Separator",
"category": "Text"
}
]
}
{% endschema %}

[JasmeetVT14313]

Hi @LB92 
Can you please share your store URL so that I can provide you with the exact code.

[LB92]

Hello thanks for the reply, https://brigantelondon.myshopify.com/.

Please let me know if you have more question.

Best regards, Lorenzo. 

[JasmeetVT14313]

Hi @LB92 
Your store is password protected. Please share the front-end password