How to apply CSS to your widgets
In this article, we will discuss how to apply css to your Videowise widgets.
The process depends on Shadow DOM being either activated or deactivated.
If Shadow DOM is activated
- 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;}- After you have created your CSS file, you need to add the following code to
theme.liquidbetween 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
- 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;}- 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>:Didn't find what you were looking for?
Talk to our support team via email.
Did this answer your question?
😞
😐
🤩
Last updated on December 8, 2025