Product - Circle Images
The Circle Images snippet creates a row of round, clickable product-related images—perfect for showcasing product variants, textures, icons, or categories in a clean, visual layout. This module is fully customizable and optimized for both desktop and mobile.
❗Custom Placement Instructions❗
To display the Circle Images snippet on your product page:
Go to your Product Information section in the editor.
Add a Custom Liquid block.
Paste this code:
Save the changes. You can drag the Custom Liquid block up or down to place the snippet exactly where you want.
Accessibility
Accessibility Label for the Circle List: Product circle image gallery Helps screen readers describe the section accurately.
Appearance Settings
Customize the visuals of each circular image element.
Background Color for Row:
TransparentSets the overall row background behind the images.Circle Border Color:
#DA6060The color around each circular image.Circle Border Weight (px):
1Border thickness around the images.Circle Size:
Mobile:
55pxDesktop:
80px
Spacing Between Circles:
Desktop:
10pxMobile:
4px
Circles Alignment: Aligns the circles within the row:
Left,Center, orRightCircle Images Padding:
Left Padding (px):
0Right Padding (px):
0
Layout Settings
Adjust padding, margins, and width for the entire section.
Padding Top/Bottom (Row):
Top: 3,Bottom: 3Margin Top/Bottom (Row):
Top: 0,Bottom: 1Max Row Width (rem):
105Controls the max container width for the image row.
Interaction Settings
Define what happens when users interact with the circle images.
Hover Animation: Example:
NoneChoose an animation for hover states (options may vary).Enable Image Click Redirect: Enable this if you want each circle image to link to a product, variant, or page.
Use Case
This snippet is ideal for:
Showcasing product color swatches or patterns
Displaying clickable icons
Creating compact, stylish visual rows above or below key product content
Last updated