Jednym z największych błędów podczas tworzenia sklepu Shopify jest budowanie sztywnych sekcji. Klient po kilku tygodniach chce zmienić układ, dodać nowy element lub przebudować stronę główną i okazuje się, że potrzebuje programisty.

Nowoczesne motywy Shopify rozwiązują ten problem dzięki Theme Blocks.

To właśnie one sprawiają, że klient może samodzielnie zarządzać zawartością sklepu bez znajomości kodu.

Czym są Theme Blocks?

Block to pojedynczy element znajdujący się wewnątrz sekcji.

Przykładowo sekcja Hero może zawierać:

nagłówek
tekst
przycisk
obraz
licznik
badge promocyjny

Każdy z tych elementów może być osobnym Blockiem.

Dzięki temu klient sam decyduje:

które elementy wyświetlać
w jakiej kolejności
jakie treści wprowadzić

Tworzenie sekcji z Blockami

Przykładowa sekcja:

<section class="features">

  {% for block in section.blocks %}

    {% case block.type %}

      {% when 'feature' %}

      <div class="feature-card">
        <h3>{{ block.settings.title }}</h3>
        <p>{{ block.settings.description }}</p>
      </div>

    {% endcase %}

  {% endfor %}

</section>

Pętla przechodzi przez wszystkie dodane przez klienta bloki.

Definicja Blocków w Schema

{% schema %}
{
  "name": "Features",
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Tytuł"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Opis"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Features"
    }
  ]
}
{% endschema %}

Po zapisaniu sekcja automatycznie pojawi się w Theme Editorze.

Dynamiczna kolejność elementów

Największą zaletą Blocków jest możliwość przeciągania elementów.

Klient może:

zmieniać kolejność sekcji
dodawać nowe karty
usuwać niepotrzebne elementy

Bez kontaktowania się z programistą.

Ikony w Blockach

Możemy dodać również obrazki:

{% if block.settings.icon %}
  <img
    src="{{ block.settings.icon | image_url }}"
    alt="{{ block.settings.title }}"
  >
{% endif %}

Schema:

{
  "type": "image_picker",
  "id": "icon",
  "label": "Ikona"
}

Dzięki temu klient sam wgrywa grafiki.

Zaawansowane Bloki

Możemy tworzyć wiele typów blocków w jednej sekcji.

{% for block in section.blocks %}

  {% case block.type %}

    {% when 'heading' %}
      <h2>{{ block.settings.text }}</h2>

    {% when 'text' %}
      <p>{{ block.settings.text }}</p>

    {% when 'button' %}
      <a href="{{ block.settings.link }}">
        {{ block.settings.label }}
      </a>

  {% endcase %}

{% endfor %}

Tak działa większość nowoczesnych sekcji Shopify.

Limity Blocków

Możesz określić maksymalną liczbę elementów:

{
  "max_blocks": 8
}

To dobre rozwiązanie gdy projekt wymaga zachowania konkretnego układu.

Najczęstsze zastosowania

Theme Blocks świetnie sprawdzają się dla:

sekcji zalet
FAQ
opinii klientów
logo partnerów
galerii zdjęć
kroków procesu zakupowego
statystyk firmy
porównania produktów
sekcji usług

Praktycznie każda nowoczesna sekcja Shopify powinna korzystać z Blocków.

Dlaczego Theme Blocks są tak ważne?

Dobry sklep Shopify powinien być łatwy w obsłudze nie tylko dla klientów, ale również dla właściciela sklepu.

Im więcej elementów można edytować z poziomu Theme Editora, tym mniej pracy w przyszłości i mniej zgłoszeń o drobne zmiany.

Zamiast pisać kod za każdym razem, klient sam zarządza zawartością sklepu.

To właśnie dlatego w Netova większość sekcji budujemy jako modułowe komponenty oparte o Theme Blocks.

Theme Blocks a Theme Horizon

Theme Horizon został zaprojektowany właśnie pod modułową architekturę.

Sekcje oparte na Blockach:

łatwo rozbudowywać
łatwo utrzymywać
dobrze współpracują z Theme Editorem
nie wymagają ingerencji programisty przy każdej zmianie

Dzięki temu sklep może rozwijać się razem z biznesem.

Podsumowanie

Theme Blocks to fundament nowoczesnego Shopify Theme Development. Pozwalają tworzyć elastyczne sekcje, które klient może dowolnie rozbudowywać bez znajomości Liquid.

Jeżeli tworzysz własny motyw Shopify, nauka Blocków powinna być jednym z pierwszych kroków po opanowaniu podstaw Liquid.

W Netova wykorzystujemy Theme Blocks do budowy skalowalnych sklepów Shopify, które klient może rozwijać samodzielnie bez każdorazowego angażowania programisty.

Potrzebujesz dedykowanego sklepu Shopify?

Shopify Theme Blocks - Jak budować elastyczne sekcje dla klientów?