Skip to main content

Show Swatches in a Slider

Updated over 6 months ago

Enhance the shopping experience on your product pages and collection pages by enabling a slider for Product Groups. This compact solution allows customers to browse through all variants without excessive scrolling, neatly showcasing the breadth of your offerings in a single interactive element.


Step: Activate the Slider

  • From the Variant King: Combined Listing dashboard, go to the Product page styles or Collection page styles via the side navigation where you want to implement the slider.

  • Select the specific style (Product Group) on products or collections you wish to enable the slider.

    • Here's the guide to identifying the assigned style for Shopify Variants and Product Groups.

  • Click Customize on the chosen design. A pop-up window will appear.

  • Scroll to Desktop Slider Settings or Mobile Slider Settings.

  • In the Enable Slider dropdown, change the setting to "Yes" to turn on the slider function.

  • For advanced customization of the slider, including layout, arrow style, and preview options, click here.

By enabling this feature, product options or groups will be displayed in a slider, saving space and enhancing the user interface.

Advanced Slider Settings for a Tailored Experience


Take full control over the slider's look and feel with these advanced customization options:

  • Slider Layout: Fine-tune where your navigation arrows sit relative to the swatches. You have the flexibility to select "Floating arrows over swatches" for a modern look, "Arrows on both ends" for a classic slider feel, or "Both arrows on right end" for a unique twist.

  • Arrow Style: Elevate your slider's design by choosing from various arrow styles such as "Circle," "Square," "Rectangle," or "Semi-circle." Each style adds a different aesthetic to your slider, allowing it to blend seamlessly with your store's design.

  • Arrow Size: Adjust the arrow size to complement your swatches perfectly. Simply slide to increase or decrease the size, ensuring the arrows are visible without overpowering the swatches.

  • Last Swatch Preview: Indicate more options to the user by setting the last swatch preview to "Full swatch" or "Half swatch." The "Half swatch" is particularly useful as it subtly encourages users to scroll, hinting at additional choices beyond what's immediately visible.

Tailoring these settings helps you create a slider that not only looks great but also functions seamlessly on your product and collection pages.

Did this answer your question?