Building your first image comparison slider in FlipSlide is straightforward. This guide walks you through each step from start to finish.
Open the Slider Editor
- Open FlipSlide from your Shopify Admin sidebar
- Click the Create slider button at the top of the Sliders page
- You'll land on the slider editor, which has your settings on the left and a live preview on the right
Add Your Images
Every slider needs two images: a "before" image and an "after" image.
- Click the Upload button under "Before Image" and select your first image
- Do the same for the "After Image" section
- Your images are uploaded securely through Shopify's file hosting
For the best results, use two images that are the same dimensions. This ensures the slider looks clean and the comparison is accurate.
Give It a Title
Enter a title for your slider in the Title field. This is for your own reference in the dashboard and won't be shown to customers on your storefront.
Choose a Style
FlipSlide comes with 30 different slider styles. The free plan includes Classic, Minimal, and Dotted. Pro users get access to all 30 styles, including options like Neon, Glass, Filmstrip, and many more.
Pick the one that fits your store's look. You can see what each style looks like in the live preview as you select it. For the full list, visit the Slider Styles Guide.
Customize the Appearance
You can fine tune your slider's look using the customization options:
- Accent Color controls the divider line color
- Handle Color sets the color of the drag handle knob
- Border Radius rounds the corners of the slider container
- Line Thickness adjusts how thick the divider line is
There are also toggles for showing or hiding the divider line, the handle knob, and the labels. For a full breakdown of all options, see Customizing Colors and Appearance.
Set Up Labels
By default, your slider will show "Before" and "After" labels. You can change these to anything you like, such as "Original" and "Edited" or "Day 1" and "Day 30."
You can also choose where labels appear (top, center, or bottom) and change the label text color. More details are in the Labels, Handle, and Line Options article.
Save Your Slider
Once you're happy with how everything looks in the preview, click Save in the contextual save bar at the top of the page. Your slider is now created and ready to be added to your store.
Add It to Your Store
After saving, you'll need to place the slider on your storefront. You have two options:
- Theme Editor (recommended): Add the FlipSlide block through Shopify's theme editor and paste your Slider ID
- Embed Code: Copy a code snippet and paste it into a Custom Liquid section or HTML block
For step by step instructions on both methods, see Adding a Slider to Your Theme.
What's Next?
Now that your first slider is live, here are some things to explore:
- Customizing Colors and Appearance for fine tuning the look
- Interaction Modes and Positioning to control how customers interact with the slider
- Understanding Your Analytics to see how your slider performs