A user is experiencing alignment issues with product images in their featured collection section, which appear shifted to the right rather than centered. They’ve attempted to fix this by uploading different image sizes, but this negatively impacts product images in other sections.
Two solutions proposed:
.featured-collection .product-image with auto margins)Additional request: The user also wants to reduce the font size for product names in the collection cards.
Current status: After implementing the CSS solution, the user encountered an unexpected display issue (shown in a screenshot). The problem persists even after deleting the added code, suggesting a caching issue or incomplete code removal. The discussion remains unresolved as they await further troubleshooting guidance.
As you can see the images are currently leaning more towards the right side, i’ve tried uploading images of various sizing but it affects the rest of my product images on various section. Hence, I was wondering if there’s a code to just centralize the images here for this featured collection section instead.
Is there also a way to adjust the font sizing smaller for the product name in these cards?
https://www.audette.store/products/lip-butter-gloss (code:test)
In mostly case your product images are not in center. Try to place the product item in the center of image size canvas.
To center the images in your featured collection, you can add some CSS to your theme. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code. Find your CSS file (usually called theme.css or styles.css) and add:
.featured-collection .product-image {
display: block;
margin-left: auto;
margin-right: auto;
}
To adjust the font size for the product names, look for the product name class in your CSS file. It might be something like .product-name or similar. Add or update the font-size property:
.product-name {
font-size: smaller; /* or use a specific size like 12px */
}
Tweak the selectors if needed to match your theme’s specific class names. Make sure to preview the changes before publishing them live.
