> For the complete documentation index, see [llms.txt](https://help.winday.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.winday.co/publish-campaigns/publish-on-website/shopify.md).

# Shopify

### Plugin Integration

Shopify can be installed into your Shopify website.

1. Go to **Online Store - Themes** and select “**Edit code**” of your current theme.

<figure><img src="https://4030329530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTP9pFZ2vkhu9r1UmFiPi%2Fuploads%2F5clfC2NfERHeBdhRF8dB%2Fshopify-1.png?alt=media&amp;token=c0e978d1-285b-4ae8-9da1-b12c8ad4b156" alt=""><figcaption></figcaption></figure>

2. Make changes in “theme.liquid” file.&#x20;

Add the script below to the end of the HTML document body (before the \</body>). Fill in these instructions with your settings (see [description of each setting](#plugin-settings)).

{% code overflow="wrap" %}

```markup
<script>
        var dmBrandId = "YOUR_BRAND_ID"; //Should be taken from Brand Panel
        var dmBannerBtnSelector = "#openBannerBtn";

        var dmDesktopConfig = {
            buttonPosition: "bottom_right", //"bottom_right", "bottom_left"
            buttonMarginLeft: 0,
            buttonMarginRight: 0,
            buttonMarginBottom: 0,
            buttonScale: 70,
        };

        var dmMobileConfig = {
            buttonPosition: "bottom_right", //"bottom_right", "bottom_left"
            buttonMarginLeft: 0,
            buttonMarginRight: 0,
            buttonMarginBottom: 0,
            buttonScale: 40
        };
    </script>
<script  type="text/javascript" src="https://dm-plugin-assets.s3.us-east-2.amazonaws.com/dm-games-bundle.js"></script>
```

{% endcode %}

Preview:

<figure><img src="https://4030329530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTP9pFZ2vkhu9r1UmFiPi%2Fuploads%2Fecxed9DaDGzlLbxubVqy%2Fshopify-2.png?alt=media&amp;token=55662821-c0c0-4846-a3cd-0c4c8f85ff64" alt=""><figcaption></figcaption></figure>

3. Go back to the Brand Panel and Approve the Request to connect the plugin to the Brand Panel.

### Plugin settings

{% hint style="info" %}

1. **dmBrandId** (required) - brand Id, that can be taken from the Brand panel
2. **dmBannerBtnSelector** - if website owner wants to make some element of his page clickable to open a plugin - a CSS selector of this element must be provided with this option
3. **dmDesktopConfig.buttonScale, dmMobileConfig.buttonScale** (%) - Discounter Mania button can be downscaled if needed (1-100% of the original size); set option separately for desktop and mobile screen resolutions
4. **dmDesktopConfig.buttonPosition, dmMobileConfig.buttonPosition** - where the button should be placed - "bottom\_right", "bottom\_left" (position of a button is always fixed - it will not disappear from the screen once page is scrolled); set option separately for desktop and mobile screen resolutions
5. **dmDesktopConfig.buttonMarginLeft, dmMobileConfig.buttonMarginLeft** (in pixels) - button can be shifted to the right if needed (if Left bottom position was selected); set option separately for desktop and mobile screen resolutions
6. **dmDesktopConfig.buttonMarginRight, dmMobileConfig.buttonMarginRight** (in pixels) - button can be shifted to the left if needed (if Right bottom position was selected)
7. **dmDesktopConfig.buttonMarginBottom, dmMobileConfig.buttonMarginBottom** (in pixels) - button can be shifted to the top if needed

Please note that the plugin will not work without a Brand ID.
{% endhint %}