The Card Widget is a highly versatile and visually engaging feature designed to showcase product recommendations directly on your Shopify store. It presents products in an organized, card-style layout that is easy to navigate and aligns seamlessly with your store’s design. This widget helps merchants highlight products in a way that grabs attention, improves product discoverability, and boosts sales.
A Card Widget is a structured product display that highlights individual items in separate "cards." Each card typically includes key product details, such as:
- Product Image: A visually appealing thumbnail that instantly captures interest.
- Product Name: The title of the product, presented in a clear and concise format.
- Price: Displaying the price encourages customers to make purchasing decisions.
- Call-to-Action (CTA): Includes buttons like "Add to Cart" or "View Details" to prompt immediate action.
Benefits
- The Card Widget helps customers find products they might not have seen otherwise. By suggesting relevant items, it increases the likelihood of a purchase.
- With visually appealing and interactive elements, the Card Widget keeps customers browsing your store longer.
UI Styles
The Card Widget offers two distinct UI styles to display product recommendations: Carousel and Grid. Each style serves different purposes and provides a unique way for customers to engage with your products, ensuring flexibility and alignment with your store's design.
Card Style Carousel
The Carousel Style is a horizontally scrollable layout that presents product recommendations in a sleek and interactive format. Customers can browse through recommendations by clicking on navigation arrows or swiping (on touch devices). The carousel saves space while showcasing multiple products, making it ideal for sections with limited room.
Card Style Grid
The Grid Style displays products in a structured grid layout, showing multiple recommendations at once. All recommended products are visible at once.
Settings
Both Carousel and Grid styles for the Card Widget offer a variety of customizable settings to ensure that merchants can tailor the widget's appearance and functionality to fit their Shopify store's design.
Heading: This setting allows you to specify a heading for the widget, such as "You May Also Like" or "Recommended for You."
Heading Alignment: Control the alignment of the widget’s heading (left, center, or right).
Heading Bold: Toggle the heading’s font weight to bold or normal.
Ensure All Cards Are of the Same Height: This setting standardizes the height of all product cards within the widget. Some products may have additional elements like variant selectors or ratings, causing uneven card heights. This option ensures all cards are uniform, creating a polished appearance.
Maximum Products to Show: Set the maximum number of products displayed in the widget.
Product Columns: Adjust the number of product columns displayed in the widget.
Product Title Bold: Toggle the product title font weight to bold or normal.
Show Add to Cart Button: Choose whether to display an “Add to Cart” button on each product card.
Show Product Rating: Decide if product ratings (e.g., star ratings) should be visible on the product cards.
If you'd like to see how the Card widget looks and functions, you can visit our Shopify demo store. It showcases both the Carousel-Style and Grid-Style Cards in action, giving you a clear idea of how they can enhance your store.