Generador de Secciones Shopify Liquid desde Mockup o Descripción

{% comment %} Sección: beneficios_producto Descripción: Grid de 3 beneficios clave del producto (icono + eyebrow + título + descripción). Aparece debajo del hero/formulario de compra en páginas de producto. Creada: 2026-06-13 Cliente: VION Nutrition Editable: Sí — todos los textos, iconos, colores y espaciado son editables desde el editor de Shopify {% endcomment %}

{%- style -%} #shopify-section-{{ section.id }} .vbn-wrapper { background-color: {{ section.settings.bg_color }}; padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; }

#shopify-section-{{ section.id }} .vbn-inner { max-width: {{ section.settings.max_width }}px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

#shopify-section-{{ section.id }} .vbn-bloque { padding: 0 40px; position: relative; }

#shopify-section-{{ section.id }} .vbn-bloque:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background-color: {{ section.settings.divider_color }}; }

#shopify-section-{{ section.id }} .vbn-bloque:first-child { padding-left: 0; }

#shopify-section-{{ section.id }} .vbn-bloque:last-child { padding-right: 0; }

#shopify-section-{{ section.id }} .vbn-icono { width: {{ section.settings.icon_size }}px; height: {{ section.settings.icon_size }}px; color: {{ section.settings.icon_color }}; margin-bottom: 16px; display: block; }

#shopify-section-{{ section.id }} .vbn-eyebrow, #shopify-section-{{ section.id }} .vbn-eyebrow p { font-size: {{ section.settings.eyebrow_size }}px; font-weight: {{ section.settings.eyebrow_weight }}; color: {{ section.settings.eyebrow_color }} !important; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px 0; font-family: var(--font-body-family); line-height: 1.3; }

#shopify-section-{{ section.id }} .vbn-titulo, #shopify-section-{{ section.id }} .vbn-titulo p { font-size: {{ section.settings.titulo_size }}px; font-weight: {{ section.settings.titulo_weight }}; color: {{ section.settings.titulo_color }} !important; margin: 0 0 12px 0; font-family: var(--font-heading-family, var(--font-body-family)); line-height: 1.25; }

#shopify-section-{{ section.id }} .vbn-desc, #shopify-section-{{ section.id }} .vbn-desc p { font-size: {{ section.settings.desc_size }}px; font-weight: {{ section.settings.desc_weight }}; color: {{ section.settings.desc_color }} !important; margin: 0; line-height: 1.6; font-family: var(--font-body-family); }

@media (max-width: 768px) { #shopify-section-{{ section.id }} .vbn-inner { grid-template-columns: 1fr; gap: 32px; }

#shopify-section-{{ section.id }} .vbn-bloque {
  padding: 0;
}

#shopify-section-{{ section.id }} .vbn-bloque:not(:last-child)::after {
  display: none;
}

#shopify-section-{{ section.id }} .vbn-bloque:not(:last-child) {
  border-bottom: 1px solid {{ section.settings.divider_color }};
  padding-bottom: 32px;
}

#shopify-section-{{ section.id }} .vbn-eyebrow,
#shopify-section-{{ section.id }} .vbn-eyebrow p {
  font-size: {{ section.settings.eyebrow_size | times: 0.9 | round }}px;
}

#shopify-section-{{ section.id }} .vbn-titulo,
#shopify-section-{{ section.id }} .vbn-titulo p {
  font-size: {{ section.settings.titulo_size | times: 0.8 | round }}px;
}

#shopify-section-{{ section.id }} .vbn-desc,
#shopify-section-{{ section.id }} .vbn-desc p {
  font-size: {{ section.settings.desc_size | times: 0.95 | round }}px;
}

} {%- endstyle -%}

{%- for block in section.blocks -%}

    {%- comment -%} Icono SVG inline — por defecto checkmark en círculo {%- endcomment -%}
    {%- if block.settings.icon_custom != blank -%}
      <span class="vbn-icono">{{ block.settings.icon_custom }}</span>
    {%- else -%}
      <svg class="vbn-icono" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="9 12 11 14 15 10"/>
      </svg>
    {%- endif -%}

    {%- if block.settings.eyebrow != blank -%}
      <div class="vbn-eyebrow">{{ block.settings.eyebrow }}</div>
    {%- endif -%}

    {%- if block.settings.titulo != blank -%}
      <div class="vbn-titulo">{{ block.settings.titulo }}</div>
    {%- endif -%}

    {%- if block.settings.descripcion != blank -%}
      <div class="vbn-desc">{{ block.settings.descripcion }}</div>
    {%- endif -%}

  </div>
{%- endfor -%}

{% schema %} { "name": "Beneficios del Producto", "max_blocks": 3, "settings": [ { "type": "header", "content": "FONDO Y ESPACIADO" }, { "type": "color", "id": "bg_color", "label": "Color de fondo", "default": "#FAFAFA" }, { "type": "color", "id": "divider_color", "label": "Color del separador vertical", "default": "#E0E0E0" }, { "type": "range", "id": "padding_top", "label": "Espaciado superior (px)", "min": 0, "max": 120, "step": 4, "default": 64 }, { "type": "range", "id": "padding_bottom", "label": "Espaciado inferior (px)", "min": 0, "max": 120, "step": 4, "default": 64 }, { "type": "range", "id": "max_width", "label": "Ancho máximo (px)", "min": 800, "max": 1600, "step": 40, "default": 1200 }, { "type": "header", "content": "ICONO" }, { "type": "color", "id": "icon_color", "label": "Color del icono", "default": "#1A1A1A" }, { "type": "range", "id": "icon_size", "label": "Tamaño del icono (px)", "min": 24, "max": 80, "step": 4, "default": 40 }, { "type": "header", "content": "EYEBROW" }, { "type": "range", "id": "eyebrow_size", "label": "Tamaño fuente eyebrow (px)", "min": 10, "max": 18, "step": 1, "default": 11 }, { "type": "select", "id": "eyebrow_weight", "label": "Peso fuente eyebrow", "options": [ { "value": "400", "label": "Normal" }, { "value": "600", "label": "Semibold" }, { "value": "700", "label": "Bold" }, { "value": "800", "label": "Extrabold" } ], "default": "700" }, { "type": "color", "id": "eyebrow_color", "label": "Color eyebrow", "default": "#888888" }, { "type": "header", "content": "TÍTULO" }, { "type": "range", "id": "titulo_size", "label": "Tamaño fuente título (px)", "min": 14, "max": 36, "step": 1, "default": 22 }, { "type": "select", "id": "titulo_weight", "label": "Peso fuente título", "options": [ { "value": "400", "label": "Normal" }, { "value": "600", "label": "Semibold" }, { "value": "700", "label": "Bold" }, { "value": "800", "label": "Extrabold" } ], "default": "700" }, { "type": "color", "id": "titulo_color", "label": "Color título", "default": "#1A1A1A" }, { "type": "header", "content": "DESCRIPCIÓN" }, { "type": "range", "id": "desc_size", "label": "Tamaño fuente descripción (px)", "min": 12, "max": 20, "step": 1, "default": 15 }, { "type": "select", "id": "desc_weight", "label": "Peso fuente descripción", "options": [ { "value": "400", "label": "Normal" }, { "value": "600", "label": "Semibold" }, { "value": "700", "label": "Bold" }, { "value": "800", "label": "Extrabold" } ], "default": "400" }, { "type": "color", "id": "desc_color", "label": "Color descripción", "default": "#555555" } ], "blocks": [ { "type": "beneficio", "name": "Beneficio", "settings": [ { "type": "textarea", "id": "icon_custom", "label": "SVG personalizado (opcional)", "info": "Pega código SVG inline para reemplazar el icono por defecto. Dejar vacío para usar checkmark." }, { "type": "text", "id": "eyebrow", "label": "Eyebrow (texto pequeño superior)", "default": "PUREZA CERTIFICADA" }, { "type": "inline_richtext", "id": "titulo", "label": "Título del beneficio", "default": "Fórmula 100% Limpia" }, { "type": "richtext", "id": "descripcion", "label": "Descripción", "default": "

Sin azúcares añadidos, sin colorantes artificiales. Cada lote analizado por laboratorio independiente.

" } ] } ], "presets": [ { "name": "Beneficios del Producto", "blocks": [ { "type": "beneficio", "settings": { "eyebrow": "PUREZA CERTIFICADA", "titulo": "Fórmula 100% Limpia", "descripcion": "

Sin azúcares añadidos, sin colorantes artificiales. Cada lote analizado por laboratorio independiente.

" } }, { "type": "beneficio", "settings": { "eyebrow": "ABSORCIÓN RÁPIDA", "titulo": "Whey Isolate Premium", "descripcion": "

Proteína aislada con un 90%+ de pureza. Digestión óptima para ventana anabólica post-entreno.

" } }, { "type": "beneficio", "settings": { "eyebrow": "SABOR REAL", "titulo": "Sin Polvo de Sabor Sintético", "descripcion": "

Aromas naturales y edulcorantes suaves para que cada batido sea un placer, no una obligación.

" } } ] } ] } {% endschema %}