Articles on: Display & Styling

Control How Many Swatches Move in a Slider

LinkedOption lets you control how far a swatch slider moves when shoppers click an arrow or swipe on a touch screen. This setting is available for image swatches and color swatches when the layout uses a slider.


Open the slider settings


  1. From Shopify admin, open LinkedOption.
  2. Open Option styles and edit the style used by your product group.
  3. Expand Layout settings.
  4. Set Layout to Slide or Slide (Mobile only).


Choose how many swatches move


Under Swatches per scroll, choose one of these options:


All visible swatches


This is the default. Each arrow click or swipe moves the number of swatches that currently fit in the visible slider area. If fewer swatches remain at the end, the slider moves only the remaining distance.


Use this option when you want shoppers to browse options in larger groups.


One swatch


Each arrow click moves the slider by one swatch. A swipe uses the same one-swatch step.


LinkedOption automatically brings the currently selected swatch into view when the page loads. If that swatch starts centered, the first navigation may also align the slider to a swatch boundary. After alignment, each interaction advances one swatch. The final interaction moves only the remaining distance.


Use this option when you want slower, more precise browsing.


Preview and save


Check the preview while switching between the two options:


  • Confirm the arrows appear when the swatches exceed the available width.
  • Click both arrows to verify the movement.
  • If you use Slide (Mobile only), also test swiping on a mobile device.


When the result looks right, click Save.

Updated on: 13/07/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!