Så här skapar du en anpassad Shopify-sektion från grunden (steg-för-steg-guide)

Shopifys Online Store 2.0 har förändrat hur butiksägare anpassar sina butiker. Med anpassade sektioner kan du skapa återanvändbara, flexibla komponenter som butiksägare kan lägga till, ta bort och anpassa direkt i Theme Editor – utan att behöva redigera kod varje gång.

Oavsett om du bygger en hero-banner, en FAQ-sektion, ett bildgalleri, en karusell med omdömen eller en produktpresentation är förståelse för utveckling av Shopify-sektioner en viktig färdighet för alla Shopify-utvecklare.

I den här guiden går vi igenom hela processen för att bygga en anpassad Shopify-sektion från grunden med Liquid, HTML, CSS, JavaScript och Shopifys schema-inställningar.

Varför bygga anpassade Shopify-sektioner?

Anpassade sektioner erbjuder flera fördelar:

• Större designflexibilitet
• Bättre butiksprestanda jämfört med många tredjepartsappar
• Enklare anpassning för butiksägare
• Återanvändbara komponenter på flera sidor
• Förbättrad användarupplevelse och konverteringsgrad

För Shopify-byråer och utvecklare hjälper anpassade sektioner också till att skapa unika butikssidor som sticker ut från konkurrenterna.

Förståelse för Shopify-sektioner

En Shopify-sektion är en modulär innehållsblock som kan anpassas via Theme Editor.

Vanliga exempel inkluderar:

• Hero-banners
• Utvalda produkter
• Omdömen
• FAQ
• Bildgallerier
• Videosektioner
• Kollektionspresentationer
• Kampanjbanners

Med Online Store 2.0 kan sektioner användas på nästan varje sida, vilket gör butiksanpassningen kraftfullare än någonsin.

Steg 1: Skapa en ny sektionsfil

Gå till:

Online Store → Themes → Edit Code → Sections

Skapa en ny fil med namnet:

custom-hero.liquid

Den här filen kommer att innehålla markup, styling, inställningar och funktionalitet för din sektion.

Steg 2: Bygg sektionens markup

Lägg till följande Liquid-kod:

<div class="ck-hero">
  <div class="ck-container">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.description }}</p>

    <a href="{{ section.settings.button_link }}" class="ck-button">
      {{ section.settings.button_text }}
    </a>
  </div>
</div>

Detta gör att innehållet kan styras dynamiskt via Theme Editor.

Steg 3: Lägg till styling

.ck-hero {
  padding: 100px 20px;
  text-align: center;
}

.ck-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.ck-button {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
}

Att använda ett anpassat prefix som ck- hjälper till att förhindra CSS-konflikter med teman och appar.

Steg 4: Skapa inställningar för Theme Editor

Lägg till schema-sektionen:

{% schema %}
{
  "name": "CK Hero Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Rubrik"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Beskrivning"
    }
  ],
  "presets": [
    {
      "name": "CK Hero Banner"
    }
  ]
}
{% endschema %}

Dessa inställningar visas automatiskt i Shopifys Theme Editor.

Steg 5: Lägg till dynamiska block

Block gör det möjligt för butiksägare att skapa flera innehållsobjekt utan att behöva koda.

Exempel:

{% for block in section.blocks %}
  <div class="testimonial">
    <h3>{{ block.settings.name }}</h3>
    <p>{{ block.settings.review }}</p>
  </div>
{% endfor %}

Perfekt för:

• Omdömen
• FAQ
• Teammedlemmar
• Funktioner
• Bildgallerier

Steg 6: Lägg till interaktiva funktioner

För karuseller, dragspel, flikar och animationer:

document.addEventListener('DOMContentLoaded', () => {
  console.log('Anpassad sektion laddad');
});

För större projekt, flytta JavaScriptet till en separat asset-fil.

Bästa praxis för utveckling av Shopify-sektioner

Håll sektionerna modulära

Bygg varje sektion för ett enda syfte och undvik att kombinera för många funktioner i en och samma komponent.

Optimera bilder

Använd Shopifys bildfilter:

{{ image | image_url: width: 1200 | image_tag }}

Gör allt responsivt

Testa alltid på stationära datorer, surfplattor och mobila enheter.

Använd tydliga inställningar

Organisera inställningarna tydligt så att butiksägare enkelt kan anpassa sektionerna.

Fokusera på prestanda

Minimera onödigt JavaScript och optimera assets för snabbare laddning.

Avslutande tankar

Anpassade Shopify-sektioner är grunden för modern Shopify-temautveckling. Genom att bemästra Liquid, schema-inställningar, responsiv design och återanvändbara komponenter kan utvecklare skapa mycket flexibla butiksupplevelser som butiksägare enkelt kan hantera.

På CodeKanon bygger vi anpassade Shopify-sektioner, anpassningar av teman och Shopify-appar som hjälper butiksägare att skapa snabbare, mer engagerande och konverteringsfokuserade butiker.

Behöver du hjälp med Shopify-utveckling? Kontakta CodeKanon för att förverkliga ditt nästa Shopify-projekt.