Customize Product Cards
The Product card setting controls how products appear in product grids across your storefront, such as featured collections, collection pages, and product list sections.
You can use this setting to adjust product image style, price display, wishlist icon, quick view button, hover effect, border style, and text alignment.
On this page
- Access Product card settings
- Understand Product card settings
- Change text alignment
- Show or hide product price details
- Show or hide wishlist icon
- Enable contained layout
- Change image ratio
- Choose image quality
- Set product hover behavior
- Customize the product card button
- Customize product card border
- Preview and save changes
Access Product card settings
You can manage product card settings from the Theme Editor.
Steps:
- Log in to your BurgerShop admin.
- Go to Online store.
- Select Themes.
- Open the theme you want to edit.
- Click Customize.
- In the left sidebar, click General setting.
- Select Product card
The changes you make here may apply to product cards across multiple storefront pages
Understand Product card settings
The Product card section includes settings for product display, image behavior, buttons, and border style.
Common settings include:
| Setting | What it controls |
|---|---|
| Text alignment | Aligns product text to the left or center |
| Show compare at price | Shows the original price when a product is on sale |
| Show price range | Shows a price range for products with multiple variant prices |
| Show add to wishlist icon | Shows or hides the wishlist icon on product cards |
| Contained layout | Keeps product card content inside a contained card style |
| Image ratio | Controls whether product images display as portrait or square |
| Image Quality | Controls how images are optimized for clarity and speed |
| While hovering | Controls the effect when customers hover over a product card |
| Product card button | Adds a button such as “Quick view” to the product card |
| Border | Controls product card border thickness and color |
Change text alignment
Text alignment controls how product information appears below the product image.
Options:
- Left: Aligns product title, price, and rating to the left.
- Center: Centers product title, price, and rating.
Steps:
- Go to General setting > Product card.
- Under Display, find Text alignment.
- Select Left or Center.
- Review the product grid preview.
Tip
Use Left alignment for a clean marketplace-style layout. Use Center alignment for a more balanced and visual storefront style.
Show or hide product price details
You can control how price information appears on product cards.
Show compare at price
Turn on Show compare at price if you want to display the original price when a product has a sale price.
This is useful for:
- Sale campaigns
- Discounted products
- Showing price comparison
Show price range
Turn on Show price range if your product variants have different prices.
For example, if a product has multiple sizes or styles with different prices, the product card can show a range instead of only one price.
Steps:
- Go to General setting > Product card.
- Find Show compare at price.
- Turn the toggle on or off.
- Find Show price range.
- Turn the toggle on or off.
- Review the preview.
Show or hide wishlist icon
The wishlist icon lets customers save products they are interested in.
Steps:
- Go to General setting > Product card.
- Find Show add to wishlist icon.
- Turn the toggle on or off.
- Check the product card preview.
When enabled, the wishlist icon usually appears on or near the product image.
Recommendation
Enable the wishlist icon if your store has many products and customers may want to save items before purchasing.
Enable contained layout
The Contained layout setting changes how the product card is visually grouped.
When enabled, product images and information are displayed inside a more contained card structure. This can make the product grid look cleaner and more organized.
Steps:
- Go to General setting > Product card.
- Find Contained layout.
- Turn the toggle on or off.
- Review the product grid preview.
Use this setting if you want product cards to look more separated and structured.
Change image ratio
The Image ratio setting controls the shape of product images in product cards.
Options:
| Option | Description |
|---|---|
| Portrait | Displays product images in a taller vertical format |
| Square | Displays product images in a 1:1 square format |
teps:
- Go to General setting > Product card.
- Under Additional settings, find Image ratio.
- Select Portrait or Square.
- Review how product images appear in the preview.
Tip
Use Portrait for apparel, POD products, or tall mockups. Use Square if your product images are designed in a square format or you want a compact grid.
Choose image quality
The Image Quality setting controls how BurgerShop serves product card images on your storefron
| Option | Description | Recommended use |
|---|---|---|
| Original | Displays the original uploaded image without optimization. This keeps maximum sharpness but may increase page load time. | Use when image clarity is the top priority |
| Normal | BurgerShop automatically serves an optimized image size for a balance between speed and clarity. | Recommended for most stores |
| Medium | Serves a smaller image size to prioritize loading speed. | Use when improving mobile speed is the main priority |
Steps:
- Go to General setting > Product card.
- Under Additional settings, find Image Quality.
- Select Original, Normal, or Medium.
- Review the image clarity and page layout.
Recommendation
Use Normal for most stores. It provides the best balance between image quality and storefront performance.
Set product hover behavior
The While hovering setting controls what happens when a customer moves their cursor over a product card
| Option | Description |
|---|---|
| Zoom | Slightly zooms into the product image on hover |
| Change image | Shows another product image on hover, if available |
Steps:
- Go to General setting > Product card.
- Find While hovering.
- Select Zoom or Change image.
- Preview the effect on your storefront.
Tip
Use Change image if your products have multiple mockups and you want customers to quickly preview another angle. Use Zoom for a simple visual effect.
Customize the product card button
The Product card button lets you show an action button on product cards, such as Quick view.
Enable or disable the button
- Go to General setting > Product card.
- Find Product card button.
- Turn the toggle on or off.
Change the button label
- In the Label field, enter the button text.
- Example:
Quick view - Review the preview.
Set button display behavior
You can choose how the button appears on product cards
| Option | Description |
|---|---|
| Always show | The button is always visible on the product card |
| When hover | The button appears only when customers hover over the product card |
Steps:
- Under Product card button, find Display.
- Select Always show or When hover.
- Review the product card preview.
Recommendation
Use When hover for a cleaner product grid. Use Always show if you want the action button to be more visible.
Customize product card border
The Border setting controls the border around product cards.
Thickness
Controls how thick the border appears.
Color
Controls the border color.
Steps:
- Go to General setting > Product card.
- Under Border, adjust Thickness.
- Choose a Color.
- Review the product card preview.
A subtle border can help separate product cards and make the grid easier to scan.
Preview and save changes
After adjusting product card settings, review your storefront before saving.
Steps:
- Check the product grid in the preview area.
- Switch between desktop and mobile preview.
- Confirm that product images, text, prices, icons, and buttons display correctly.
- Click Save.
- Click Publish if you want to apply the updated theme to your live store.