Creating Your First Widget

This guide walks you through every step of creating a shoppable video widget — from choosing a widget type to seeing it live on your storefront. By the end, you will have an interactive video experience running on your Shopify store.

---

Before You Begin

Make sure you have completed the following:

• ReelPlus is installed on your store (see Installation)
• You have at least one video uploaded or imported into your ReelPlus video library
• You have at least one product published in your Shopify catalog

Tip: If you have not uploaded any videos yet, go to the Videos section in ReelPlus and upload or import at least one video before continuing. The Quick Start guide covers this in Step 2.

---

Step 1: Navigate to the Widgets Section

1. Open your Shopify Admin and click Apps > ReelPlus in the sidebar.
2. In the ReelPlus dashboard, click Widgets in the main navigation.
3. You will see the widgets list. If this is your first time, it will be empty.

---

Step 2: Create a New Widget

1. Click the Create Widget button.
2. You will be prompted to select a widget type. Here is a quick overview:

For your first widget, we recommend choosing Carousel — it is the most versatile format and gives you the best overview of how ReelPlus works.

3. Click on your chosen widget type to proceed.

---

Step 3: Name Your Widget

1. Enter a descriptive name for your widget (e.g., "Homepage Carousel," "Summer Collection Stories," or "New Arrivals Floating").
2. This name is only visible to you in the ReelPlus dashboard — customers will not see it.
3. A clear name helps you manage multiple widgets later.

---

Step 4: Add Videos to the Widget

1. In the widget editor, find the Videos section.
2. Click Add Videos to open the video selector.
3. You will see all videos in your ReelPlus library. Select one or more videos to include in this widget.
4. Use the checkboxes to select videos, then click Confirm or Add Selected.
5. After adding, you can drag and drop videos to reorder them. The order here determines the display order in the widget.

Tip: For a carousel widget, 4 to 8 videos is a good starting point. Too few and the carousel may feel sparse; too many and customers may not scroll through all of them.

---

Step 5: Tag Products on Your Videos

If you have not already tagged products on your videos, you can do so now:

1. Click on a video within the widget editor to open its details.
2. Find the Tagged Products section.
3. Click Add Product and search for products from your Shopify catalog.
4. Select the products you want to associate with this video.
5. Click Save.

When customers watch this video in the widget, the tagged products will appear as interactive cards they can browse and add to cart.

Note: You can tag products at any time — either from the video library or from within the widget editor. Products tagged on a video will appear in every widget that includes that video.

---

Step 6: Configure Widget Settings

The widget editor provides several settings to control how your widget looks and behaves:

Display Settings

• Autoplay — When enabled, videos begin playing automatically when they come into view (muted, per browser requirements).
• Loop — Videos restart automatically when they reach the end.
• Muted by default — Videos start without sound. Customers can unmute by clicking the volume icon.

Visibility Settings

• Device targeting — Choose to show the widget on Desktop only, Mobile only, or Both (recommended).
• Status — Toggle the widget between Active (visible on store) and Inactive (hidden).

Widget-Specific Settings

Depending on the widget type, you may see additional options:

• Carousel: Number of visible items, spacing, navigation arrows
• Story: Bubble size, animation style
• Floating: Position (bottom-left or bottom-right), size, animation
• Product Page: Layout, placement relative to product images

Configure these settings according to your preferences. You can always come back and adjust them later.

---

Step 7: Set Page Targeting

Page targeting controls which pages of your store display the widget.

1. In the widget editor, find the Targeting or Pages section.
2. Choose a targeting strategy:

3. For your first widget, we recommend targeting Home page so you can easily find and test it.

Tip: You can create multiple widgets with different targeting rules. For example, one carousel for the home page and a different one for collection pages — each with videos relevant to that context.

---

Step 8: Save and Preview

1. Review all your settings one more time.
2. Click Save to create the widget.
3. Your widget is now saved in ReelPlus, but it is not yet visible on your store. You need to add it to your theme (next step).

---

Step 9: Add the Widget to Your Theme

This is the step that makes your widget visible to customers:

1. From your Shopify Admin, go to Online Store > Themes.
2. Click Customize on your active theme to open the Theme Editor.
3. In the Theme Editor, navigate to the page where you want the widget (e.g., Home page).
4. Click Add section in the left sidebar.
5. Scroll down or search for ReelPlus in the sections list.
6. Click the ReelPlus section to add it to the page.
7. In the section settings panel on the right, select the widget you just created from the dropdown.
8. Drag the section to your preferred position on the page (above the fold is recommended for maximum visibility).
9. Click Save in the top-right corner of the Theme Editor.

Note: You only need to add the ReelPlus section to your theme once per page. After that, any changes you make to the widget in the ReelPlus app (adding videos, changing settings) will automatically reflect on your storefront.

---

Step 10: Verify on Your Storefront

1. Open your live store in a new browser tab (or click the eye icon in the Theme Editor to preview).
2. Navigate to the page where you added the widget.
3. You should see your video widget displayed on the page.
4. Click a video thumbnail to open the full-screen player.
5. Verify that tagged products appear as interactive cards.
6. Test the add-to-cart functionality from within the video player.

Congratulations — your first shoppable video widget is live!

---

What to Do Next

Now that your first widget is running, here are some recommended next steps:

• ReelBuilder — Use the visual editor to customize your widget's design, colors, fonts, and layout.
• Widget Types — Learn about each widget format in depth and create additional widgets.
• Analytics — After your widget has been live for a day or two, check the analytics dashboard to see how your videos are performing.
• Video Management — Learn advanced features like bulk upload, social media import, video compression settings, and thumbnail customization.
• Page Targeting — Set up advanced targeting rules to show different widgets on different pages.

Tip: The best-performing stores use multiple widgets across different pages. Start with a home page carousel, then expand to story widgets on collection pages and floating widgets site-wide.