Grilele de produse și de colecții arată fiecare element ca pe un card. Creezi cardul o singură dată în secțiune, iar toate cardurile din acea secțiune îl urmează.
Unde sunt cardurile
- Blocul Product card se află în Featured products, Related products, Search products și Collection products.
- Blocul Collection card se află în Collections și Sub collections.
În the builder, selectează secțiunea, apoi blocul cardului. Fiecare secțiune are propriul card, așa că o modificare afectează doar acea secțiune. Blocul cardului nu poate fi șters, dar părțile lui pot: ascunde sau șterge o parte, ori adaug-o la loc cu Add new block.
Cardul de produs
Pe cardul însuși, Use parent color scheme este pornit implicit. Oprește-l ca să dai cardurilor propria Color scheme. Trage părțile ca să le schimbi ordinea pe card. Părțile sunt:
- Image: Aspect ratio (Auto, Portrait, Square sau Landscape) și Image fit (Cover umple cadrul, Contain arată toată imaginea). Image fit este ascuns cu Auto.
- Title: Preset (stilul textului), Line height, Letter spacing și Max lines (de la 1 la 3, numele mai lungi sunt tăiate cu „...”).
- Price: prețul, cu prețul vechi tăiat la o reducere. Savings arată o insignă ca Percentage, Price (suma economisită) sau None. Apare doar la produsele cu preț redus.
- Rating: stelele și numărul de recenzii. Produsele fără recenzii nu arată stele.
- Buy: butonul și variantele.
Partea Buy
- Action: Checkout le permite cumpărătorilor să cumpere direct din card. Link deschide pagina produsului.
- Label: las-o goală pentru textul implicit: „View product” cu Link, iar cu Checkout „Add to cart” sau „Buy now”, după Checkout method din Setările de checkout.
- Style: culorile de buton Primary sau Secondary.
- Show variants, cu Size și Shape (forma se aplică doar mostrelor de culoare și de imagine): cumpărătorii aleg o opțiune direct pe card. Pe card apare doar primul grup de variante. Variantele nu apar niciodată cu Link.
Un produs la care toate opțiunile sunt epuizate arată, cu Checkout, un buton dezactivat „Out of stock”.
Cardul de colecție
Card style: Standard pune textul sub imagine, Overlay îl pune pe imagine. Ai și Use parent color scheme. Părțile sunt:
- Image: Aspect ratio, Image fit și Overlay opacity (doar cu Overlay; o imagine mai întunecată face textul mai ușor de citit).
- Title: Preset, Line height, Letter spacing, Max lines (1 sau 2) și Alignment.
- Product count: numărul de produse din colecție. Nu are setări: ascunde-l sau șterge-l ca să-l elimini.
- Button: Label (gol folosește un text implicit în limba magazinului), Style și Width (Fit sau Fill). Deschide mereu colecția cardului.
Cardul de colecție își arată mereu părțile în aceeași ordine: imagine, titlu, număr de produse, apoi buton.
Bine de știut
- Colțurile, chenarele și umbrele cardurilor vin din tema ta. Culorile cardurilor vin din schema de culori.
- Nu apare insigna Savings? Produsul are nevoie de un preț redus, vezi Cum setez prețurile produselor, reducerile și prețurile pe piețe?