How to Add PayPal Credit/Pay Later messaging on a Product Page for BigCommerce

To display the PayPal Credit/Pay Later messaging on any product page, it is needed to add the following manually HTML code into your product layout.

Image Placeholder





Please follow these instructions to add the messaging on a BigCommerce store:


  1. Access your BigCommerce Admin Panel.

  2. Go to Storefront > My Themes > Advanced > Edit Theme Files.

  3. Locate your product's price template file on the following folder path: file: /templates/components/products/price.html 

  4. Copy and Paste the following HTML Code just below the following line: {{#if page_type '===' 'product'}}

    <div data-pp-message data-pp-placement="product" data-pp-amount="{{price.saved}}" data-pp-style-layout="text" data-pp-style-logo-type="alternative" data-pp-style-logo-position="top" data-pp-style-text-color="black"></div>
  5. Update the data-pp-amount value when needed

    If your website offers installment-based products such as Easy Payments, update the data-pp-amount attribute for each product price. Your website uses this attribute to calculate the financing terms of a specific amount. If you omit this attribute, the the message won't display the monthly payment. If you don't offer any installment-based financing products, your website ignores the attribute.

    If your website updates the price on the client-side using either JavaScript or other client-side methods, you can refresh your PayPal message by updating the value of data-pp-amount. The JavaScript SDK monitors for any changes to the value of data-pp-amount and renders any updated messages with the new payment information.

  6. Configure the look&feel of the messages using the different variables used on the HTML code:
    7. Field
    		Values
    		Description
    		Preview
    data-pp-style-logo-type
    		primary
    		Default. Stacked PayPal Credit logo.


    		alternative
    		Single line PayPal Credit logo.
    Image Placeholder

    		inline
    		Single line PayPal Credit logo without monogram.
    Image Placeholder

    		none
    		No logo. Text only.
    Image Placeholder
    data-pp-style-logo-position

    Note:     This option is only available with data-pp-style-logo-typevalues: primary, alternative    		left
    		Default. Logo left of the text.
    Image Placeholder

    		right
    		Logo right of the text.
    Image Placeholder

    		top
    		The logo above the text.
    Image Placeholder
    data-pp-style-text-color
    		black
    		Default. Black text with a colored logo.
    Image Placeholder

    		white
    		White text with a white logo.
    Image Placeholder

    		monochrome
    		Black text with a black logo.
    Image Placeholder

    		grayscale
    		Black text with a grayscale logo.
    Image Placeholder
    data-pp-style-text-size
    		10, 11
    		Smaller text sizes.
    Image Placeholder

    		12
    		Default. Standard text size.
    Image Placeholder

    		13,14,15,16
    		Larger text sizes.
    Image Placeholder
    data-pp-style-text-align
    		left
    		Default. Text is left aligned.


    		center
    		Text is center aligned.


    		right
    		Text is right aligned.