Embedding Sliders on Your Store

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

  1. In FlipSlide, go to the Sliders page
  2. Click the Embed button next to the slider you want to place
  3. In the popup, you'll see your Slider ID at the top. Copy it
  4. 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)
  5. Click Open Theme Editor
  6. The theme editor will open with the FlipSlide block ready to configure. Paste the Slider ID you copied earlier
  7. Position the block where you want it to appear on the page by dragging it within the section
  8. 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

  1. In FlipSlide, go to the Sliders page
  2. Click the Embed button next to your slider
  3. Scroll down to the Embed Code section and copy the code snippet
  4. Go to Online Store > Themes > Customize in your Shopify Admin
  5. Add a Custom Liquid section (or Custom HTML block if your theme supports it)
  6. Paste the embed code
  7. 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.

Last updated on March 12, 2026