Divide each block with a line

LB92
Tourist
5 0 0

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

Screenshot 2024-05-16 alle 23.16.30.png

Replies 10 (10)

Elias
Shopify Staff
2955 289 511

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

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Sandro_J_Monte
Shopify Partner
9 0 5

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

I'm a Shopify obsessed and workaholic for more than 10 consecutive years work as Senior Shopify Developer. Any Advance Theme Customization and Tailored Theme development just contact me. Very low cost charge but high quality and optimized deliverable.
LB92
Tourist
5 0 0

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

Thanks, Lorenzo

Sandro_J_Monte
Shopify Partner
9 0 5

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 %}
 
 
I'm a Shopify obsessed and workaholic for more than 10 consecutive years work as Senior Shopify Developer. Any Advance Theme Customization and Tailored Theme development just contact me. Very low cost charge but high quality and optimized deliverable.
LB92
Tourist
5 0 0

Hello Sandro thanks for the reply.

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

Thanks Lorenzo.

Sandro_J_Monte
Shopify Partner
9 0 5

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

I'm a Shopify obsessed and workaholic for more than 10 consecutive years work as Senior Shopify Developer. Any Advance Theme Customization and Tailored Theme development just contact me. Very low cost charge but high quality and optimized deliverable.
LB92
Tourist
5 0 0

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
Shopify Partner
204 48 57

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

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
LB92
Tourist
5 0 0

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

Please let me know if you have more question.

Best regards, Lorenzo. 

JasmeetVT14313
Shopify Partner
204 48 57

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

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com