Shopify Theme Customization - Jak edytować sekcje za pomocą Liquid?

Domyślna sekcja nie spełnia Twoich potrzeb? Musisz dodać custom logikę? Liquid to Twoja broń.

Shopify Theme Horizon to najbardziej zaawansowany theme. Pełny potencjał odkryjesz pisząc Custom Liquid.

Czym jest Liquid?

Liquid to template language Shopify. Pozwala na:

• Dostęp do danych produktów, klientów, zamówień
• Logika warunkowa (if/else, loops)
• Filtry (uppercase, date formatting)
• Custom HTML + logika w jednym miejscu

Custom Hero Section

Stwórz sections/custom-hero.liquid:

<style>
  .hero {
    background: linear-gradient(135deg, {{ section.settings.color_primary }} 0%, {{ section.settings.color_secondary }} 100%);
    height: {{ section.settings.height }}px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-content {
    text-align: center;
    color: white;
  }

  .button {
    padding: 12px 32px;
    background: white;
    color: {{ section.settings.color_primary }};
  }
</style>

<section class="hero">
  <div class="hero-content">
    <h1>{{ section.settings.title }}</h1>
    <p>{{ section.settings.subtitle }}</p>

    {% if section.settings.show_button %}
      <a href="{{ section.settings.button_link }}" class="button">
        {{ section.settings.button_text }}
      </a>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Custom Hero",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Tytuł",
      "default": "Witaj"
    },
    {
      "type": "textarea",
      "id": "subtitle",
      "label": "Podtytuł"
    },
    {
      "type": "color",
      "id": "color_primary",
      "label": "Kolor główny",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "color_secondary",
      "label": "Kolor drugorzędny",
      "default": "#00D9FF"
    },
    {
      "type": "range",
      "id": "height",
      "label": "Wysokość (px)",
      "min": 300,
      "max": 800,
      "default": 500
    },
    {
      "type": "checkbox",
      "id": "show_button",
      "label": "Pokaż CTA",
      "default": true
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Tekst przycisku",
      "default": "Kupuj teraz"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Link"
    }
  ],
  "presets": [{"name": "Custom Hero"}]
}
{% endschema %}

Product Card z logiką

Stwórz snippets/product-card.liquid:

<div class="product-card">
  <div class="product-image">
    {% if product.featured_image %}
      <img src="{{ product.featured_image | img_url: '400x400' }}" alt="{{ product.title }}">
    {% endif %}

    {% if product.compare_at_price > product.price %}
      <span class="badge">
        {% assign discount = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price %}
        -{{ discount | ceil }}%
      </span>
    {% endif %}
  </div>

  <h3>{{ product.title }}</h3>

  <div class="price">
    {% if product.compare_at_price > product.price %}
      <span class="original">{{ product.compare_at_price | money }}</span>
      <span class="sale">{{ product.price | money }}</span>
    {% else %}
      {{ product.price | money }}
    {% endif %}
  </div>

  {% if product.available %}
    <span class="in-stock">✓ W magazynie</span>
  {% else %}
    <span class="out-of-stock">Niedostępny</span>
  {% endif %}

  <a href="{{ product.url }}" class="button">Zobacz</a>
</div>

Dostęp do danych w Liquid

{{ product.title }}                    # Nazwa
{{ product.price | money }}             # Cena
{{ product.compare_at_price }}          # Oryginalna
{{ product.available }}                 # true/false
{{ product.featured_image | img_url: '400x400' }}
{{ product.variants.first.sku }}        # SKU

{{ collection.products_count }}         # Liczba produktów
{{ collection.filters }}                # Filtry

{{ customer.email }}                    # Email
{{ customer.orders_count }}             # Zamówienia
{{ customer.total_spent | money }}      # Suma

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

{% if product.available %}
  Dostępny
{% else %}
  Niedostępny
{% endif %}

{{ "now" | date: "%Y-%m-%d" }}          # Data

Podsumowanie

Custom Liquid pozwala na pełną personalizację Theme Horizon bez dotykania domyślnych sekcji. Schemat JSON automatycznie tworzy interfejs w Theme Editorze.

W Netova pracujemy z Custom Liquid codziennie - tworzymy dynamiczne sekcje, custom filtry, personalizowane doświadczenia dla każdego klienta.

Zbudujemy Ci custom sklep Shopify