How can i make the picture fill out as much as possible in the variant picker? ![]()
Topic summary
A user seeks help making product variant picker images fill more space in their button containers.
Problem Details:
- Variant picker photos appear too small within their designated areas
- User provided a screenshot showing the current layout issue
- Store is on Shopify platform
Proposed Solution:
A CSS-based fix was offered involving:
- Navigating to Shopify Admin → Online Store → Theme → Edit code
- Locating base.css, theme.css, or styles.css file
- Adding custom CSS code targeting
.product-form__input--color input[type=radio]+label:afterwithtransform: scale(1.5); - This scales the variant images by 150% to fill more space
Current Status:
The solution provider shared before/after screenshots demonstrating the visual improvement. The thread appears to be awaiting user confirmation on whether the CSS fix resolves the issue satisfactorily.
Hi @ArchDK , Can you kindly share your store link (with the password, if any) with us? I will check it and suggest you a solution if possible.
This is Noah from PageFly - Shopify Page Builder App
I can help you. Please can you provide the website url. Thank you.
Best regards,
Noah | PageFly
Hi @ArchDK ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css or styles.css
Step 3: Insert the below code at the bottom of the file → Save
.variations .product-form__input--color input[type=radio]+label:after {
transform: scale(1.5);
}
Here is result:
Hope this can help you
If our suggestions are useful, please let us know by giving it a likeor marking it as a solution. Thank you ![]()




