Jak zoptymalizować wyświetlanie listy składników kosmetyków za pomocą Shopify Metafields

Wprowadzenie: Znaczenie wyświetlania składników w e-commerce kosmetycznym

W przypadku kosmetyków, informacje o składnikach są kluczowe z punktu widzenia bezpieczeństwa skóry i alergii – konsumenci oczekują ich przejrzystości przed zakupem. W sprzedaży online, gdzie etykiety produktów nie są fizycznie widoczne, sposób prezentacji i dokładność listy składników wpływają bezpośrednio na sprzedaż i wskaźnik powrotów klientów.

1. Regulacje dotyczące etykietowania kosmetyków w głównych krajach

• USA (FDA): Składniki muszą być wymienione na opakowaniu w kolejności malejącej według zawartości. eCFR
• UE: Obowiązkowe jest stosowanie nazw INCI i publikowanie „pełnej listy składników” również w przypadku sprzedaży online, zgodnie z krajowymi wytycznymi.
• Japonia: Obowiązek pełnego wykazu składników zgodnie z przepisami Pharmaceutical and Medical Device Act. Rekomendowane jest podawanie nazw INCI. cosmetic-ingredients.orgbloom-jp.com

2. Czym są Shopify Metafields?

Shopify Metafields to funkcja pozwalająca dodawać niestandardowe dane do zasobów takich jak produkty, kolekcje czy klienci. W sklepie kosmetycznym można dzięki nim przechowywać informacje niedostępne w standardowych polach, np. „lista składników” czy „ostrzeżenia o alergenach”, i dowolnie je wyświetlać w motywie. shopify.devShopify Help Center

3. Przykładowy sposób definiowania Metafield dla listy składników

1. Panel administracyjny Shopify > Ustawienia > Dane niestandardowe > Produkty > „Dodaj definicję”
2. Nazwa: Składniki, Przestrzeń nazw i klucz: custom.ingredients, Typ: Tekst jednowierszowy (Lista wartości)
3. Ustaw ewentualne walidacje (np. limit znaków) i zapisz
4. Przejdź do strony szczegółów produktu i wpisz listę składników w sekcji „Metapola”

4. Wyświetlanie na stronie sklepu

4-A. Korzystanie z bloków specyficznych dla motywu

1. Panel Shopify > Sklep online > Dostosuj > Produkty > Domyślny produkt > Dodaj blok np. „Zwijany wiersz”
2. Nagłówek: Składniki
3. Po prawej stronie „Treść wiersza” kliknij ikonę „Połącz źródło dynamiczne” > Szablon „Produkt” > Składniki
4. Zapisz zmiany

4-B. Korzystanie z niestandardowego bloku Liquid

1. Panel Shopify > Sklep online > Dostosuj > Produkty > Domyślny produkt > Dodaj blok „Niestandardowy Liquid”
2. Wklej poniższy kod

{% if product.metafields.custom.ingredients != blank %}
  <section class="product-ingredients">
    <h2>Składniki</h2>
    <ul>
      {% for ingredient in product.metafields.custom.ingredients.value %}
        <li>{{ ingredient }}</li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

Wskazówki:

• custom.ingredients to Przestrzeń nazw i klucz ustawione podczas definiowania
• W razie potrzeby dostosuj wygląd za pomocą CSS
• Możesz dodać znacznik Schema.org PropertyValueList, by poprawić SEO

5. Najlepsze praktyki UI

• Rozwijana lista: Długie listy składników warto ukryć w akordeonie, by poprawić czytelność strony
• Dostosowanie do urządzeń mobilnych: Zapewnij odpowiednie odstępy i wielkość czcionki dla wygody dotykowej
• Dostępność: Dodaj odpowiednie aria-label i teksty alternatywne dla screen readerów

Podsumowanie

Wykorzystanie Shopify Metafields do wyświetlania składników kosmetyków pozwala zachować zgodność z przepisami i zwiększyć zaufanie użytkowników. Wdrażając powyższe kroki, zoptymalizujesz swój sklep zarówno pod kątem SEO, jak i UX.