Enhance the shopping experience on your product pages and collection pages by enabling a slider for Shopify Variants and 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 Swatch King dashboard, go to the
Product page stylesorCollection page stylesvia the side navigation where you want to implement the slider.Select the specific style (attributed to your Shopify Variant or Product Group) on products or collections for which you wish to enable the slider.
Here's the guide to identifying the assigned style for Shopify Variants and Product Groups.
Click
Customizeon the chosen design. A pop-up window will appear.Scroll to
Desktop Slider SettingsorMobile 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
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.