Getting Started Tutorial

Install the App

Get started by installing TSP Before/After Slider from the Shopify App Store

1. Visit the Shopify App Store
2. Search for 'TSP Before/After Slider'
3. Click 'Add app' to install
4. Approve the permissions when prompted
5. You'll be redirected to the app dashboard

Create Your First Slider

Learn how to create a beautiful before/after slider for your products

1. From the app dashboard, click 'Create New Slider'
2. Upload your 'Before' image
3. Upload your 'After' image
4. Give your slider a name for easy identification
5. Click 'Save' to create the slider

Customize Your Slider

Make your slider match your brand perfectly

1. Select your slider from the dashboard
2. Click 'Customize' to open the customization panel
3. Adjust the handle color and style
4. Customize the divider line color and width
5. Set custom 'Before' and 'After' labels
6. Choose label position and colors
7. Preview your changes in real-time
8. Click 'Save Changes' when done

Assign Slider to Products

Display your slider on product pages

1. Select your slider from the dashboard
2. Click 'Assign to Products'
3. Search for and select the products
4. Choose the display position on the product page
5. Click 'Save' to apply

Test on Your Store

Verify everything looks perfect

1. Visit one of your assigned product pages
2. Find the before/after slider
3. Test the slider by dragging the handle
4. Check mobile responsiveness by viewing on mobile
5. Make any final adjustments in the app

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

Test your sliders on different devices and screen sizes

Choose colors that complement your brand and are accessible

Update slider images regularly to keep content fresh