Product Card
About Blum Theme Product Card
Blum theme product cards are the way your products are displayed on your Shopify store’s product pages. They include the product image, title, price, and other relevant information.
For a more visual guide on How to Use the Custom Badge Feature in Blum Theme, please refer to the accompanying video tutorial below:
Blum Theme Product Card Settings
There are a number of ways to customize Blum theme product cards. To get started, go to Themes > Customize > Theme settings > Product card.
Image
The first thing you can customize is the product image ratio. Blum theme offers four options:
- Square
- Portrait (2:3)
- Landscape (3:2)
- Adapt to image
In addition to choosing the image ratio, you can also enable or disable the following display options for your product cards:
- Resize image to fit its container: The image will scale up or down to fit its container.
- Show second image on hover: Hovering over the product image will show a second image, if available. If the product does not have a second image, a placeholder image will be displayed.
- For square-shaped images, the recommended size is 2048 x 2048 pixels. This ensures your images look sharp and detailed.
- If you want to enable the zoom feature, which allows customers to take a closer look, your images need to be at least 800 x 800 pixels or larger.
- If your images aren’t square, no worries! Just use 2048 pixels as the height, and the width will adjust based on the aspect ratio:
- For portrait-style images (taller than wide), use 2048 x 1365 pixels.
- For landscape-style images (wider than tall), use 2048 x 3072 pixels.
Following these simple guidelines will make sure your product images look their best on Shopify. High-quality visuals can really make a difference in catching a customer’s eye and convincing them to make a purchase.
Information
In the Information setting, you can choose to:
- Show vendor: Display the vendor name of the product.
- Show variant swatches: Variant swatches will only be displayed if variant swatches are enabled.
- Enable quick shop: Displays a quick shop modal when the product image is clicked.
Custom badge
Custom badge settings allow you to highlight product features such as ‘Best Seller’, ‘Limited Edition’ from product metafields and customize its background color as well as text color.
Advanced: If you want to show many custom badges in different text and background color, you can use a product metafield linked to a metaobject.
Please make sure that your metaobject contains the 3 following fields:
- badge text: Single-line text type. Content is rendered case-sensitive.
- badge bg color (badge background color): Color type.
- badge text color: Color type.
You must use the exact name such as ‘badge text‘, ‘badge bg color‘, ‘badge text color‘ and the metaobject must contain all 3 fields, otherwise, it cannot be displayed on the page.
Product badge
In this setting, you can choose to:
- Show ‘sold out’ badge
- Show sale badge
- Show ‘new in badge’: this badge will show up based on settings in Theme Settings > Product Information > Stock status
- Show custom badges
You can also change the badge position on top left or top right. In this example, product badges are placed on the top left:
Additionally, badge style can be chosen between default and tilt.
Frequently Asked Questions
1. Which product image ratio should you use?
The best product image ratio for your store will depend on the type of products you sell and the overall aesthetic of your store. If you sell a variety of products with different shapes and sizes, you may want to use a square image ratio to create a more uniform look. If you sell products with a specific shape, such as clothing or furniture, you may want to use the portrait or landscape image ratio to highlight the product’s features.
2. How can I change the product image ratio in the Blum theme?
To change the product image ratio in the Blum theme, go to Themes > Customize > Theme settings > Product card and select the desired image ratio from the Image ratio dropdown menu.