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