How to position a theme block above the “Check out” button in the Cart template?
Reproduction steps
Hi team
I’m wondering if it is possible to place a theme block extension above the “Check out” button in on the Cart template?
We could do this previously by placing it in the Cart summary section but it seems this is no longer an available option. If the block renders below the checkout button then it can be missed by the customer if it’s viewed on a mobile for example.
Hey hey @simon_b - hope all’s well. could you confirm which theme and version you’re testing with, and whether this is the cart page or cart drawer?
I checked Horizon’s current public theme code, and if that’s the theme you’re using, its Cart section renders app blocks after the static Cart summary containing the checkout button (more info here). So, just confirming there isn’t currently an editor-only way to position one above the button in an unmodified Horizon theme.
It would also be helpful to know whether you see the same placement on a fresh copy of the theme as well if you’re not using Horizon. Hope to hear from you soon!
Hey @Alan_G doing great thanks mate, hope all’s well with you too.
Yes was predominately the Horizon theme, and another called Savor. I was testing this on a couple of versions 3.4, 3.5, I haven’t tried the latest yet. I’d like to place the theme block above the checkout button on the Cart template if possible, I’m not sure how to add blocks to the Cart Drawer, doesn’t seem to be a way to do that in the editor either, which would also be nice.
So it sounds like if I want to target the cart summary for example I’d need to mount the block using JS via an app embed, is that correct?
You truly won’t find any app which does this perfectly. Most apps just store a list of selectors from themes and page builders and have a best-effort approach that works most of the time
Usually the best way to work through this is to release the app as compatible for the most popular themes, then just work your way up after seeing the different themes merchants have. What makes cross theme compatibility nearly impossible is merchants with custom storefronts or heavily customized themes, in that case I recommend some flags via metafields to use on those shops when contact you via support, like a “checkout button selector” setting in your app
Yeah seems kinda fraught with issues / constant support requests, that’s why I was hoping for a theme editor solution. Would be nice if Shopify standardised this some how, but I understand that would be quite difficult in the wild.
