For the complete documentation index, see llms.txt. This page is also available as Markdown.
Control image swatch dimensions
Control the shape of image swatches displayed on your storefront.
By adjusting the ratio, you can make image swatches appear as squares, portraits, landscapes, or match the aspect ratio.
Set up
1
Navigate to the settings page
In the GLO Color Swatch, navigate to the Settings page > Image swatch
2
Default size for image file
The smaller the width and height, the faster the image loads.
On the contrary, the larger the width and height of the image, the slower its display speed.
By default, we set it to 150px; you can adjust it to suit your needs.
Setting default width & height of image
Example 1:
If your image swatches are displayed at 35 × 35 px on the storefront:
Set the image swatch size to 35 × 35 px.
If the image appears blurry, try increasing it to 50 - 60 px.
Using a size close to the displayed dimensions can significantly improve page performance, reducing image load time compared to using the default size of 150 px.
Example 2:
If your image swatches are displayed at 300 × 300 px on the storefront:
Set the image swatch size to 300 × 300 px.
If you keep the image size at 150 px, the image will be stretched to fill the larger display area, which may result in a blurry or pixelated appearance.
3
Background size options
You can control how images fit within the swatch area by adjusting the Background Size setting.
Cover
The image fills the entire swatch area.
May crop parts of the image.
Best for creating a uniform appearance.
Contain
The entire image is displayed within the swatch area.
No cropping occurs.
May leave empty space around the image.
Choose the option that best matches your image style and store design.
Example image background-size:
4
Save your work
💬 Need help?
Email us at 📧 contact@globo.io - we’re happy to assist!
