You can place a storefront gift block in an exact spot in your theme, and let your theme know when a customer saves or removes gift options. Each storefront gift block in Wrapped has a Developer tools icon that opens the fields for this.

💡 These fields are for developers who edit your theme code. Leave them blank and we position each gift block for you.

Where to find it

In Wrapped, open Gifting for Products or Gifting for Orders.
Scroll to the Gift blocks card.
Under Storefront, press the Developer tools icon on a gift block row. Three fields open under the row.
Fill in a field, and then press Save.

Press the icon again to close the fields. The values you saved stay in place while the fields are closed.

Each storefront gift block has its own fields, so you set up the cart page, the cart drawer and the product page one at a time.

The three fields under a gift block row

Manual reposition with HTML class name

We find a spot for each gift block in your theme. Enter a class name in this field to choose the spot yourself. The gift block appears inside the element with that class name, as its first child.

First, add an empty element with a unique class name to your theme, in the place the gift block should appear.

<div class="gifting-for-orders-cart-drawer"></div>

Then enter the class name with its leading dot in Manual reposition with HTML class name, and press Save.

.gifting-for-orders-cart-drawer

Give each gift block its own element and its own class name. Two gift blocks with the same class name appear in the same spot.
Gifting for Products shows a gift block on each item in the cart. For the cart page and the cart drawer, add the element inside your line item loop so each item has one.
If your theme has separate mobile and desktop markup, add an element to each and enter both class names with a comma between them.
To go back to our positioning, clear the field and press Save.

💡 When a Wrapped app block is added in the theme editor, the gift block appears in the app block and the class name is not used. On most themes the app block is the simpler way to move a gift block.

Javascript callback event

Enter an event name in this field and we dispatch that event after a customer saves or removes gift options in the gift block. Dispatching the event is all we do. Your theme code listens for it and runs your own functions, for example to show the updated cart in a custom cart drawer without a page reload.

Use a name that your theme and other apps do not use.

custom:event:cart-drawer

The event is dispatched on document and on document.documentElement. It carries no cart data, so fetch the cart in your listener.

document.addEventListener('custom:event:cart-drawer', async () => {
  const response = await fetch('/cart.js')
  const cart = await response.json()

  // example only: call your own function here
  yourRenderCartDrawerFunction(cart)
})

yourRenderCartDrawerFunction is an example name and not a function we provide. Replace it with the code your theme uses to show the cart.

Gift Block UUID

Each storefront gift block has a UUID. Press the field to copy it.

The gift block on your storefront carries the same value in its uuid attribute. Use it to target one gift block with your own CSS, for example the cart drawer gift block and not the cart page gift block, and quote it when you write to our support team about one gift block.

The checkout gift block

The checkout gift block has no Developer tools icon. You choose its position in Shopify’s checkout editor, in your checkout profile, and not in Wrapped.

Recap

The Developer tools icon on a storefront gift block row opens three fields for that gift block.
Manual reposition with HTML class name places the gift block inside an element you add to your theme.
Javascript callback event names an event we dispatch after a customer saves or removes gift options. Your own code listens for it and does the rest.
Gift Block UUID identifies one gift block, so your CSS can target it.
The checkout gift block is positioned in your checkout profile.