Adding Widgets to Your Theme
Learn how to add ReelPlus widgets to your Shopify storefront using the Theme Editor
Adding Widgets to Your Theme
Once you have created a widget in the ReelPlus dashboard, the next step is to place it on your Shopify storefront. Shopify's Theme Editor is the primary tool for positioning and configuring widgets on your live store.
Before You Begin
Make sure you have completed the following:
- Installed the ReelPlus app on your Shopify store
- Uploaded at least one video in the ReelPlus dashboard
- Created at least one widget and assigned videos to it
ReelPlus widgets are added through Shopify's native Theme Editor, so they integrate seamlessly with your existing theme and other apps.
Understanding Widget Placement Types
ReelPlus uses two different placement methods depending on the widget type:
| Widget Type | Placement Method | Where to Find It |
|---|---|---|
| Carousel | Theme Section or Block | Add Section in Theme Editor |
| Story | Theme Section or Block | Add Section in Theme Editor |
| Product Page | Theme Block | Add Block inside product page sections |
| Floating | App Embed | App Embeds toggle in Theme Editor |
The Floating Widget is not added as a section. It is an App Embed, which means it overlays on every page where it is enabled. See the dedicated section below for instructions.
Adding a Carousel, Story, or Product Page Widget
Open the Theme Editor
From your Shopify Admin, navigate to Online Store > Themes. On your active theme, click the Customize button. This opens the Theme Editor.
Navigate to the Target Page
Use the page selector dropdown at the top center of the Theme Editor to choose the page where you want the widget to appear. Common choices include:
- Home page — for carousel and story widgets
- Product pages — for product page widgets
- Collection pages — for carousel widgets showcasing category videos
- Custom pages — for landing pages or campaign pages
Click "Add Section" or "Add Block"
In the left sidebar of the Theme Editor:
- For a full-width widget: Scroll down and click Add section
- For a widget inside an existing section: Click the section, then click Add block
A panel will appear listing all available sections and blocks.
Find ReelPlus in the List
In the search bar of the section/block picker, type ReelPlus. You will see the available widget types:
- ReelPlus Carousel — horizontal scrolling video carousel
- ReelPlus Story — Instagram-style story circles
- ReelPlus Product Page — video widget designed for product detail pages
Click the widget type you want to add.
Select the Widget Instance
After adding the block, the Theme Editor sidebar will show the ReelPlus widget settings. Here you can select which widget (created in the ReelPlus dashboard) to display. Use the Widget Picker to choose from your saved widgets.
Configure Display Settings
The Theme Editor sidebar provides several display options depending on the widget type:
- Section padding — control top and bottom spacing
- Full width toggle — stretch to the edge of the screen or keep within the page container
- Visibility settings — show or hide on specific device types
These settings are theme-level and complement the design options you configured inside the ReelPlus dashboard.
Save and Publish
Once you are satisfied with the placement and settings, click the Save button in the top-right corner of the Theme Editor. Your widget is now live on your storefront.
Adding the Floating Widget (App Embed)
The floating widget works differently from other widget types. Instead of being placed in a specific section, it is toggled on as an App Embed, which makes it appear on every page of your store.
Open App Embeds
In the Theme Editor, click the App embeds icon in the left sidebar (it looks like a grid or puzzle piece icon near the top).
Enable ReelPlus Floating Widget
Find ReelPlus Floating Widget in the list of app embeds and toggle it on.
Configure Position and Behavior
Click on the ReelPlus Floating Widget embed to expand its settings:
- Position — choose where the button appears (bottom-right, bottom-left, etc.)
- Button style — customize the appearance of the floating button
- Pages — control which pages the floating widget appears on
Save
Click Save to activate the floating widget across your store.
The floating widget is ideal for stores that want a persistent video call-to-action without taking up layout space. Visitors can click the floating button at any time to open a video experience.
Testing on Different Devices
After adding your widget, it is important to verify that it looks and functions correctly on all devices.
In the Theme Editor
Use the device preview buttons at the top of the Theme Editor to switch between:
- Desktop view
- Mobile view
Check that the widget is properly sized, that videos are accessible, and that interactive elements (navigation arrows, play buttons) are easy to tap on smaller screens.
On a Real Device
For the most accurate test:
- Open your store URL on your phone and tablet
- Test video playback, swiping, and product card interactions
- Verify the floating widget (if enabled) does not overlap important content
- Check page load speed to ensure videos are not slowing down the store
Mobile browsers handle autoplay differently. Most require videos to be muted for autoplay to work. ReelPlus handles this automatically, but always verify on a real device.
Reordering and Repositioning Widgets
You can change the position of a ReelPlus section at any time:
- In the Theme Editor left sidebar, hover over the ReelPlus section
- Click and drag the handle (six dots icon) to move it up or down
- Release to place it in the new position
- Click Save to apply the change
Removing a Widget from Your Theme
To remove a ReelPlus widget from a page:
- In the Theme Editor, click on the ReelPlus section or block
- At the bottom of the settings panel, click Remove section or Remove block
- Click Save
Removing a widget from the Theme Editor does not delete the widget from the ReelPlus dashboard. You can re-add it at any time.
Troubleshooting: Widget Not Showing Up
If your widget is not appearing on your storefront, work through these checks:
| Problem | Solution |
|---|---|
| Widget not visible on storefront | Make sure you clicked Save in the Theme Editor |
| Widget shows "No videos found" | Ensure the widget has videos assigned in the ReelPlus dashboard |
| Widget not appearing on a specific page | Check the widget's page targeting settings in the ReelPlus dashboard |
| Floating widget not showing | Verify the App Embed is toggled on in Theme Editor |
| Widget visible in editor but not live | Publish your theme if you are editing an unpublished theme version |
| Widget shows on desktop but not mobile | Check device visibility settings in both the Theme Editor and ReelPlus dashboard |
| Videos not playing | Ensure videos are fully processed (check status in ReelPlus dashboard) |
If you are using a dev preview environment, changes to theme extension files are reflected immediately without deploying. For production stores, make sure the latest version of the app is deployed.
Next Steps
Now that your widget is on your storefront, you can:
- Fine-tune the design using ReelBuilder to customize colors, badges, and layouts
- Tag products to make your videos shoppable
- Monitor performance in the Analytics dashboard to see engagement metrics