The Checkout Button Injector is a Firmhouse Shopify theme app embed for non-Shopify Plus stores. It finds the existing checkout button on your cart page, cart drawer, or slide-out cart, then adds the checkout buttons needed for local payment method subscription checkouts. When you use local payment methods such as iDEAL | Wero, Bancontact, Pay by Bank, or Trustly for subscriptions, customers need a checkout path that is prepared for SEPA-compatible payment methods. The Checkout Button Injector adds that path by creating a local-payment checkout button next to, or instead of, the regular Shopify checkout button. Shopify Plus stores normally do not need the Checkout Button Injector. On Shopify Plus, use the Local Payment Method Switcher checkout extension instead.Documentation Index
Fetch the complete documentation index at: https://docs.firmhouse.com/llms.txt
Use this file to discover all available pages before exploring further.
When to enable it
Enable the Checkout Button Injector when all of the following apply:- Your store is not on Shopify Plus
- You offer subscriptions with local payment methods on Shopify Checkout
- Customers check out from a cart page, cart drawer, or slide-out cart
- You want Firmhouse to add and manage the separate local-payment checkout button
Enable the app embed
- In Shopify Admin, go to Online Store > Themes
- Click Customize for the active theme
- Open App embeds
- Enable Checkout Button Injector
- Configure the settings for your theme or cart app
- Click Save
Recommended setup
For most non-Shopify Plus stores, use:- Original Checkout Button Selector:
button[name='checkout'] - Button Display Mode: Two buttons for subscription
- Regular Button Payment Icons:
visa,master,paypal - SEPA Payment Icons:
ideal,bancontact - Hide buttons when cart is empty: enabled
Settings reference
Original Checkout Button Selector
The CSS selector for the checkout button that Firmhouse should replace or use as the insertion point. The default is:Button Display Mode
Controls which buttons are shown for carts with and without subscription products. Always show two buttons always shows both the regular checkout button and the local-payment checkout button. Replace with SEPA button for subscription keeps the original checkout button for carts without subscriptions and shows only the local-payment checkout button for carts with subscriptions. Two buttons for subscription keeps the original checkout button for carts without subscriptions and shows both the regular checkout button and the local-payment checkout button for carts with subscriptions. This is the recommended setting for most stores. Regular for normal, SEPA for subscription hides the original checkout button, shows a Firmhouse-managed regular checkout button for carts without subscriptions, and shows only the local-payment checkout button for carts with subscriptions. Regular for normal, both for subscription hides the original checkout button, shows a Firmhouse-managed regular checkout button for carts without subscriptions, and shows both Firmhouse-managed buttons for carts with subscriptions.Regular Button Content
The text or Liquid content for the regular checkout button. This button sends customers through the normal Shopify checkout path for credit card, PayPal, or one-time purchase checkouts.Regular Button Payment Icons
A comma-separated list of payment icons shown on the regular checkout button, for example:Regular Button Additional Classes
Extra CSS classes added to the regular checkout button. Use this when your theme needs a specific class for button styling.SEPA Button Content
The text or Liquid content for the local-payment checkout button. This button sends customers through the checkout path used for local payment method subscriptions.SEPA Payment Icons
A comma-separated list of payment icons shown on the local-payment checkout button, for example:SEPA Button Additional Classes
Extra CSS classes added to the local-payment checkout button. Use this when your theme needs a specific class for button styling.Show SEPA button before regular button
When enabled, the local-payment checkout button appears before the regular checkout button.Stop observing after first injection
Stops the button injector after it has found and replaced the first matching checkout button. Only enable this if your cart button is rendered once and never re-rendered by the theme or cart app. Leave it disabled for cart drawers, slide-out carts, and apps that re-render cart contents after changes.Hide buttons when cart is empty
Hides the injected checkout buttons when the cart has no items. This is enabled by default.Troubleshooting
The checkout button is not replaced
Check the Original Checkout Button Selector setting first. The selector must match the checkout button that customers actually click. Some themes and cart drawer apps use a custom class or ID instead ofbutton[name='checkout'].
If you use a cart drawer or slide-out cart, open the cart, inspect the checkout button, and add its selector to Original Checkout Button Selector. Keep the default selector too if your store also has a normal cart page:
The button appears on the cart page but not in the cart drawer
The cart drawer probably uses a different checkout button selector than the cart page. Add both selectors to Original Checkout Button Selector. Also leave Stop observing after first injection disabled. Cart drawers often render after the page loads or re-render after a customer changes quantity.The button appears twice
The selector may match both a wrapper element and the checkout button itself, or the cart app may duplicate checkout buttons for desktop and mobile views. Use a more specific selector that targets only the checkout button customers should click.The button styling looks different from the theme
Add the same theme button classes to Regular Button Additional Classes and SEPA Button Additional Classes. If the original checkout button has multiple styling classes, copy those classes into the additional class fields.The local-payment button does not show for subscription carts
Confirm that the cart item has a subscription selling plan selected. The injector only switches to subscription behavior when Firmhouse detects selling plans in the cart. Also make sure the SEPA Plan Support app embed is enabled. This app embed helps Firmhouse map regular subscription selling plans to the local-payment selling plans needed for Shopify Checkout.Shop Pay still appears for local-payment subscription checkout
If you use the standard Checkout Button Injector, the local-payment checkout button includes the Shop Pay prevention parameter automatically. If you use a custom checkout button or redirect, addskip_shop_pay=true to the local-payment checkout URL. See Shop Pay with SEPA subscriptions on Shopify Checkout.