Arrows
Previous and next buttons for the main image: where they sit and how they look.
Enablement & Icons
Not shown for single-image products. The lightbox has its own arrows (Lightbox tab).
Chevron, Thin arrow or Arrow.
Optional. Select Image uploads an image that overrides the icon choice above; Remove goes back to it. Shown at the Icon size.
Placement
| Placement | Result |
|---|---|
| Inside image (overlay) (default) | Over the left and right edges of the image. |
| Outside image | Just beyond the image's left and right edges (leave room in your layout). |
| Above image · Below image | Both buttons together in a row above or below the image. |
Alignment (Start, Center, End; default Center) sets the vertical position for Inside/Outside, or the row's alignment for Above/Below. Offset from edge (px): 12 (0–60), the inset from the image edge, or the gap between an arrow row and the image.
Appearance
| Setting | Default |
|---|---|
| Button size (px) · Icon size (px) | 40 (24–64) · 20 (12–32). Buttons are at most 40 px on tablets and 34 px on phones. |
| Shape | Circle, or Rounded, Square, No background (icon only) |
| Corner radius when Rounded (px) | 8 (0–40) |
| Background color · Icon color | #ffffff · #1f2937 |
| Background opacity (%) | 100 (0–100; 0 is fully transparent). Also applies to the hover background. |
| Border width (px) · Border color | 0 (0–6) · #e2e4e9 |
No background (icon only) also drops the border and shadow.
Hover & Focus
Hover/focus background #ffffff and Hover/focus icon color #1f2937: used on mouse hover and keyboard focus.
Responsive Visibility
Hides the arrows and the thumbnail scroll buttons on phones (480 px and narrower); shoppers swipe instead. Works even with Enable Responsive Breakpoints off.
All these styles also apply to the thumbnail strip's scroll buttons.