Configure Shopify Dawn theme with a Payflex calculator

Modified on Tue, 28 Jun, 2022 at 2:57 PM

The below article is a guide on how to add the Payflex calculator to Shopify if you are using the Dawn theme. Please note that the exact locations of where to add the CSS will differ from theme to theme.

Disclaimer

If you are using a custom or purchased theme, we would advise you to reach out to the developers for assistance locating the exact area to add the PayFlex widget within the Themes CSS.

Simple calculator

Note: The simple calculator will not calculate the product's price variants, please refer to the second half of this article for that.

<script async src="https://widgets.payflex.co.za/your-merchant-name/partpay-widget-0.1.1.js?type=calculator&min=10&max=20000&amount={{ product.price | money_without_currency | remove: ',' }}" type="application/javascript"></script>

Price Varients Calculator

        {%- if product.variants[0] -%}
            {%- assign priceforwidget =  product.variants[0].price -%}
        {%- else -%}
            {%- assign priceforwidget =  product.price -%}
        {%- endif -%}
        <script async src="https://widgets.payflex.co.za/your-merchant-name/partpay-widget-shopify.js?type=calculator&min=10&max=20000&amount={{ priceforwidget | money_without_currency | remove: ',' }}" type="application/javascript"></script>