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.");

    events: function() {

      const that = this;

      window.addEventListener("DOMContentLoaded", function(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";
        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;

Can't find the answer in our documentation?
Contact Support