Samples of Custom Code for Shopify Product Pages

With some custom coding, you can limit Partially on your Shopify store. Below are examples of various scripts to customize the Partial.ly button on your product pages.

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>