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.

(() => {

  const bannerUrl = "____________"; /*** IMAGE URL HERE ***/
  const bannerAlt = "____________"; /*** ALT TEXT HERE ***/
  
  window.addEventListener("DOMContentLoaded", (e) => {
    const gsBuilderRoot = document.getElementById('boxBuilderRoot');
    const parentNode = gsBuilderRoot && gsBuilderRoot.parentNode;

    if (gsBuilderRoot && parentNode) {
      const bannerEl = document.createElement('img');
      bannerEl.src = bannerUrl;
      bannerEl.setAttribute('alt', bannerAlt);

      const wrapperEl = document.createElement('div');
      wrapperEl.className = "gs__box-builder-banner";
      wrapperEl.appendChild(bannerEl);

      parentNode.insertBefore(wrapperEl, gsBuilderRoot);
    }
  });
})();

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;
}