1. How to add side padding and background colors for the product cards?
To optimize product cards in the Theme Editor, follow these steps:
- Navigate to Online Store > Themes > Customize in your Shopify Admin.
- Go to Theme settings > Product.
- Set the desired padding for desktop/mobile view. This sets the space between the text and the edges of the product card.
- Choose a background color for light/dark mode.
2. How to change product card image ratio?
Open the Theme Editor and in the Theme Settings, select the Products section.
For the option labeled “Products Image Ratio”, Product card image ratio can be adjusted from the available options, including Natural (original ratio), Square (1:1), Landscape (4:3), Portrait (2:3), and Wide (16:9), to customize the visual presentation of your product images.
Natural (original ratio)
Square (1:1)
Landscape (4:3)
Portrait (2:3)
Wide (16:9)
Standard (3:4)
3. How to reveal next product images on the product cards?
This guide will help you configure your Shopify theme to reveal the next product images on product cards using various effects and customization options.
Under Image hover effect, 3 options include:
|
Option name |
How it works |
Example |
|
Image Carousel |
Multiple images will be displayed in a carousel. (You can adjust how many images appear by changing the setting of Number of additional images) |
 |
|
Hover to Reveal Second Image |
The second product image will be displayed on hover. |
 |
|
None |
No additional images will be displayed on hover. |
 |
You can also set up some effects and styles:
- Set the color for Navigation (transition arrows) when Image Carousel is enabled (for both light and dark backgrounds)
- Tick/ untick the box “Next/Previous arrows” to customize the appearance of the next and previous arrows:
- When ticked: The left and right arrows will appear above the product images when you hover over them.
- When unticked: The pagination will appear on top of the product images.
- Set the duration for each slide in the carousel in “Change slides every” between 0 to 4 seconds to control how long each slide remains visible in the carousel.
- This works only when the "Next, previous arrows" setting is enabled.
- If you set "Change slides every" to 0, autoplay will be turned off.
4. How to alter the inventory stock status?
✍️ What is a low stock threshold?
The low stock threshold serves as a predefined limit set by the retailer or admin to determine when a product's stock level is considered low. When the quantity of a particular product falls below the specified threshold, it shows a "Low stock" signal in Inventory status block on the product page.
✍️ How to set up the low stock threshold?
In Theme Editor, go to Theme Settings, select Products, look for the Inventory status section, and find the config "Low Stock Threshold”
Adjust the low stock threshold according to your preference. This threshold can typically be set within the range of 10 to 200 units. (Note: It must be a whole number).
Result:
|
Case |
Result |
|
When the number of products > or = Low stock threshold |
 |
|
When the number of products < Low stock threshold |
 |
✍️ How to set up the “In stock message” and “Low stock message”?
In Theme Editor, go to Theme Settings, select Products, scroll down to the Inventory status section, then fill in the personalized message you want in the right field:
- In stock message: Showing when the number of products > or = Low stock threshold value.
- Low stock message: Showing when the number of products < Low stock threshold value.
