Een aangepaste sectie toevoegen aan Shopify

Wat je nodig hebt

• Een Shopify-winkel en toestemming om het thema te bewerken (winkeleigenaar, of medewerker met toegang tot Thema's).
• De code van de sectie – één .liquid-bestand dat eindigt met een {% schema %}-tag. Schrijf hem zelf, genereer hem met Klorr of neem er een van de marktplaats.
• Een Online Store 2.0-thema, als je de sectie ook op andere pagina's dan de homepage wilt.

1. Dupliceer eerst je thema

   Ga in je Shopify-beheercentrum naar Webwinkel → Thema's. Open naast je huidige thema het …-menu en kies Dupliceren. Werk in de kopie, zodat je live winkel onaangeroerd blijft tot je tevreden bent.

2. Open de code-editor

   Open bij de kopie opnieuw het …-menu en kies Code bewerken. De mappen van het thema – layout, sections, snippets, assets en de rest – staan links.

3. Maak het sectiebestand aan

   Kies in de sections-map Een nieuwe sectie toevoegen (in de nieuwere editor de + naast de map, daarna Nieuw bestand). Noem het naar wat het doet, bijvoorbeeld countdown-banner. Shopify maakt sections/countdown-banner.liquid aan met wat voorbeeldcode.

4. Plak je code en sla op

   Selecteer alles in het nieuwe bestand, vervang het door de code van je sectie – inclusief het {% schema %}-blok aan het eind – en klik op Opslaan. Toont Shopify een foutmelding, dan vind je de oplossingen hieronder.

5. Voeg hem toe in de thema-editor

   Ga terug naar Thema's en klik bij de kopie op Aanpassen. Open de pagina die je wilt – homepage, een product, een collectie – en klik in de linkerzijbalk op Sectie toevoegen. Je sectie staat erbij onder de naam uit het schema.

6. Stel hem in en publiceer

   Vul de instellingen van de sectie in – tekst, afbeeldingen, kleuren – sleep hem op zijn plek en klik op Opslaan. Ziet de preview er goed uit, publiceer de kopie dan via Publiceren op de pagina Thema's.

Een complete sectie om te proberen

Plak dit in een nieuw sectiebestand om het hele proces te zien werken. Een kop, een regel tekst en een knop, elk te bewerken in de thema-editor.

<div class="promo-{{ section.id }}">
  <h2>{{ section.settings.heading | escape }}</h2>
  <p>{{ section.settings.text | escape }}</p>
  {% if section.settings.button_label != blank %}
    <a href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
  {% endif %}
</div>

{% style %}
  .promo-{{ section.id }} {
    padding: 48px 20px;
    text-align: center;
    background: {{ section.settings.background }};
  }
{% endstyle %}

{% schema %}
{
  "name": "Promo banner",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping this week" },
    { "type": "text", "id": "text", "label": "Text", "default": "On every order over $50." },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "color", "id": "background", "label": "Background", "default": "#f1ecfb" }
  ],
  "presets": [{ "name": "Promo banner" }]
}
{% endschema %}

Schemagenerator →

Waarom een sectie toevoegen zonder app

• Geen maandelijkse kosten – de sectie hoort bij je thema, het is geen abonnement.
• Er laadt niets extra's – het script van een app kan op elke pagina draaien; de code van een sectie draait alleen waar de sectie staat.
• Hij blijft als apps verdwijnen – een app verwijderen kan gaten achterlaten in de pagina's die hij bouwde. Een sectiebestand blijft staan tot jij het verwijdert.

Gerelateerd