ReelTok Knowledge Base
In this article
Where to Find ItHow to Use ItWill This Affect My Theme?
Home
Customisations

How to Add Custom CSS (And Why Your Theme CSS Won't Work)

Edited

If you are trying to style your video widget using your Shopify Theme's CSS file, you might notice that nothing happens.

This is not a bug! ReelTok uses a special technology called Shadow DOM to build the video player. Think of this as a "protective bubble" around the widget.

  • The Benefit: It prevents your Shopify theme's styles from accidentally breaking the video player's layout.

  • The Trade-off: It means your global theme CSS cannot "see" or edit the inside of the video player.

To style the widget, you must use the Custom CSS box inside our app, which is programmed to inject styles directly inside that protective bubble.

Where to Find It

  1. Open the ReelTok Dashboard and select the Journey you want to edit.

  2. Click on the Customize tab in the top navigation bar.

  3. Scroll all the way to the bottom of the settings page.

  4. You will see a code box labeled Custom CSS.

How to Use It

Simply write or paste your CSS code into the box and click Save.

  • Note: You do not need to wrap your code in <style> tags. Just write the raw CSS.

Example: If you wanted to hide a specific element, you would paste:

.element-class-name {
    display: none !important;
}

Will This Affect My Theme?

No. The CSS you enter here is strictly scoped to the ReelTok widget.

  • Safe: It will only change the video player. It cannot "leak" out and accidentally change your website's header, footer, or buttons.

  • Specific: It applies only to this specific Journey. If you have a different video widget on another page, it will remain unchanged unless you add CSS to that one, too.

Shopify App