In the NEXT theme, image-based variant swatches (for example, color or style swatches that use images) have a fixed default size. If you want these swatches to appear larger and easier to see, this can be adjusted with a small code change.
This guide explains what to change and where.
Before you start
This change requires editing theme code.
We strongly recommend duplicating your theme before making any modifications:
Online Store → Themes → … → Duplicate
Step 1: Open the product template file
Go to Online Store → Themes
Click … → Edit code on your active NEXT theme
Open the main product section file. It is usually named one of the following:
sections/main-product.liquid
Step 2: Increase the generated swatch image size
Inside the file, search for the following lines near the top:
assign image_width_small = image_width | divided_by: 4
assign image_height_small = image_height | divided_by: 4
Replace them with:
assign image_width_small = image_width | divided_by: 2
assign image_height_small = image_height | divided_by: 2
This increases the resolution of the images used for variant swatches.
You can adjust the value if needed:
divided_by: 3 for a moderate increase
divided_by: 2 for a larger, clearer swatch
Step 3: Increase the visible swatch size
Next, search in the same file for swatch image markup that looks like this:
<img ... width="30" height="23" loading="lazy">
Update the width and height values. For example:
width="48" height="36"
If you want even larger swatches, you can use:
width="60" height="45"
Make sure you update all swatch image instances so the size stays consistent.
Recommended swatch sizes
Size option | Width × Height |
Default | 30 × 23 |
Medium | 48 × 36 |
Large | 60 × 45 |
Always keep the same aspect ratio to avoid image distortion.
Result
After saving the changes:
Variant image swatches will appear larger
Swatches will be easier for customers to recognize
No changes will be made to the main product images
Need further assistance?
Custom code changes fall outside the scope of standard theme support. If you’re interested in custom development, please log in to your SYK support dashboard, go to the Development Credit tab (https://support.someoneyouknow.online/credits), and click the New Request button.
If you have general questions about how variant images work in the NEXT theme, feel free to contact our support team.