This feature will add a section divider in one click. Does not want it anymore? Do not worry, just remove the Section using the Theme editor.
Features:
- You can control the space between the sections, therefore, creating a white space. NOTE: You can remove the color so it will just have a white space.
- Change the color of the divider
- Make the divider full width
1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Actions > Edit code.
3. Open Section folder, and click Add a new section. You can name it whatever you want.
4. Open the newly created section and replace the existing code with the code below.
| <div class="{% if section.settings.full_width %} page-width {% endif %} sectionDivider" style="padding-top: {{ section.settings.padding_top | append: 'px' }}; padding-bottom: {{ section.settings.padding_bottom | append: 'px' }}"> <span style="background: {{ section.settings.color }}; height: {{ section.settings.height | append: 'px' }};"> </span> </div> <style> .sectionDivider { width: 100% } .sectionDivider span { width: 100%; display: block; } </style> {% schema %} { "name": "Section divider", "settings": [ { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 1, "unit": "px", "label": "Padding top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 1, "unit": "px", "label": "Padding bottom", "default": 36 }, { "type": "range", "id": "height", "min": 0, "max": 100, "step": 1, "unit": "px", "label": "Height of the divider", "default": 5 }, { "type": "color", "id": "color", "default": "#000", "label": "Divider color" }, { "type": "checkbox", "id": "full_width", "default": false, "label": "Section full-width" } ], "presets": [ { "name": "Section divider" } ] } {% endschema %} |
5. Click SAVE. Now, you should be able to add a Section divider in your theme editor.
That's it (",)