Divisor de seção com opções

Custom Shopify section divider with color and padding options

Compatibilidade: todos os temas do Shopify

Este recurso adicionará um divisor de seção com um clique. Não quer mais? Não se preocupe, basta remover a Seção usando o editor de temas.

Características:

  • Você pode controlar o espaço entre as seções, criando assim um espaço em branco. NOTA: Você pode remover a cor para que fique apenas um espaço em branco.
  • Alterar a cor da divisória
  • Faça a divisória em largura total

1. Na sua página Admin, vá para Loja online > Temas
2. Escolha o tema que deseja editar e clique em Ações > Editar código.
3. Abra a pasta Seção e clique em Adicionar uma nova seção. Você pode nomeá-lo como quiser.
4. Abra a seção recém-criada e substitua o código existente pelo código abaixo.

<div class=" {% if section.settings.full_width %} largura da página {% endif %} sectionDivider" style="padding-top: {{ section.settings.padding_top | append: 'px' }} ; padding- parte inferior: {{ section.settings.padding_bottom | append: 'px' }} ">
<span style="background: {{ section.settings.color }} ; altura: {{ section.settings.height | append: 'px' }} ;">&nbsp</span>
</div>
<estilo>
.seçãoDivider {
largura: 100%
}

.seçãoDivider span {
largura: 100%;
exibição: bloco;
}
</estilo>

{% schema %}
{
"name": "Divisor de seção",
"configurações": [
{
"tipo": "intervalo",
"id": "padding_top",
"min": 0,
"máximo": 100,
"passo 1,
"unidade": "px",
"label": "Preenchimento superior",
"padrão": 36
},
{
"tipo": "intervalo",
"id": "padding_bottom",
"min": 0,
"máximo": 100,
"passo 1,
"unidade": "px",
"label": "Preenchimento inferior",
"padrão": 36
},
{
"tipo": "intervalo",
"id": "altura",
"min": 0,
"máximo": 100,
"passo 1,
"unidade": "px",
"label": "Altura da divisória",
"padrão": 5
},
{
"tipo": "cor",
"id": "cor",
"padrão": "#000",
"label": "Cor do divisor"
},
{
"tipo": "caixa de seleção",
"id": "largura_completa",
"padrão": falso,
"label": "Seção em largura total"
}
],
"predefinições": [
{
"nome": "Divisor de seção"
}
]
}
{% endschema %}

5. Clique em SALVAR. Agora, você poderá adicionar um divisor de seção em seu editor de tema.

É isso (",)

2 comentários

Hi @Gina,

You can change the code .sectionDivider width to below
.sectionDivider {
width: 80%
}

Made4Uo •

Thank you so much for the code for the section divider. I only want it to be around 80% width and centralised on the page, how can I do this?

Gina •

Deixe um comentário