Once you've created a slider in FlipSlide, the next step is placing it on your storefront so customers can see it. There are two ways to do this: using Shopify's theme editor or pasting an embed code.
Method 1: Theme Editor (Recommended)
This is the simplest approach and works with any Shopify Online Store 2.0 theme.
- Open FlipSlide and go to your Sliders page
- Find the slider you want to add and click the Embed button
- Copy the Slider ID shown in the popup
- Click Open Theme Editor, which takes you directly to the right place in your theme
- In the theme editor, you'll see the FlipSlide block has been added. Paste the Slider ID into the block's settings field
- Click Save in the theme editor
Your slider will now appear on that page for all your customers.
You can add the FlipSlide block to any page template in your theme. Use the page selector in the embed popup to choose which template you want to edit.
Method 2: Embed Code
If you prefer more control over placement, or if you're using a theme that doesn't support app blocks in certain areas, you can use the embed code instead.
- Open FlipSlide and go to your Sliders page
- Click the Embed button on the slider you want to add
- Copy the Embed Code shown in the popup
- In your Shopify Admin, go to Online Store > Themes > Customize
- Add a Custom Liquid section or block where you want the slider to appear
- Paste the embed code into the Custom Liquid field
- Click Save
The embed code includes everything needed to display the slider, including the loading script and the container element.
Using Multiple Sliders on One Page
You can place multiple FlipSlide sliders on the same page. Each slider has its own unique Slider ID, so they'll load independently. Just repeat either method above for each slider you want to add.
To learn more about Slider IDs and where to find them, see Understanding Slider IDs.
Choosing the Right Page
Think about where your sliders will have the most impact:
| Page Type | Good For |
|---|---|
| Product pages | Showing product transformations or color variations |
| Landing pages | Highlighting before and after results |
| Blog posts | Supporting tutorial or review content |
| Homepage | Featuring a hero comparison for your brand |
Troubleshooting
If your slider doesn't appear after adding it, check these common issues:
- Make sure the Slider ID is correct (no extra spaces)
- Verify the slider has both a before and after image uploaded
- Check that FlipSlide's theme extension is enabled in your theme settings
For more help, visit the Slider Not Showing on My Store troubleshooting guide.