Skip to main content

How to apply css to your widgets

In this article, we will discuss how to apply css to your Videowise widgets.

V
Written by Videowise Support
Updated over a month ago

The process depends on Shadow DOM being either activated or deactivated.


If Shadow DOM is activated

  1. You need to create a CSS file in the assets: custom-videowise.css, and then you need to add the code you need to apply.

    For example:

    #vw-root .vw-cmp__in-video-card--root .vw-cmp__in-video-card--preview
    {
    margin-bottom:12px!important;
    }

  2. After you have created your CSS file, you need to add the following code to theme.liquid between head tags <head>{following code}</head>:

    <script> window.videowiseShadow = { mode: 'closed', assets: [{ type: 'style', src: '{{ “custom-videowise.css” | asset_url }}'}] }; </script>

If Shadow DOM is deactivated

  1. You need to create a CSS file in the assets: custom-videowise.css, and then you need to add the code you need to apply.

    E.g.:

    #vw-root .vw-cmp__in-video-card--root .vw-cmp__in-video-card--preview{margin-bottom:12px!important;}

  2. After you have created your CSS file, you need to add the following code to theme.liquid, between head tags, as follows:

    <head>
    ….
    {{ 'custom-videowise.css' | asset_url | stylesheet_tag: preload: true }}
    ….
    </head>:

Ready to boost your sales? Pick the right plan for you here.


Didn't find what you were looking for?

Talk to your support team by chat or email.

Did this answer your question?