Remove Blocks Based on Country

In this tutorial, we’ll guide you through removing a block from the product, cart, drawer, and multiship views based on the customer’s country.

Step 1: Duplicate Your Live Theme

Always work on a duplicated development theme to ensure your live store remains unaffected by changes.

Step 2: Create and Upload the Snippet

1. Navigate to the Assets folder of your theme.
2. Create a new JavaScript file named giftship-country.js.
3. Copy and paste the following code into the file:

(() => {

    const MODULE = {

        Country: "US", // CA
        inputName: "date",

        init: function () {
            this.registerEventHandlers();
        },

        getUser: function () {
            return {
                customerCountry: Shopify.country,
                currentPage: window.GSSDK.page.get(),
            };
        },

        registerEventHandlers: function () {
            document.addEventListener('giftship.loaded', this.handleGiftshipLoaded.bind(this));
            document.addEventListener('giftship.shipping.ready', this.handleShippingLoaded.bind(this));
            document.addEventListener('giftship.drawer-cart.opened', this.handleDrawerOpened.bind(this));
        },

        handleGiftshipLoaded: function () {
            const { customerCountry, currentPage } = this.getUser();

            if (customerCountry === this.Country) {
                if (currentPage === "product") {
                    this.removeDivs(`[data-child-name="${this.inputName}"]`, '#gsAppContainer');
                } else if (currentPage === "cart") {
                    this.removeDivs(`[data-child-name="${this.inputName}"]`, '#gsAppContainer');
                }
            }
        },

        handleShippingLoaded: function () {
            const { customerCountry, currentPage } = this.getUser();

            if (customerCountry === this.Country && currentPage === "multi-shipping") {
                this.removeDivs(`[data-child-name="${this.inputName}"]`, '#gsMultishippingPage');
            }
        },

        handleDrawerOpened: function () {
            const { customerCountry } = this.getUser();

            if (customerCountry === this.Country) {
                this.removeDivs(`[data-child-name="${this.inputName}"]`, '#gsDrawer');
            }
        },

        removeDivs: function (selector, containerId) {
            const container = document.querySelector(containerId);

            if (!container) return;

            const divs = container.querySelectorAll(selector);

            if (divs.length === 0) {
                const observer = new MutationObserver((mutations, obs) => {
                    const newDivs = container.querySelectorAll(selector);
                    if (newDivs.length > 0) {
                        newDivs.forEach(div => div.remove());
                        obs.disconnect();
                    }
                });

                observer.observe(container, { childList: true, subtree: true });
            } else {
                divs.forEach(div => div.remove());
            }
        },
    };

    MODULE.init();

})();

Step 3: Replace the Block Name & Country Code

Replace the block name (e.g., “Date”) with the desired block you want to modify, and replace the country (e.g., “US”) with the desired country you want the block removed for.

Step 4: Edit theme.liquid to Include the Snippet

1. Open theme.liquid in your theme editor.
2. Scroll to the bottom of the file, just above the closing </body> tag.
3. Paste the following code:

<!-- Include your new JavaScript file here -->
<script src="{{ 'giftship-country.js' | asset_url }}"></script>

Step 5: Test

Open your browser’s console and type “Shopify” to expose the Shopify global object. You will see the country code you are currently viewing. You can switch country codes by visiting: Giftship > Settings > Markets and previewing the corresponding market.