The product card is the box that shows a product on the home page, category pages and search results. You set it up in three groups: «بطاقة المنتج» (product card), «خيارات بطاقة المنتج» (product card options) and «الخصم الكبير» (big discount).
#«بطاقة المنتج» (product card)
#Colors and shape
| Setting | Default | What it does |
|---|---|---|
| «تثبيت المظهر الداكن في بطاقة المنتج» | Off | The card is always dark. |
| «لون خلفية بطاقة المنتج» | #ffffff | The card's background color. |
| «لون إطار بطاقة المنتج» | #004956 | The card's border color. |
| «لون خلفية العنوان الترويجي» | #f87e7e | The background of the product's promotional title on the card. |
| «مقاس (طول) صورة بطاقة المنتج» | 9 | The height of the product image, from 0 to 20. The panel recommends 9 for square images and 16 for tall ones. |
| «شكل زوايا بطاقة المنتج وزر الإضافة» | «منحنية 3» (curve 3) | From «بدون إنحناء» (no curve) to «منحنية 5» (curve 5). |
| «أيقونة زر أضف للسلة» | «أيقونة بلس» (plus) | A plus icon, a cart icon, or one of three bag icons. |
| «إخفاء إطار بطاقة المنتج» | Off | Hides the card border. |
| «إخفاء خلفية بطاقة المنتج» | Off | Removes the card background. |
| «إظهار تأثير لامع عند التأشير بطاقة المنتج» | On | A shine that passes over the card when the pointer hovers over it. |
#Text and buttons
| Setting | Default | What it does |
|---|---|---|
| «عنوان المنتج بخط عريض» | On | The product name in bold. |
| «عنوان المنتج في سطر واحد» | On | Shows the product name on one line. |
| «توسيط النصوص في بطاقة المنتج» | Off | Centers the text inside the card. |
| «زر أضف للسلة بدون خلفية» | On | The add-to-cart button with an outline and no fill. |
| «إخفاء زر أضف للسلة» | Off | Hides the add-to-cart button on the card. |
| «إخفاء زر نفدت الكمية» | On | Hides the button on out-of-stock products and puts an «نفدت الكمية» (out of stock) label on the card. |
| «إخفاء زر أضف للأمنيات» | Off | Hides the wishlist button. |
| «تفعيل ميزة العرض السريع لتفاصيل المنتج» | On | A button that opens the product details in a window without leaving the page. |
| «عرض أيقونة الأمنيات والعرض السريع تحت صورة المنتج» | Off | Moves those two buttons from over the image to under it. |
#What the card shows
| Setting | Default | What it does |
|---|---|---|
| «إخفاء نسبة الخصم من بطاقة المنتج» | On | The discount percentage is hidden by default. Turn this off to show it. |
| «إخفاء تقييمات بطاقة المنتج» | Off | Hides the product rating. |
| «إخفاء تصنيف المنتج من بطاقة المنتج» | Off | Hides the category name. |
| «إخفاء ماركة المنتج من بطاقة المنتج» | Off | Hides the brand name. |
#«خيارات بطاقة المنتج» (product card options)
| Setting | Default | What it does |
|---|---|---|
| «طريقة عرض الصور في بطاقة المنتج» | «صورة واحدة» (one image) | One image, an image gallery («معرض صور»), or the second image on hover. |
| «عدد الصور» | 2 | How many images the gallery shows, at least two. Appears with «معرض صور» (gallery). |
| «التنقل التلقائي للصور» | Off | Cycles through the gallery automatically. Appears with «معرض صور» (gallery). |
| «عرض خيارات المنتج في بطاقة المنتج» | Off | Shows the product's options, such as size or color, inside the card. |
| «عرض اسم الحقل فوق الخيار في بطاقة المنتج» | Off | Writes the option's name above it. Appears once the previous option is on. |
| «عرض الخيارات على شكل أزرار بدلًا من قائمة» | Off | Buttons instead of a drop-down list. Appears once options are shown. |
| «عرض الخيارات الغير إجبارية» | On | Also shows options that are not required. Appears once options are shown. |
#«الخصم الكبير» (big discount)
| Setting | Default | What it does |
|---|---|---|
| «إظهار عداد الخصم في المتجر كامل» | Off | A countdown on discounted product cards on the home and category pages, and on the product page, when the discount has a future end date. |
| «تفعيل التاريخ الموحد لانتهاء الخصم» | Off | Uses one end date for every product. When it is off, the end date comes from each product's data in Salla. |
| «حدد تاريخ انتهاء الخصم لجميع المنتجات» | 2023-10-05 | The shared end date. The default date has passed, so pick a future one. |