Install the App.
Get started by installing TSP Before/After Slider from the Shopify App Store.
- 1Visit the Shopify App Store
- 2Search for 'TSP Before/After Slider'
- 3Click 'Add app' to install
- 4Approve the permissions when prompted
Pro Tip
The app integrates automatically with your theme - no manual theme editing required!
Create Your First Slider.
Learn how to create a beautiful before/after slider for your products.
- From the app dashboard, click 'Create New Slider'
- Upload your 'Before' image
- Upload your 'After' image
- Give your slider a name for easy identification
- Click 'Save' to create the slider
Pro Tip For best results, use images with the same dimensions and aspect ratio.
Customize Your Slider.
Make your slider match your brand perfectly.
Colors & Styles
Adjust handle colors, divider width, and active accents.
Labels
Set custom text and position for 'Before' and 'After' tags.
Select your slider, click 'Customize' to open the panel, adjust your settings, and click 'Save Changes' when done. Use colors that match your brand for a cohesive look!
Assign Slider to Products.
Display your slider on product pages.
- Click 'Assign to Products'
- Search for and select the products
- Choose the display position on the product page
- Click 'Save' to apply
Pro Tip You can assign one slider to multiple products, or create unique sliders for each product.
Test on Your Store.
Verify everything looks perfect.
Check Mobile Responsiveness
Visit your product page and test the slider by dragging the handle. Always test on mobile devices to ensure a great user experience!
Best Practices
Optimize your visual impact with these expert tips.
Use high-quality images with the same dimensions for both before and after.
Keep image file sizes optimized (under 500KB) for fast loading.
Use descriptive names for your sliders to stay organized.
Choose colors that complement your brand and are accessible.