Note: The following solution may be non-viable or need adjustments to function depending on the complexity of the theme.
In order to optimize and ensure shops are meeting regulatory requirements, the snippet we provide in this document has to be implemented in a way that Shopify is able to make enhancements programmatically.
For custom storefronts that are rendered using primarily JavaScript, these themes would not be able to input the snippet and render the suggested Liquid code.
As a workaround, we recommend rendering the Liquid markup on the storefront first in order to ensure that the snippet loads, then re-render the page in JavaScript. This will enable Shopify to continue to make enhancements programmatically, while still rendering the website in Javascript.
You can do this by loading the banner to the DOM with the following process:
The liquid tag is rendered by the server, printing out the <shopify-payment-terms element. In its entirety looks like this:
The rest of the markup for the banner is injected into this element by a Shopify JavaScript file. This JavaScript uses the shopify-payment-terms element as the “shadow host” for a shadow DOM that contains the visible elements of the banner. If you are going to use JavaScript to grab the banner elements, you should not assume they are available on page load, as you will need to wait until they are fully rendered within the shopify-payment-terms element by the Javascript explained above.
Return to the Shop Pay Installments Troubleshooting - Table of Contents