Product cards are on the Collection pages and Featured collection sections. They can also be added to the Grid and Slider sections. The settings under the Product cards apply to all those product cards.
Badges
Settings and controls
- Sold out
- Sold out badge appears when the product is sold out.
- Sale
- The sale badge is a simple badge that appears on the card to let customers know the product is on sale.
- Unavailable
- The Unavailable badge appears when the variant combination is not available. For example, if there are 3 variants (red-large, red-small, green-large), if the customer select green as the color and small as the size, the Unavailable badge appears.
- Discount percentage
- A badge appears on the product's thumbnail to show the percentage number of the sale amount. For example, if a $20 product is on sale for $10, the discount percentage will be 50%. The discount percentage badge updates each time a new variant is selected.
Quick-buy
What is Quick-buy?
Quick-buy allows customers to add the product to the cart directly from the collection, featured collections, grids, and sliders. The Quick-buy options allow customers to explore and change the variant of a product before adding it to the cart.
Settings and controls
- Variant style
- This option defines how variants appear on the Quick-buy panel. The variant style can be either Dropdowns or Buttons.
- Add to cart behavior
- Go to cart page
- The page redirects to the cart page right after the customer adds the product to the cart.
- Open minicart
- The minicart opens after a product is added to the cart.
-
- The position and style of the minicart can be modified in the Header section settings under the Cart block settings.
- Stay on the page
- If this option is selected, nothing, in particular, happens after a product is added to the cart. However, Suppose the "Enable success notification" is checked. In that case, a notification will appear on the bottom-right side of the page, informing the customer that the product has been successfully added to the cart.
- Go to cart page
- Enable success notification
- If this option is checked, customers receive a notification on the right-bottom side of the page, informing them that the product has been successfully added to the cart.
-
The notification appears only if the "Add to cart behavior" is set to "Stay on the page."
Price
- Original Price (On sale)
- The original price appears next to the sale price if a product is on sale. If this option is unchecked, only the sale price appears on the product card when the product is on sale.
- Show maximum price
- The maximum price shows the price of the most expensive variant of the product. For example, if a product has 3 variants; red-$10, blue-$20, green-$30, then the maximum price for this product is $30.
- Show text "from"
- The text "from" appears at the beginning of the price if the product has multiple variants with different prices.
Simple cards
Simple cards are product cards that do not support the Quick buy option. These cards appear in:
- Search results
- Recently viewed slider
- Product recommendations slider