Branding & Colors

Your widgets should feel like a natural part of your store, not a bolted-on third-party tool. ReelPlus gives you full control over colors, branding, and visual styling so every video widget blends seamlessly with your brand.

Color Palette Configuration

ReelPlus provides six core color settings that control the entire look and feel of your widgets. You can configure each one independently to achieve the exact visual style you want.

Primary Color

The primary color is applied to your main interactive elements:

• Play buttons on video thumbnails
• Active navigation indicators (dots, arrows)
• Selected states on product cards
• Progress bars during video playback

Choose a color that matches your store's primary brand color. This is typically the same color used for your main call-to-action buttons throughout your Shopify theme.

Secondary Color

The secondary color is used for supporting visual elements:

• Card backgrounds for product overlays
• Secondary button fills (e.g., "View Product" buttons)
• Hover states on interactive elements
• Dividers and borders within widgets

This color should complement your primary color and is often a softer or muted variation of your brand palette.

Accent Color

The accent color draws attention to high-priority actions:

• "Add to Cart" buttons inside video modals
• Links and clickable text within widgets
• Notification badges (e.g., sale tags, new indicators)
• Call-to-action highlights

Choose a color that creates contrast and encourages clicks. Many stores use a bold or vibrant tone here to drive conversions.

Text Color

The text color controls all typography within your widgets:

• Product titles displayed on video cards
• Pricing information shown in overlays
• Descriptive text and labels
• Navigation labels where applicable

Make sure this color has strong contrast against your background colors. Poor contrast makes text hard to read and hurts accessibility.

Light Background

The light background color is used when your widget renders in light mode:

• Widget container background
• Product card backgrounds
• Modal overlay backgrounds
• Tooltip and popup backgrounds

This defaults to white (#FFFFFF) but you can adjust it to match your store's light theme, such as an off-white or cream tone.

Dark Background

The dark background color is used for dark mode rendering and specific overlay contexts:

• Full-screen modal backgrounds
• Video overlay gradients
• Dark mode widget containers
• Shadow and depth layers

This defaults to near-black (#1A1A1A) and is used heavily in the video modal player where a dark environment improves the viewing experience.

How to Change Colors

Using the Color Picker

The built-in color picker provides a fast and precise way to select colors:

• Gradient panel: Drag the selector dot to choose saturation and brightness
• Hue slider: Drag the rainbow bar to change the base hue
• Hex field: Paste a hex code directly from your brand guidelines or design tool
• Preview swatch: See the selected color before committing

Matching Your Store Colors

If you want to match your Shopify theme colors exactly:

1. Open your Shopify Admin and go to Online Store > Themes > Customize
2. Click Theme settings (the paint brush icon)
3. Open the Colors section
4. Note the hex codes for your primary, secondary, and accent colors
5. Paste those same hex codes into ReelPlus branding settings

This ensures pixel-perfect color matching between your theme and your video widgets.

Remove ReelPlus Branding

On the Free plan, a small "Powered by ReelPlus" badge appears on your widgets. This is a subtle text link placed at the bottom of the widget and does not interfere with the user experience.

To upgrade and remove branding:

1. Go to Settings > Plans in your ReelPlus dashboard
2. Select the Starter or Enterprise plan
3. Confirm the upgrade through Shopify billing
4. The branding badge disappears automatically from all widgets

Custom CSS Injection

For advanced users who need pixel-level control beyond the color palette, ReelPlus supports custom CSS injection. This lets you override any default widget style with your own CSS rules.

How to Add Custom CSS

1. Navigate to Settings > Branding in ReelPlus
2. Scroll down to the Custom CSS section
3. Enter your CSS rules in the code editor
4. Click Save to apply

Example: Custom CSS Snippets

Change the border radius on product cards:

.reelplus-product-card {
  border-radius: 16px;
}

Customize the play button size:

.reelplus-play-icon svg {
  width: 64px;
  height: 64px;
}

Add a custom font to widget titles:

.reelplus-product-title {
  font-family: 'Your Custom Font', sans-serif;
  font-weight: 600;
}

Adjust spacing between carousel items:

.reelplus-carousel-item {
  margin: 0 8px;
}

CSS Specificity Tips

ReelPlus widgets use scoped class names starting with reelplus-. When writing custom CSS:

• Use the .reelplus- prefix classes for reliable targeting
• Avoid using !important unless absolutely necessary
• Test across different browsers (Chrome, Safari, Firefox)
• Check both light and dark mode if your store supports them

Tips for Matching Your Store's Brand

Here are practical strategies to make your video widgets feel native to your store:

1. Use Your Exact Brand Colors

Do not approximate. Copy the exact hex codes from your brand style guide or theme settings. Even a slight color difference can make widgets feel out of place.

2. Match Border Radius Styles

If your store uses rounded corners (e.g., border-radius: 12px), apply the same radius to widget elements via custom CSS. If your store uses sharp corners, keep the widget styling angular as well.

3. Maintain Font Consistency

While ReelPlus inherits your store's base font by default, some themes use different fonts for headings versus body text. Use custom CSS to match the specific font family if needed.

4. Align Button Styles

Your "Add to Cart" button inside the video modal should look identical to the one on your product pages. Match the color, border radius, padding, and text style.

5. Consider Your Photography Style

If your store uses a minimal, clean aesthetic, choose subtle widget colors with plenty of whitespace. If your brand is bold and colorful, do not be afraid to use vibrant accent colors in your widgets.

6. Test on Real Products

Preview your color choices with actual product videos from your store, not just in the settings panel. Colors can look different when paired with real video content and product imagery.

Dark Mode Support

ReelPlus widgets automatically adapt to dark mode contexts:

• Video modal: Always uses a dark background for optimal viewing
• Carousel widget: Adapts based on the container's background color
• Floating widget: Uses your configured dark background color
• Story widget: Uses dark backgrounds for immersive full-screen experience

How Dark Mode Works

The widget detects the background color of its container element on your storefront. If the detected background is dark (low luminance), the widget automatically switches text and UI elements to light colors for readability.

You can fine-tune this behavior by setting your Light Background and Dark Background colors explicitly in the branding settings.

Forcing a Specific Mode

If automatic detection does not produce the result you want, use custom CSS to force a specific color scheme:

/* Force light text on a dark section */
.your-section .reelplus-widget-container {
  --reelplus-text-color: #FFFFFF;
  --reelplus-bg-color: #1A1A1A;
}

Your widgets are an extension of your brand. Take the time to configure colors, remove branding if desired, and fine-tune the visual details. A well-branded widget builds trust and drives more engagement from your customers.