Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How can I add an app embed into a cart drawer effectively?

How can I add an app embed into a cart drawer effectively?

magnus_ch
Shopify Partner
2 0 1

Adding an app block to the cart page (or any theme page) is straight forward and well documented. It is however quite common for stores to favor a cart drawer over the page.
 
How to add anything to the cart drawer (in specific) is on the other hand not well documented and inquiries has for some reason gone unanswered (please correct me if I'm wrong) in the past in this forum
 
Checking out the app store reveals multiple "upsell" apps which appear in the drawer, so clearly there are ways forward. This Shopify page showcases one of them, as an app embed.
 
An app embed is only possible to add to either the header or the body, not directly to any part of the theme. Programmatically moving the app embed element from the body into the drawer is easy, but feels hacky compared to the clean approach of the app blocks. The element also, not surprisingly, disappear at first refresh of the drawer (adding, updating or removing anything).
 
In the hope that any Shopify Staff or a supportive partner can assist:
 

  • What is the correct/recommended way to add an app embed into the cart drawer (of the Dawn theme for example)?
Replies 3 (3)

mikefortney
Shopify Partner
16 0 10

I am wondering the same thing. It does not seem possible to add app blocks to the cart drawer at this time. Hopefully sometime over the next year it will be made possible since script tags are going to be deprecated in 2025.

EricMainhard
Shopify Partner
7 0 2

Hi @magnus_ch did you found any solution to this? I'm exactly on the same situation, with the same doubts

magnus_ch
Shopify Partner
2 0 1

Hi @EricMainhard,

No. I was able to put together a test using the Section Rendering API,  and modifying the returned HTML (for the dawn theme) to fit into an embedded drawer. But already at this stage was this not a workable solution - since the returned HTML is theme/version-specific (to my knowledge at least). I couldn't really find a 100% workable way to control and update the state of the drawer either.

 

The above was the result of a lot of searching and putting clues together. Maybe it was the correct path, but it felt wrong from the beginning.

With official workable APIs / methods none of this would be a challenge. For example fetching the raw data of the cart or listening to a cart-update event etc etc.