This guide is intended for experienced Shopify developers. Wrapped does not modify your theme code, and our support team is unable to write, review, or debug the code described here. If a value is entered incorrectly, clear the field, press Save to try again.
Developer tools reveal extra fields in the Gift option settings that let you control exactly where each gift block appears on the storefront, and let the theme react when a customer saves or removes gift options.
These settings are most useful for custom themes and custom-built cart drawers, where Wrapped cannot position the gift block automatically.
Turning on Developer tools
Developer tools are turned on per gift option, from the side column of the Gift option settings page.
Open the gift option you want to configure
In the side column, find the Developer tools card
Turn on Additional settings for developers
💡 This toggle only controls what you can see while you are signed in. It does not change anything on the storefront, and it does not stay on for other staff or after you close your browser. The values you enter into the developer fields are saved with the gift option — you must press Save.
What you will see
With Developer tools on, a highlighted panel appears inside each storefront gift block section under Add gift blocks to Storefront. Each panel contains three fields:
Gift Block UUID — the unique identifier for that gift block. Click it to copy.
Manual reposition with HTML class name — tells Wrapped where to place the gift block.
Javascript callback event — the name of a custom event Wrapped will fire after gifting actions.
These fields are available on every storefront gift block, for both Gifting for Orders and Gifting for Products.
Manual reposition with HTML class name
This field tells Wrapped to stop positioning the gift block automatically, and instead place it inside an element you have added to the theme.
The gift block is inserted as the first child of the matching element. It is not placed above or below it. Whatever position that container occupies in your template is the position the gift block will occupy.
Step 1 — add a container to your theme
Add an empty div with a unique class name to the theme, in the exact place the gift block should render.
<div class="gifting-for-orders-cart-drawer"></div>
The class name must not be used anywhere else in the theme, and must not be styled in a way that hides it or its children.
Step 2 — enter the class name in Wrapped
In the matching gift block section, enter the class name into Manual reposition with HTML class name, including the leading dot, then press Save.
.gifting-for-orders-cart-drawer
One container per gift block
Each gift block is configured separately and needs its own container and its own class name. Using the same class for two blocks will place both blocks in the same spot. We recommend naming each container after the gift option and the block:
Gifting for Orders, Cart page —
.gifting-for-orders-cart-pageGifting for Orders, Cart drawer —
.gifting-for-orders-cart-drawerGifting for Products, Cart page —
.gifting-for-products-cart-pageGifting for Products, Cart drawer —
.gifting-for-products-cart-drawerGifting for Products, Product page —
.gifting-for-products-product-page
Gifting for Products repeats per line item
Gifting for Products offers gift options on each item individually. For the cart page and cart drawer blocks, render the container inside your line item loop, so one container exists per line item. Wrapped places a gift block inside every element that matches.
Themes with separate mobile and desktop markup
If the theme renders separate markup for different breakpoints, add a container to each and enter both class names separated by a comma.
.gifting-for-orders-cart-drawer-desktop, .gifting-for-orders-cart-drawer-mobile
What this overrides
It replaces Wrapped's automatic positioning for that block.
It replaces our automatic detection of supported third party cart drawers. If the store uses one of the supported cart drawer apps, leave this field blank.
Theme app blocks still take priority. If a Gifting for Orders or Gifting for Products app block has been added in the theme editor, that placement wins and this field is ignored. Remove the app block if you want the class name to control the position.
The value applies to every theme on the store, not just the live one. Make sure the container exists in any theme you publish, or the gift block will not appear there.
Leave the field blank for automatic positioning. To undo a manual position, clear the field and press Save.
Javascript callback event
Custom cart drawers usually need to be told to re-render themselves after the cart changes. This field lets you name a custom Javascript event that Wrapped will fire so your drawer can refresh in place, instead of the page reloading.
Wrapped dispatches the event after a customer adds, updates, or removes gift options from the gift block controls. It is also dispatched when the cart changes elsewhere on the storefront, so your drawer stays in sync.
Setting it up
Enter any event name you like. We recommend a namespaced name so it cannot collide with theme or app events.
custom:event:cart-drawer
The event is dispatched on both document and document.documentElement, so a listener on either will receive it. The event carries no cart data — fetch the current cart in your listener.
document.addEventListener('custom:event:cart-drawer', async () => {
const response = await fetch('/cart.js')
const cart = await response.json()
// re-render your cart drawer using the updated cart
exampleFunctionRenderCartDrawer(cart)
})Turn off the page refresh
The Refresh page when gift option is saved setting reloads the whole page after gift options are saved. Wrapped fires your event first, but the page will still reload afterwards.
Once your listener re-renders the drawer correctly, turn Refresh page when gift option is saved off so customers stay in their cart.
Leave the field blank if you do not need an event.
Gift Block UUID
Each gift block has a unique identifier. Click the field to copy it to your clipboard.
Use it when contacting our support team about a specific block, and to target a single gift block with CSS. See Advanced CSS Customization for Wrapped for details.
Example — a custom cart drawer
The store has a custom-built cart drawer, and gift options for the whole order should appear directly above the checkout button.
Add
<div class="gifting-for-orders-cart-drawer"></div>to the cart drawer template, immediately above the checkout button, and save the theme.In Wrapped, open the Gifting for Orders gift option and turn on Developer tools.
In the Add to the cart drawer section, confirm the gift block is turned on.
Enter
.gifting-for-orders-cart-drawerinto Manual reposition with HTML class name.Enter
custom:event:cart-drawerinto Javascript callback event.Press Save.
Add a listener for
custom:event:cart-drawerthat re-renders the drawer.Once confirmed working, turn off Refresh page when gift option is saved and press Save.
Troubleshooting
If the gift block still does not appear after setting a class name, check the following:
The class name in Wrapped starts with a dot and matches the theme exactly.
The container element is actually present in the storefront page source at the moment the drawer or page renders.
No Gifting app block has been added to that section in the theme editor.
The container exists in the live theme, not only in a draft copy.
Wrapped is activated in the theme editor and the theme has been saved.
The gift option status is Active, and the gift block is turned on.
The products in the cart are not carrying the Wrapped visibility tag.
See Gift block is not appearing on storefront pages for the full checklist.
What Wrapped does not do
We do not add, edit, or remove code in the theme. The container element must be added on your side.
We cannot debug custom cart drawers, custom themes, or Javascript you have written.
A paid plan may be required for setup assistance on complex custom themes.