Samples of Custom Code for Shopify Product Pages
NEW: You can now use Smart Customizations to apply rules and limitations to your Partially checkout button. Learn more at: Smart Customization for Shopify.
If for some reason Smart Customizations do not work for you, you can still use the code examples below, or contact our support team for help.
Limit by Product Tags
1. Limit by product tag:
{% if product.tags contains 'TAG' %}
[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]
{% endif %}
2. Different offers for different product tags:
{% assign hasPaymentPlan = false %}
{% assign paymentPlanOffer = false %}
{% if product.tags contains 'TAG1' %}
{% assign paymentPlanOffer = 'OFFER1' %}
{% assign hasPaymentPlan = true %}
{% elsif product.tags contains 'TAG2' %}
{% assign paymentPlanOffer = 'OFFER2' %}
{% assign hasPaymentPlan = true %}
{% endif %}
{% if hasPaymentPlan %}
<div id="partiallyProductButtonContainer"></div>
<script>
document.partiallyButtonConfig = {
offer: '{{paymentPlanOffer}}',
returnUrl: '{{shop.url}}/cart',
returnConfirmedUrl: '{{shop.url}}/cart/clear',
cssButton: true,
cssButtonText: 'Purchase with',
cssButtonShowLogo: true,
cssButtonLogoType: 'full',
cssButtonLogoPlacement: 'after',
renderSelector: '#partiallyProductButtonContainer',
shopifyProduct: {{product | json}},
shopifyVariant: {{product.selected_or_first_available_variant | json}}
};
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://partial.ly/js/partially-checkout-button.js';
script.async = true;
document.head.appendChild(script);
})();
</script>
{% endif %}
You must replace the offer line within the Partial.ly script with
offer: '{{paymentPlanOffer}}',
3. Make product ineligible by tag:
{% unless product.tags contains 'TAG' %}
[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]
{% endunless %}
4. Limit some offers by product tag, with a fallback offer for everything else:
{% assign hasPaymentPlan = false %}
{% assign paymentPlanOffer = false %}
{% if product.tags contains 'TAG1' %}
{% assign paymentPlanOffer = 'OFFER1' %}
{% assign hasPaymentPlan = true %}
{% elsif product.tags contains 'TAG2' %}
{% assign paymentPlanOffer = 'OFFER2' %}
{% assign hasPaymentPlan = true %}
{% endif %}
{% if hasPaymentPlan %}
<div id="partiallyProductButtonContainer"></div>
<script>
document.partiallyButtonConfig = {
offer: '{{paymentPlanOffer}}',
returnUrl: '{{shop.url}}/cart',
returnConfirmedUrl: '{{shop.url}}/cart/clear',
cssButton: true,
cssButtonText: 'Purchase with',
cssButtonShowLogo: true,
cssButtonLogoType: 'full',
cssButtonLogoPlacement: 'after',
renderSelector: '#partiallyProductButtonContainer',
shopifyProduct: {{product | json}},
shopifyVariant: {{product.selected_or_first_available_variant | json}}
};
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://partial.ly/js/partially-checkout-button.js';
script.async = true;
document.head.appendChild(script);
})();
</script>
{% else %}
<div id="partiallyProductButtonContainer"></div>
<script>
document.partiallyButtonConfig = {
offer: 'OFFER-ID-FOR-EVERYTHING-ELSE',
returnUrl: '{{shop.url}}/cart',
returnConfirmedUrl: '{{shop.url}}/cart/clear',
cssButton: true,
cssButtonText: 'Purchase with',
cssButtonShowLogo: true,
cssButtonLogoType: 'full',
cssButtonLogoPlacement: 'after',
renderSelector: '#partiallyProductButtonContainer',
shopifyProduct: {{product | json}},
shopifyVariant: {{product.selected_or_first_available_variant | json}}
};
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://partial.ly/js/partially-checkout-button.js';
script.async = true;
document.head.appendChild(script);
})();
</script>
{% endif %}
You must replace the offer line within the first Partial.ly script with
offer: '{{paymentPlanOffer}}',
Limit by Price
#1. Limit products over a specific amount:
{% if product.selected_or_first_available_variant.price > 10000 %}
[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]
{% endif %}
#2. Limit products between a specific range:
{% if product.selected_or_first_available_variant.price >= 40000
and product.selected_or_first_available_variant.price <= 149999 %}
[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]
{% endif %}
Limit by Price and Tag
{% if product.selected_or_first_available_variant.price >= 40000
and product.tags contains 'TAG' %}
[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]
{% endif %}
Multiple Checkout Buttons on a Product Page at Once
<div id="partiallyProductButtonContainer"></div>
<script src="https://partial.ly/js/partially-checkout-button.js"></script>
<script>
var basePartiallyConfig = {
returnUrl: '{{shop.url}}/cart',
returnConfirmedUrl: '{{shop.url}}/cart/clear',
cssButton: true,
cssButtonText: 'BUTTON-TEXT',
cssButtonShowLogo: true,
cssButtonLogoType: 'glyph',
cssButtonLogoPlacement: 'after',
cssButtonCustomBg: '#6623e9',
renderSelector: '#partiallyProductButtonContainer',
shopifyProduct: {{product | json}},
shopifyVariant: {{product.selected_or_first_available_variant | json}}
};
basePartiallyConfig.offer = 'OFFER-ID-1';
var button1 = new PartiallyButton(basePartiallyConfig);
button1.init();
</script>
<div id="partiallyProductButtonContainer2"></div>
<script src="https://partial.ly/js/partially-checkout-button.js"></script>
<script>
var basePartiallyConfig = {
returnUrl: '{{shop.url}}/cart',
returnConfirmedUrl: '{{shop.url}}/cart/clear',
cssButton: true,
cssButtonText: 'BUTTON-TEXT',
cssButtonShowLogo: true,
cssButtonLogoType: 'glyph',
cssButtonLogoPlacement: 'after',
renderSelector: '#partiallyProductButtonContainer2',
shopifyProduct: {{product | json}},
shopifyVariant: {{product.selected_or_first_available_variant | json}}
};
basePartiallyConfig.offer = 'OFFER-ID-2';
basePartiallyConfig.renderSelector = '#partiallyProductButtonContainer2';
var button2 = new PartiallyButton(basePartiallyConfig);
button2.init();
</script>