FlipSlide gives you two ways to add sliders to your Shopify store. This guide covers both methods in detail so you can choose the one that works best for your setup.
Using the Theme Editor
The theme editor method is the fastest and most flexible way to add sliders. It uses Shopify's built in app block system, which means you can position sliders anywhere within your theme's sections without touching any code.
Step by Step
- In FlipSlide, go to the Sliders page
- Click the Embed button next to the slider you want to place
- In the popup, you'll see your Slider ID at the top. Copy it
- Use the Page Template dropdown to select which page you want to add the slider to (for example, your homepage, a product page, or a specific landing page)
- Click Open Theme Editor
- The theme editor will open with the FlipSlide block ready to configure. Paste the Slider ID you copied earlier
- Position the block where you want it to appear on the page by dragging it within the section
- Click Save
The theme editor method requires a Shopify Online Store 2.0 compatible theme. Most modern themes support this. If you're unsure, check with your theme developer or try the embed code method below.
Moving or Removing a Theme Block
To reposition a slider, open the theme editor and drag the FlipSlide block to a new location. To remove it, click on the block and use the Remove block option. Removing the block from your theme won't delete the slider itself; it only removes it from that page.
Using the Embed Code
The embed code method works everywhere, including in Custom Liquid sections, custom pages, blog posts, and even on external websites outside of Shopify.
Step by Step
- In FlipSlide, go to the Sliders page
- Click the Embed button next to your slider
- Scroll down to the Embed Code section and copy the code snippet
- Go to Online Store > Themes > Customize in your Shopify Admin
- Add a Custom Liquid section (or Custom HTML block if your theme supports it)
- Paste the embed code
- Click Save
The embed code is a small HTML snippet that loads the slider automatically when the page is visited. It handles everything, including fetching the slider data and rendering it.
Multiple Sliders Per Page
Both methods support having several sliders on the same page. Each slider operates independently based on its unique Slider ID, so you can mix and match styles and configurations as needed.
Which Method Should I Use?
| Consideration | Theme Editor | Embed Code |
|---|---|---|
| Ease of setup | Easiest | Slightly more manual |
| Drag and drop positioning | Yes | No |
| Works in blog posts | Limited | Yes |
| Works outside Shopify | No | Yes |
| Requires OS 2.0 theme | Yes | No |
For most merchants, the theme editor method is the way to go. Use the embed code when you need more placement flexibility or when working with older themes.
Related Articles
- Adding a Slider to Your Theme for a quick start guide
- Understanding Slider IDs for how IDs work
- Slider Not Showing on My Store if something isn't working