Realizacja
Zakres projektu
Cel projektu
Projekt dotyczył rozwoju motywu Shopify dla marki meblarskiej z rozbudowanym katalogiem produktów i złożonym procesem konfiguracji na karcie produktu. Kluczowe było zachowanie wygody zakupowej przy produktach, które nie są prostym wariantem koloru lub rozmiaru: mają tkaniny, grupy cenowe, dodatki, zestawy powiązane, galerie zależne od wyboru i treści techniczne wymagające obsługi po stronie zespołu.
Celem było uporządkowanie PDP i danych produktowych tak, żeby sklep mógł rozwijać konfiguratory bez każdorazowego hardkodowania logiki w szablonach.
Co zrobiliśmy
- Rozwijaliśmy architekturę PDP w Shopify Liquid, opartą o merchant-managed metafields i metaobjects.
- Przygotowaliśmy konfigurator produktu obsługujący natywne opcje Shopify, wybór tkaniny, grupy cenowe, add-ony i produkty powiązane.
- Zbudowaliśmy jeden JSON konfiguracyjny dla frontendu, żeby JavaScript nie musiał zgadywać struktury produktu z rozproszonego markup’u.
- Uspójniliśmy galerię produktu i modal zdjęć z aktualnym wyborem konfiguracji, w tym z filtrowaniem mediów po tkaninie lub opcji produktu.
- Dodaliśmy obsługę dodatków w koszyku jako powiązanych pozycji, z grupowaniem konfiguracji, wspólną ilością i czytelnym subtotalem.
- Przygotowaliśmy sekcje PDP zarządzane z theme editor, m.in. informacje produktowe, akordeony i detale tkanin zależne od wybranego materiału.
- Dopasowaliśmy warstwę UI na mobile i desktopie, zachowując istniejące kontrakty danych i logikę konfiguratora.
- Pracowaliśmy też przy integracji opinii, rekomendacji produktowych i mini-slidera produktów uzupełniających sterowanego metafieldem.
Zakres techniczny
W projekcie wykorzystaliśmy Shopify Liquid, JavaScript custom elements, CSS, Shopify metafields, metaobjects, Section Rendering API, line item properties oraz Shopify CLI. Ważną częścią pracy było utrzymanie czytelnego podziału między danymi źródłowymi produktu, konfiguracją w panelu Shopify i logiką frontendu.
Efekt
Motyw stał się bardziej elastyczny dla produktów meblarskich z dużą liczbą opcji i zależności. Zespół sklepu może zarządzać większą częścią danych przez panel Shopify, a kupujący dostaje spójniejszy PDP: aktualizowaną cenę, właściwą galerię, czytelne dodatki i koszyk, który zachowuje kontekst całej konfiguracji zamiast rozbijać ją na niezrozumiałe pozycje.