Samples of Custom Code for Shopify Product Pages

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

Limit by Product Tag:

{% if product.tags contains 'TAG' %}

[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]

{% endif %}

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 %}

*Notice that the offer line within the Parial.ly script above has been altered to be:

offer: '{{paymentPlanOffer}}',

Limit by Price Range:

{% if product.selected_or_first_available_variant.price > 10000 %}

[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]

{% endif %}

{% 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 %}

Make Product Ineligible by Tag:

{% unless product.tags contains 'TAG' %}

[PARTIAL.LY SHOPIFY SCRIPT FROM INTEGRATION TOOL GOES HERE]

{% endunless %}

Limit Some Offers by Product Tag with an 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 %}

Multiple checkout buttons appear on 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',
     cssButtonCustomBg: '#6623e9',
  
     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>  

Don't see what you need?

Please email support@partial.ly.