Product card
Product card is an element that showcase products with key details like images, titles, prices, and discounts in a clean, engaging layout.
How to add a Product card
Steps:
In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
In Quick add, select Product card.
Drag the Product card onto your canvas.
How to edit a Product card
Once you’ve added the Product card, the next step is to edit it to match your desired action.
Steps:
Select the relevant Product card element in the editor.
Use the tools bar above the selected element to quickly edit it.
All the formatting tools below can be found in the right hand sided Inspector panel.
Preset card style
Select product: Choose which product you want to display in the card.
Card style: Choose styling for your product cards.
Apply the product card styles defined in Theme settings > Product cards, ensuring consistent design across your store.
Image ratio: Defines the ratio of product images.
Apply the Image ratio defined in Theme settings > Product cards, ensuring consistent design across your store.
Text align: Control the alignment of text content.
Custom card style
Manage product card's elements:
Add new elements: Insert additional fields or information into the product card.
Reorder elements: Rearrange the order of elements in the product card to prioritize important content.
Product media:
Image ratio: Defines the ratio of product images.
Show second image: Display second image on hover
Product title: Define the HTML tag (e.g., span, h2, h3) for the product titles.
Prices:
Show sale badge: Enable or disable the display of a sale badge.
Sale badge type: Choose the style of the sale badge (Text/Fixed amount/Percentage)
Show currency code: Display the currency code (e.g., USD, EUR) alongside prices.
Design settings
Add to cart:
"Add to cart" label: Customize the text shown on the add-to-cart button.
"Select options" label: Customize the text shown when a product has multiple variants.
Icon: Choose an icon to display alongside the button label.
Icon size: Adjust the size of the icon.
Icon position: Set the icon to appear before or after the label text.
Last updated
Was this helpful?