Product cards are one of the first things shoppers see when browsing your store. Captivation Hub gives you flexible control over how these cards look, so you can create a storefront that matches your brand. Here's what you can customize and how to access those settings.
Accessing Product Card Customization
Use Product Card Customization to style cards in the Product List, Featured Products, and Collection components.
To get there, open the Store Builder, select a supported component, then open Product Card Customization in the component settings. Existing product card layouts keep their current styling unless you update these settings.
Available Customization Options
Borders
Customize the border around product images by adjusting thickness, radius, color, and style.
Available for: Product List, Featured Products, and Collection
Shadows
Add an inner or outer shadow to product images and adjust the offset, blur, spread, and color. You can stack up to 5 shadows using the + icon.
Available for: Product List, Featured Products, and Collection
Image Ratio and Hover Effects
Choose how product images fit within the card: Square, Portrait, or Original. Enable Show second image on hover to swap to the product's second image, or use Zoom image on hover to enlarge it.
Image ratio available for: Product List, Featured Products, and Collection
Hover effects available for: Product List and Featured Products on Desktop only
Product Card Padding
Control the space inside each product card. Padding can be configured separately for Desktop, Tablet, and Mobile.
Available for: Product List only
Product Info and Price Configuration
Align the product name, price, and other card information to the left, center, or right. Configure the available price display settings to control how pricing appears on the card.
Available for: Product List, Featured Products, and Collection
Comments
0 comments
Please sign in to leave a comment.