Jak zbudować niestandardową sekcję Shopify od zera (poradnik krok po kroku)
Shopify Online Store 2.0 zmieniło sposób, w jaki sprzedawcy dostosowują swoje sklepy. Dzięki niestandardowym sekcjom można tworzyć wielokrotnego użytku, elastyczne komponenty, które sprzedawcy mogą dodawać, usuwać i dostosowywać bezpośrednio w Edytorze motywu — bez konieczności edytowania kodu za każdym razem.
Niezależnie od tego, czy tworzysz baner główny, sekcję FAQ, galerię zdjęć, suwak z opiniami, czy prezentację produktów, zrozumienie tworzenia sekcji Shopify jest niezbędną umiejętnością każdego programisty Shopify.
W tym przewodniku przejdziemy przez cały proces tworzenia niestandardowej sekcji Shopify od podstaw przy użyciu Liquid, HTML, CSS, JavaScript i ustawień schematu Shopify.
Dlaczego warto tworzyć niestandardowe sekcje Shopify?
Niestandardowe sekcje oferują wiele zalet:
- Większa elastyczność projektowania
- Lepsza wydajność sklepu w porównaniu z wieloma aplikacjami zewnętrznymi
- Łatwiejsza personalizacja dla sprzedawców
- Komponenty wielokrotnego użytku na wielu stronach
- Poprawa doświadczeń użytkownika i współczynnika konwersji
Dla agencji i programistów Shopify niestandardowe sekcje pomagają również tworzyć unikalne witryny, które wyróżniają się na tle konkurencji.
Zrozumienie sekcji Shopify
Sekcja Shopify to modułowy blok treści, który można dostosować za pomocą Edytora motywu.
Do najpopularniejszych przykładów należą:
- Bannery główne
- Polecane produkty
- Opinie
- FAQ
- Galerie zdjęć
- Sekcje wideo
- Prezentacje kolekcji
- Bannery promocyjne
W Online Store 2.0 sekcje można używać na prawie każdej stronie, co daje większe możliwości personalizacji sklepu niż kiedykolwiek wcześniej.
Krok 1: Utwórz nowy plik sekcji
Przejdź do:
Sklep online → Motywy → Edytuj kod → Sekcje
Utwórz nowy plik o nazwie:
custom-hero.liquid
Plik ten będzie zawierał znacznik, style, ustawienia i funkcjonalność Twojej sekcji.
Krok 2: Zbuduj strukturę sekcji
Dodaj poniższy kod Liquid:
<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">
<span class='notranslate'>{{ section.settings.button_text }}
</a>
</div>
</div>Dzięki temu treść można dynamicznie kontrolować za pomocą Edytora motywu.
Krok 3: Dodaj style
.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;
}Użycie niestandardowego prefiksu, takiego jak ck-, pomaga zapobiegać konfliktom CSS z motywami i aplikacjami.
Krok 4: Utwórz ustawienia Edytora motywu
Dodaj sekcję schematu:
{% schema %}
{
"name": "CK Hero Banner",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Nagłówek"
},
{
"type": "textarea",
"id": "description",
"label": "Opis"
}
],
"presets": [
{
"name": "CK Hero Banner"
}
]
}
{% endschema %}Te ustawienia automatycznie pojawią się w Edytorze motywu Shopify.
Krok 5: Dodaj dynamiczne bloki
Bloki umożliwiają sprzedawcom tworzenie wielu elementów treści bez kodowania.
Przykład:
{% for block in section.blocks %}
<div class="testimonial">
<h3>{{ block.settings.name }}</h3>
<p>{{ block.settings.review }}</p>
</div>
{% endfor %}Idealne do:
- Opinii
- FAQ
- Członków zespołu
- Funkcji
- Galerii zdjęć
Krok 6: Dodaj funkcje interaktywne
Dla suwaków, akordeonów, kart i animacji:
document.addEventListener('DOMContentLoaded', () => {
console.log('Custom section loaded');
});W większych projektach przenieś JavaScript do dedykowanego pliku zasobu.
Najlepsze praktyki tworzenia sekcji Shopify
Utrzymuj sekcje w formie modułów
Buduj każdą sekcję do jednego celu i unikaj łączenia zbyt wielu funkcji w jednym komponencie.
Optymalizuj obrazy
Używaj filtrów obrazów Shopify:
{{ image | image_url: width: 1200 | image_tag }}Zadbaj o responsywność wszystkich elementów
Zawsze testuj na komputerach stacjonarnych, tabletach i urządzeniach mobilnych.
Używaj czytelnych ustawień
Zorganizuj ustawienia w przejrzysty sposób, aby sprzedawcy mogli łatwo personalizować sekcje.
Skup się na wydajności
Ogranicz zbędny JavaScript i zoptymalizuj zasoby, aby przyspieszyć ładowanie.
Podsumowanie
Niestandardowe sekcje Shopify stanowią podstawę nowoczesnego tworzenia motywów Shopify. Opanowanie Liquid, ustawień schematu, responsywnego projektowania i komponentów wielokrotnego użytku pozwala programistom tworzyć niezwykle elastyczne witryny, którymi sprzedawcy mogą łatwo zarządzać.
W CodeKanon tworzymy niestandardowe sekcje Shopify, personalizujemy motywy i tworzymy aplikacje Shopify, które pomagają sprzedawcom budować szybsze, bardziej angażujące i zorientowane na konwersję sklepy.
Potrzebujesz pomocy z programowaniem Shopify? Skontaktuj się z CodeKanon, aby ożywić swój kolejny projekt Shopify.
