The Build a Box page is rendered via the Recurpay proxy. This means you can completely customize the layout, design, and interactions using your own CSS and JavaScript - without affecting other pages of your store.
Follow the steps below to achieve a seamless, on-brand experience for your subscription bundles.
Step 1: Create a custom snippet on your theme files.
Go to Shopify Admin → Online Store → Themes → Edit Code.
Under the Snippets directory, Add a new snippet and name it recurpay-custom.liquid:
Open your theme.liquid file and include the snippet right before the closing
</body>tag using:
{% if request.path contains '/apps/recurpay/bundles' %}
{% render 'recurpay-custom' %}
{% endif %}
This ensures your customization loads across all pages - but you'll use Liquid conditions to limit it only to Recurpay proxy pages.
Step 2: Open the newly created snippet recurpay-custom.liquid and add your custom styling or scripts inside it. Here's a sample code for reference:
<style>
body .recurpay-byob-card-product-item .card-product-quantity-btn{
background:#46a07e;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("Recurpay Build a box page layout")
});
</script>
Recurpay also exposes a global object named recurpayBundle which contains several helpful methods you can use to dynamically enhance your Build-a-Box experience.
Prefill Products in the Box - Automatically add specific addons or products when a customer lands on the page:
recurpayBundle.addDefaultProductOnLoad(product_id, variant_id, qty)
Parameters:
product_id→ The Shopify product IDvariant_id→ The specific variant IDqty→ Quantity to prefill
Example Usage:
<script>
document.addEventListener("DOMContentLoaded", function(){
recurpayBundle.addDefaultProductOnLoad(product_id, variant_id, qty); });
</script>
Facing any issue with setting this up? Click the green chat button on Recurpay dashboard and we will get it done for you or write us at help@recurpay.com