ReelBuilder Visual Editor
Customize your widgets with the drag-and-drop ReelBuilder editor to match your brand perfectly
What Is ReelBuilder?
ReelBuilder is the visual drag-and-drop editor built into ReelPlus that lets you fully customize the appearance and behavior of your video widgets. Instead of writing code or tweaking complex settings, you can visually design your widget's look and feel -- from fonts and colors to element positions and interactive behaviors.
ReelBuilder gives you complete control over every visual element of your widget, ensuring it matches your store's brand identity perfectly.
How to Access ReelBuilder
Navigate to Your Widget
Go to ReelPlus > Widgets and open the widget you want to customize.
Click "Customize with ReelBuilder"
On the widget edit page, click the "Customize with ReelBuilder" button. This opens the visual editor in a full-screen interface.
Start Editing
The ReelBuilder editor loads with your widget's current configuration. You can immediately begin making changes.
Interface Overview
ReelBuilder uses a three-panel layout designed for efficient editing:
+------------------+----------------------------+------------------+
| | | |
| Left Sidebar | Center Preview | Right Sidebar |
| | | |
| Navigator | Live Widget | Settings |
| Tree | Preview | Panels |
| | | |
| - Widget | | - Typography |
| - Elements | [Your widget as | - Colors |
| - Structure | customers see it] | - Spacing |
| | | - Behavior |
+------------------+----------------------------+------------------+Left Sidebar: Navigator Tree
The Navigator shows your widget's complete structure as a hierarchical tree:
| Element | Description |
|---|---|
| Widget Root | The top-level container for your entire widget |
| Template | The active template controlling overall layout |
| Heading | Widget title element (e.g., "Shop Our Videos") |
| Play Icon | The play button overlay on video thumbnails |
| Badges | Visual badges (e.g., "NEW", "SALE") on videos |
| Navigation | Previous/Next navigation arrows |
| Product Elements | Shopify product info (title, price, rating, cart button) |
Click any element in the navigator to select it and see its settings in the right sidebar.
Center: Live Preview
The center panel shows a real-time preview of your widget exactly as it will appear on your storefront. As you modify settings, the preview updates instantly so you can see every change before saving.
Right Sidebar: Settings Panels
When you select an element, the right sidebar displays all available settings for that element. Settings are organized into logical sections such as typography, colors, spacing, and behavior.
Adding Elements
ReelBuilder offers three categories of elements you can add to your widget:
Widget Elements
These are elements specific to the video widget functionality:
| Element | Description | Use For |
|---|---|---|
| Heading | A customizable title above the widget | "Shop the Look", "Featured Videos", etc. |
| Play Icon | The play button overlay on video thumbnails | Indicating videos are playable |
| Badges | Small labels on video thumbnails | Highlighting new, featured, or promotional content |
| Navigation | Arrow buttons for carousel scrolling | Letting users browse through videos |
Shopify Elements
Native Shopify product elements that display real product data:
| Element | Description | Data Source |
|---|---|---|
| Product Title | The product name | Shopify product catalog |
| Product Price | Current and compare-at price | Shopify pricing |
| Star Rating | Product review stars | Shopify product reviews |
| Add to Cart | Add-to-cart button | Shopify cart API |
Basic Elements
General-purpose elements for additional customization:
| Element | Description | Use For |
|---|---|---|
| Button | A customizable button | CTAs, links to collections, custom actions |
| Text | A text block | Descriptions, promotional copy, disclaimers |
| Image | An image element | Logos, icons, decorative graphics |
How to Add an Element
Open the Add Element Menu
Click the "+" button or "Add Element" in the left sidebar.
Browse Categories
Elements are organized into the three categories above. Browse or search for the element you need.
Click to Add
Click on the element to add it to your widget. It will appear in the navigator tree and in the live preview.
Position and Configure
Select the newly added element and use the right sidebar to configure its appearance and behavior.
Widget-Specific Elements: Not all elements are available for every widget type. For example, Story widgets support a focused set of elements optimized for the vertical story format. The Add Element menu automatically shows only the elements compatible with your current widget type.
Editing Elements
Selecting an Element
You can select elements in two ways:
- Click in the Navigator (left sidebar) to select from the tree structure
- Click in the Preview (center panel) to select visually
The selected element is highlighted in both the navigator and preview, and its settings appear in the right sidebar.
Common Settings
Most elements share these configurable properties:
Typography
| Setting | Options | Description |
|---|---|---|
| Font family | Theme fonts + Google Fonts | Choose the typeface |
| Font size | Numeric (px, em, rem) | Control text size |
| Font weight | Light, Regular, Medium, Bold | Text thickness |
| Text color | Color picker + hex input | Text color |
| Text alignment | Left, Center, Right | Horizontal alignment |
| Line height | Numeric | Space between lines |
| Letter spacing | Numeric | Space between characters |
Colors
| Setting | Options | Description |
|---|---|---|
| Background color | Color picker + hex + transparency | Element background |
| Border color | Color picker + hex | Border color |
| Hover color | Color picker + hex | Color on mouse hover |
| Opacity | 0 - 100% | Element transparency |
Spacing
| Setting | Options | Description |
|---|---|---|
| Padding | Top, Right, Bottom, Left (px) | Inner spacing |
| Margin | Top, Right, Bottom, Left (px) | Outer spacing |
| Border radius | Numeric (px) | Corner roundness |
| Border width | Numeric (px) | Border thickness |
Behavior
| Setting | Options | Description |
|---|---|---|
| Visibility | Show / Hide | Toggle element visibility |
| Hover effects | Scale, Shadow, Color change | Interactive feedback |
| Animation | Fade, Slide, None | Entry animation |
Templates
ReelBuilder comes with pre-built templates that give you a professional starting point for your widget design.
Using Templates
Open Template Selection
In the widget settings or navigator, click on the Template element.
Browse Available Templates
View the template gallery with live previews of each option.
Apply a Template
Click to apply a template. Your widget instantly updates to the new design.
Customize Further
Every template is fully customizable. After applying, modify any element to match your brand.
Template Types
| Template Style | Description | Best For |
|---|---|---|
| Minimal | Clean, simple design with subtle accents | Modern, minimalist brands |
| Bold | Strong colors and prominent elements | Fashion, lifestyle, high-energy brands |
| Integrated | Blends seamlessly with your Shopify theme | Any store wanting a native feel |
| Custom | Start from scratch with a blank canvas | Full creative control |
Template + Customization: Templates are just starting points. Every color, font, size, and spacing value can be modified after applying a template. Think of templates as design blueprints that save you setup time.
Preview Modes
ReelBuilder lets you preview your widget across different device sizes to ensure a great experience everywhere:
Desktop Preview
The default view shows your widget as it appears on desktop screens (1200px+ width). Use this to verify:
- Overall layout and proportions
- Navigation arrows and hover effects
- Full-width element behavior
Mobile Preview
Switch to mobile preview to see how your widget adapts to smaller screens. Verify:
- Touch-friendly element sizes
- Readable text at mobile size
- Proper stacking and scrolling
- Swipe gestures work correctly
How to Switch
Click the device icons at the top of the center preview panel to toggle between desktop and mobile views. The preview resizes in real-time.
Always test both views before saving. An element that looks perfect on desktop might be too small or improperly positioned on mobile. Most of your customers will likely browse on mobile devices.
Save and Publish Changes
Saving Your Work
Review Your Changes
Use both desktop and mobile preview modes to verify your design looks correct.
Click Save
Click the Save button in the top-right corner. Your changes are saved and will be reflected on your live storefront.
Verify on Your Store
Open your storefront in a new tab and navigate to a page with your widget to confirm the changes look correct in your actual theme.
Important Notes
| Note | Details |
|---|---|
| Auto-save | ReelBuilder does not auto-save. Always click Save before leaving the editor. |
| Undo | You can undo recent changes within the current session using Ctrl+Z (Cmd+Z on Mac) |
| Discard changes | Close the editor without saving to discard all changes |
| Live updates | Saved changes are reflected on your live store immediately |
Tips for Great Widget Design
Design Principles
- Match your brand -- Use your store's fonts, colors, and visual style for a cohesive experience
- Keep it clean -- Avoid cluttering the widget with too many elements. Let the videos be the star
- Contrast matters -- Ensure text and buttons have sufficient contrast against video thumbnails
- Mobile first -- Design for mobile screens first, then enhance for desktop
Common Customizations
| Goal | What to Customize |
|---|---|
| Match store colors | Background, button, and text colors |
| Match store fonts | Heading and body font families |
| Remove distractions | Hide elements you don't need (badges, heading) |
| Enhance CTAs | Style the Add to Cart button to stand out |
| Add branding | Use the heading element with your brand voice |
| Improve readability | Increase font size and contrast on product cards |
Performance
- Use system or theme fonts when possible (they load faster than custom fonts)
- Keep the design simple -- fewer custom elements mean faster rendering
- Test on real devices, not just browser preview, for the most accurate performance picture