FoxstudioAdd and edit elements
Product card
3 min read
How to add a Product card
- 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
- Select the relevant Product card element in the editor.
- Use the tools bar above the selected element to quickly edit it.
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.
Learn more: Product Cards in Theme settings
- Image ratio: Defines the ratio of product images.
- Apply the Image ratio defined in Theme settings > Product cards, ensuring consistent design across your store.
Learn more: Product Cards in Theme settings
- Text align: Control the alignment of text content.
Custom card style
- 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.
- 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