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