Opus Cart

1. Enter the Opus-cart app in your Shopify account, and head to --> Cart editor
   --> choose your preferred cart --> Settings (in cart editor settings)
   ​

2. Scrolling down you'll see the opportunity to inject custom CSS and a custom script.
   ​

3. Once custom script and custom CSS is injected (see guide below), remember to press save in the top, if not, your changes will be lost.

Inject custom Script

Copy / Paste the below script into the custom script section, ensuring that Contribe will be visible in your Opus Cart.

const pluginId = Shopify.shop;
const elementId = "contribe_cart_AdnBlL2VQWHdnNkhQd__15544858337871171860";
const scriptSrc = "https://plugins.contribe.io/cdn/v1/plugin.mjs";

const tryInject = () => {
const target = query("#opus-drawer-id .cd-product-list");
const existingPlugin = query(`#opus-drawer-id .cd-product-list > #${elementId}`);
if (target && !existingPlugin) {
    console.log("[Contribe] Injecting plugin...");
    
    const plugin = document.createElement("contribe-plugin");
    plugin.id = elementId;
    plugin.className = elementId;
    plugin.setAttribute("pluginId", pluginId);
    plugin.setAttribute("market", "dk");

    target.appendChild(plugin);

    // Re-inject the plugin script
    const script = document.createElement("script");
    script.type = "module";
    script.src = scriptSrc;
    document.head.appendChild(script);

    console.log("[Contribe] Plugin and script injected.");
} else if (!target) {
    console.log("[Contribe] Waiting for .cd-product-list...");
} else {
    console.log("[Contribe] Plugin already exists.");
}
};

tryInject();

const observer = new MutationObserver(tryInject);
observer.observe(shadowRoot, { childList: true, subtree: true });

Inject custom CSS

Copy / Paste the below script into the custom CSS section, ensuring that you are able to style the Contribe Plugin in your cart.

Remember that you are able to change colours, fonts, font sizes, borders, etc. by changing the variables within the custom CSS.
​
You can access an overview of all CSS variables in this article

#contribe_cart_AdnBlL2VQWHdnNkhQd__15544858337871171860 {
    display: block;

    --contribe-project-background: #ffffff;
    --contribe-project-active-background: #daf8ff;
    --contribe-project-icon-color: #000000;
    --contribe-project-icon-size: 22px;

    --contribe-selector-project-description-title: #000000;
    --contribe-selector-project-description-description: #000000;
    --contribe-project-active-icon-color: #000000;

    --contribe-font: inherit;
    --contribe-font-large: 14px;
    --contribe-font-small: 11px;

    --contribe-project-description-background: #ffffff;
    --contribe-project-padding: 4px;

    --contribe-container-border: none;
    --contribe-container-border-radius: 0px;
    --contribe-container-padding: 0px;

    --contribe-project-border-radius: 10px;
    --contribe-project-description-border-radius: 10px;
    --contribe-project-border: 1.5px solid #000;
    --contribe-project-description-border: 1.5px solid #000;
    --contribe-project-description-padding: 5px;

    max-width: 500px;
}

NB: Contribe will not be visible within the cart preview on the right side of the screen