Product cards
Use this setting to customize the "Product cards" Image Padding, Text alignment, Color scheme, Variants & swatches, Add to cart button, Border, and Shadow.
Color scheme
In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6 and so on.
Style
Customization of the "Style" in the slide is as follows:
Standard
Card
Show border around card
Toggle to display a border around each product card. Not applicable to the standard style.
Border color
Choose the color of the border around the product card.
Image ratio
Customization of the "Image ratio" in this section is as follows:
Adapt to image
Portrait
Square
Text alignment
The Text alignment customization in the card section is as follows:
Left
Center
Right
Price color
Select the color for the product price, specifically for discounted pricing.
Use video
Toggle to display the MP4 video as the first media in the product card if available. Note: This does not work for YouTube or Vimeo videos.
Show second image on hover
Toggle to enable displaying a second product image when the user hovers over the product card.
Show vendor
Toggle to display the product vendor’s name on product cards.
Show product rating
Toggle to display product ratings on the product cards. This requires a product rating app to be installed.
Enable quick view button
Toggle to add a quick view button on product cards, allowing users to view product details in a popup without navigating away.
In Product cards "Add to cart button" customization as is follow:
Add to Cart Button
Type
Customization of the "Type" in this section is as follows:
None
Standard
Quick add button
"Quick add button" display when "Swatches" and "Variants" are disabled.
Style
Customization of the "Style" in this section is as follows:
Outline
Solid
Show shadow button Enable this feature and display shadow type button design. Cart position Customization of the "Cart position" in this section is as follows:
Over the image
Bottom
Position
Customization of the "Position" in this section is as follows:
Left
Right
Icon type
Customization of the "Position" in this section is as follows:
Cart
Bag
Plus
Desktop button height Select desktop add to cart button height.
Quick add button notification
Color scheme
In this section, you can change the background and foreground color of a section using the color scheme. We provide total scheme 13. User can select any color scheme out of scheme 13.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6 and so on.
Quick add button
When a user increases the quantity of an item, it will be directly added to the cart without requiring any additional steps. This ensures a smoother and faster shopping experience by minimizing clicks and making the process more efficient.
Set this setting and easily get smooth and fast shopping experience For this enable below settings.
Product cards -> Add to cart button -> type -> quick add button
In Product cards "Swatches & Variants" customization as is follow:
Swatches
Show color swatch Toggle to display color swatches instead of a dropdown for variant selection. Applicable when “Variants” is disabled and quick add is set to “Standard”. Color swatch type
Customization of the "Color swatch type" in this section is as follows:
Swatch
Variant image
Color corner radius
Adjust the corner radius (in pixels) for the color swatches to control their roundness.
Variants
Show variants Toggle to display product variant selectors on product cards, allowing customers to choose a variant directly from the product grid. Type
Customization of the "Type" in this section is as follows:
Dropdown
Pills
Enable color swatch Toggle to enable color swatches for the variant selectors. Requires the variant selector type to be set to “Pills.” Variants corner radius Adjust the corner radius (in pixels) for variant selectors to control their roundness.
Food type metafield
Add metafield name for food_type. Enter "Veg" or "Non-veg" text only. For more detail about how to create metafield and show badge metafield click here "Create metafield"
Metafield delivery label
Delivery label badge use icon , icon color and label metafield to add the text and in this field enter metafield [key or namespace] only.
Same as selling_fast metafield and delivery_time.
Last updated