Τα πλέγματα προϊόντων και συλλογών δείχνουν κάθε στοιχείο ως κάρτα. Σχεδιάζετε την κάρτα μία φορά μέσα στο τμήμα και κάθε κάρτα του τμήματος την ακολουθεί.
Πού βρίσκονται οι κάρτες
- Το μπλοκ Product card βρίσκεται στα Featured products, Related products, Search products και Collection products.
- Το μπλοκ Collection card βρίσκεται στα Collections και Sub collections.
Στον builder, επιλέξτε το τμήμα και μετά το μπλοκ της κάρτας. Κάθε τμήμα έχει τη δική του κάρτα, οπότε μια αλλαγή επηρεάζει μόνο αυτό το τμήμα. Το μπλοκ της κάρτας δεν διαγράφεται, αλλά τα μέρη του ναι: κρύψτε ή διαγράψτε ένα μέρος ή προσθέστε το ξανά με το Add new block.
Κάρτα προϊόντος
Στην ίδια την κάρτα, το Use parent color scheme είναι ενεργό από προεπιλογή. Απενεργοποιήστε το για να δώσετε στις κάρτες δικό τους Color scheme. Σύρετε τα μέρη για να αλλάξετε τη σειρά τους στην κάρτα. Τα μέρη της είναι:
- Image: Aspect ratio (Auto, Portrait, Square ή Landscape) και Image fit (το Cover γεμίζει το πλαίσιο, το Contain δείχνει ολόκληρη την εικόνα). Το Image fit κρύβεται με Auto.
- Title: Preset (στυλ κειμένου), Line height, Letter spacing και Max lines (1 έως 3, τα μεγαλύτερα ονόματα κόβονται με "...").
- Price: η τιμή, με την παλιά τιμή διαγραμμένη σε προσφορά. Το Savings δείχνει ένα σήμα ως Percentage, ως Price (το ποσό που εξοικονομείται) ή None. Εμφανίζεται μόνο σε προϊόντα με μειωμένη τιμή.
- Rating: αστέρια και ο αριθμός των κριτικών. Τα προϊόντα χωρίς κριτικές δεν δείχνουν αστέρια.
- Buy: το κουμπί και οι παραλλαγές.
Το μέρος Buy
- Action: το Checkout επιτρέπει στους αγοραστές να αγοράσουν από την κάρτα. Το Link ανοίγει τη σελίδα του προϊόντος.
- Label: αφήστε το κενό για την προεπιλογή: "View product" με Link, και με Checkout "Add to cart" ή "Buy now", ανάλογα με το Checkout method στις Ρυθμίσεις ολοκλήρωσης παραγγελίας.
- Style: χρώματα κουμπιού Primary ή Secondary.
- Show variants, με Size και Shape (το σχήμα ισχύει μόνο για δείγματα χρώματος και εικόνας): οι αγοραστές επιλέγουν μια επιλογή πάνω στην κάρτα. Στην κάρτα εμφανίζεται μόνο η πρώτη ομάδα παραλλαγών. Οι παραλλαγές δεν εμφανίζονται ποτέ με Link.
Ένα προϊόν του οποίου όλες οι επιλογές έχουν εξαντληθεί δείχνει ένα απενεργοποιημένο κουμπί "Out of stock" με Checkout.
Κάρτα συλλογής
Card style: το Standard βάζει το κείμενο κάτω από την εικόνα, το Overlay το βάζει πάνω στην εικόνα. Έχετε επίσης το Use parent color scheme. Τα μέρη είναι:
- Image: Aspect ratio, Image fit και Overlay opacity (μόνο με Overlay, μια πιο σκοτεινή εικόνα κάνει το κείμενο πιο ευανάγνωστο).
- Title: Preset, Line height, Letter spacing, Max lines (1 ή 2) και Alignment.
- Product count: ο αριθμός των προϊόντων στη συλλογή. Δεν έχει ρυθμίσεις: κρύψτε το ή διαγράψτε το για να το αφαιρέσετε.
- Button: Label (κενό σημαίνει μια προεπιλεγμένη ετικέτα στη γλώσσα του καταστήματός σας), Style και Width (Fit ή Fill). Ανοίγει πάντα τη συλλογή της κάρτας.
Η κάρτα συλλογής δείχνει πάντα τα μέρη της με την ίδια σειρά: εικόνα, τίτλος, πλήθος προϊόντων και μετά κουμπί.
Καλό να ξέρετε
- Οι γωνίες, τα περιγράμματα και οι σκιές των καρτών προέρχονται από το θέμα σας. Τα χρώματα των καρτών προέρχονται από το χρωματικό σχήμα.
- Δεν υπάρχει σήμα Savings; Το προϊόν χρειάζεται μειωμένη τιμή, δείτε το Πώς ορίζω τιμές προϊόντων, εκπτώσεις και τιμές ανά αγορά;