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 |
|---|---|---|
«تثبيت المظهر الداكن في بطاقة المنتج» card_dark | Off | The card is always dark. |
«لون خلفية بطاقة المنتج» card_bg_color | #ffffff | The card's background color. |
«لون إطار بطاقة المنتج» card_border_color | #004956 | The card's border color. |
«لون خلفية العنوان الترويجي» card_promo_bg | #f87e7e | The background of the product's promotional title on the card. |
«مقاس (طول) صورة بطاقة المنتج» card_height | 9 | The height of the product image, from 0 to 20. The panel recommends 9 for square images and 16 for tall ones. |
«شكل زوايا بطاقة المنتج وزر الإضافة» card_round | «منحنية 3» (curve 3) | From «بدون إنحناء» (no curve) to «منحنية 5» (curve 5). |
«أيقونة زر أضف للسلة» card_add_icon | «أيقونة بلس» (plus) | A plus icon, a cart icon, or one of three bag icons. |
«إخفاء إطار بطاقة المنتج» card_border | Off | Hides the card border. |
«إخفاء خلفية بطاقة المنتج» card_nobg | Off | Removes the card background. |
«إظهار تأثير لامع عند التأشير بطاقة المنتج» card_has_shine | On | A shine that passes over the card when the pointer hovers over it. |
#Text and buttons
| Setting | Default | What it does |
|---|---|---|
«عنوان المنتج بخط عريض» card_bold | On | The product name in bold. |
«عنوان المنتج في سطر واحد» card_line | On | Shows the product name on one line. |
«توسيط النصوص في بطاقة المنتج» card_center | Off | Centers the text inside the card. |
«زر أضف للسلة بدون خلفية» card_outline | On | The add-to-cart button with an outline and no fill. |
«إخفاء زر أضف للسلة» card_add_hide | Off | Hides the add-to-cart button on the card. |
«إخفاء زر نفدت الكمية» card_hide | On | Hides the button on out-of-stock products and puts an «نفدت الكمية» (out of stock) label on the card. |
«إخفاء زر أضف للأمنيات» wish_hide | Off | Hides the wishlist button. |
«تفعيل ميزة العرض السريع لتفاصيل المنتج» card_quick_view | On | A button that opens the product details in a window without leaving the page. |
«عرض أيقونة الأمنيات والعرض السريع تحت صورة المنتج» card_actions_bottom | Off | Moves those two buttons from over the image to under it. |
#What the card shows
| Setting | Default | What it does |
|---|---|---|
«إخفاء نسبة الخصم من بطاقة المنتج» card_ratio | On | The discount percentage is hidden by default. Turn this off to show it. |
«إخفاء تقييمات بطاقة المنتج» card_rating | Off | Hides the product rating. |
«إخفاء تصنيف المنتج من بطاقة المنتج» card_category | Off | Hides the category name. |
«إخفاء ماركة المنتج من بطاقة المنتج» card_brand | Off | Hides the brand name. |
#«خيارات بطاقة المنتج» (product card options)
| Setting | Default | What it does |
|---|---|---|
«طريقة عرض الصور في بطاقة المنتج» product_images_layout | «صورة واحدة» (one image) | One image, an image gallery («معرض صور»), or the second image on hover. |
«عدد الصور» productcard_images_limit | 2 | How many images the gallery shows, at least two. Appears with «معرض صور» (gallery). |
«التنقل التلقائي للصور» productcard_autoplay | Off | Cycles through the gallery automatically. Appears with «معرض صور» (gallery). |
«عرض خيارات المنتج في بطاقة المنتج» productcard_options | Off | Shows the product's options, such as size or color, inside the card. |
«عرض اسم الحقل فوق الخيار في بطاقة المنتج» label_productcard_options | Off | Writes the option's name above it. Appears once the previous option is on. |
«عرض الخيارات على شكل أزرار بدلًا من قائمة» card_options_grid | Off | Buttons instead of a drop-down list. Appears once options are shown. |
«عرض الخيارات الغير إجبارية» card_options_req | On | Also shows options that are not required. Appears once options are shown. |
#«الخصم الكبير» (big discount)
| Setting | Default | What it does |
|---|---|---|
«إظهار عداد الخصم في المتجر كامل» card_countdown | 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. |
«تفعيل التاريخ الموحد لانتهاء الخصم» sale_end | Off | Uses one end date for every product. When it is off, the end date comes from each product's data in Salla. |
«حدد تاريخ انتهاء الخصم لجميع المنتجات» sale_date | 2023-10-05 | The shared end date. The default date has passed, so pick a future one. |