Adding a Banner to the Box Builder 🎁

To add a banner image above the Giftship Box Builder, follow the below steps.

First, upload your banner image in the Shopify admin (Content -> Files) and copy the link.

Open your theme’s code editor (Online Store -> Themes -> Edit code) and in the Assets directory create a new blank Javascript file with a .js extension. Paste the below text into the file and add the URL and alt text of your banner image in the appropriate lines between quotes.

(() => {

  gsBuilderBanner = {

    state: {
      bannerUrl: "____________", /*** IMAGE URL HERE ***/
      bannerAlt: "____________"  /*** ALT TEXT HERE ***/
    },

    init: function () {

      if (!this.state.bannerUrl) {
        console.warn("Banner URL not set.");
        return;
      }
  
      this.events();
    },

    events: function() {

      const that = this;

      window.addEventListener("DOMContentLoaded", function(e) {
        that.handleBanner(e);
      });

    },

    handleBanner: function(e) {

      const gsBuilderRoot = document.getElementById('boxBuilderRoot');
      const parentNode = gsBuilderRoot && gsBuilderRoot.parentNode;
  
      if (gsBuilderRoot && parentNode) {
        const bannerEl = document.createElement('img');
        bannerEl.src = this.state.bannerUrl;
        bannerEl.setAttribute('alt', this.state.bannerAlt);
  
        const wrapperEl = document.createElement('div');
        wrapperEl.className = "gs__box-builder-banner";
        wrapperEl.appendChild(bannerEl);
  
        parentNode.insertBefore(wrapperEl, gsBuilderRoot);
      }
    
    }

  };

  gsBuilderBanner.init();

})();

Next, embed the script in your theme.liquid file, just above the closing body tag </body>, ensuring the file is named correctly.

<script src="{{ 'box-builder-banner.js' | asset_url }}" defer="defer"></script>

You can style the banner with CSS by targeting the image’s wrapper element .gs__box-builder-banner { … } or the image itself .gs__box-builder-banner img { … }. Styles can be added to the Box Builder CSS editor (Giftship dashboard -> Manage Box Builders -> Box Builder Settings).

For example, the styles below could be used to center the image.

.gs__box-builder-banner {
	display: flex;
}

.gs__box-builder-banner img {
	margin: 0 auto;
}