> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.adoric.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add CSS customize code to Adoric bundle

# How to add CSS customization code to Adoric bundle?

**You need to add the CSS code to the Product Page using the Liquid Block via theme editor**

![](https://storage.crisp.chat/users/helpdesk/website/-/7/d/6/7/7d6794400faa1000/cleanshot-2025-09-10-at-184813_16adkvk.png =400x190)




Please use the template: 

<script>
---
  <script>
  (() => {
    function execFn(element) {
        const style = document.createElement("style");

        style.textContent = `
            // YOUR CUSTOM CSS CODE
        `;

        element.shadowRoot.appendChild(style);
    }
      
    function createObserver(tag) {
      const element = document.querySelector(tag);

      if (element) {
        execFn(element);

        return;
      }

      const observer = new MutationObserver(() => {
          const element = document.querySelector(tag);
      
          if (!element) return;
      
          execFn(element);
  
          observer.disconnect();
      });
  
      observer.observe(document.body, {
          childList: true,
          subtree: true,
      });
    }

    // tag for observer varies on campaign type
    createObserver('adoric-bundle-mark-two');
  })();
</script>
---