Difference between revisions of "Melbourne ecommerce theme - Adding Afterpay snippets"

From Spiffy Stores Knowledge Base

(Replaced content with "These instructions no longer apply, as Afterpay support is now built into this theme. If you are using an older version of the Melbourne theme that doesn't include Afterp...")
Line 1: Line 1:
Please note that this tutorial requires no coding, but you will need to look at the code in your theme and paste our sample code in the places you are instructed toThese are unsupported modifications to your theme, but if you run into issues, please email us to let us know.
+
These instructions no longer apply, as Afterpay support is now built into this theme.  If you are using an older version of the Melbourne theme that doesn't include Afterpay support, you'll need to update your theme.
 
 
These modifications will NOT work in other themes.  They are provided specifically for the Melbourne theme.
 
 
 
==1.  Adding Afterpay info to your product pages==
 
Copy the code provided below and paste it BEFORE this line in your product.liquid file...
 
<pre>{% if settings.yotpo_reviews and settings.yotpo_appkey != blank %}{% include "yotpo_stars" %}{% endif %}</pre>
 
 
 
You may need to alter the minimum product price in accordance with Afterpay's requirements.
 
 
 
<pre>
 
{% if product.price_min < 1000 %}
 
  <div style="margin-top:15px; margin-bottom:15px;">
 
    <p><img src="{{ 'afterpay/ap-01.jpg' | global_asset_url }}" style="width: 100px;"><a href="https://static.secure-afterpay.com.au/banner-large.png" id="afterpay-popup" class="image-link"> More info</a>.</p>
 
    <p>Make 4 interest-free payments of <strong><span id="afterpay-price">{{ product.price | divided_by: 4 | money }}</strong> fortnightly and receive your order now.</p>
 
    <p style="font-color: #CCC; font-size: 11px;">*Minimum order amount of $100, and a maximum of $1000 applies. <a href="https://www.afterpay.com/en-AU/terms-of-service" id="afterpay-terms-popup" class="" target="_blank"> Afterpay Terms</a></p>
 
  </div>
 
{% endif %}
 
</pre>
 
 
 
Once you have saved the file, preview your product page to ensure it's displaying correctly.
 
 
 
==2.  Adding Afterpay info to your cart page==
 
Copy the code provided below and paste it BEFORE this line in your cart.liquid file...
 
<pre>{% include 'payment_methods' %}</pre>
 
 
 
You may need to alter the minimum and maximum amounts in accordance with Afterpay's requirements.
 
 
 
<pre>
 
{% if cart.total_price > 100 %}
 
  {% if cart.total_price < 1000 %}
 
    <div style="display: block; margin-top:15px; margin-bottom:15px;">
 
      <p><img src="{{ 'afterpay/ap-01.jpg' | global_asset_url }}" style="width: 100px;"><a href="https://static.secure-afterpay.com.au/banner-large.png" id="afterpay-popup" class="image-link"> More info</a></p>
 
      <p>Make 4 interest-free payments of <strong><span id="afterpay-price">{{ cart.total_price | divided_by: 4 | money }}</strong> fortnightly and receive your order now.</p>
 
      <p style="font-color: #CCC; font-size: 11px;">*Minimum order amount of $100, and a maximum of $1000 applies.<a href="https://www.afterpay.com/en-AU/terms-of-service" id="afterpay-terms-popup" class="" target="_blank"> Afterpay Terms</a></p>
 
    </div>
 
  {% endif %}
 
{% endif %}
 
</pre>
 
 
 
Once you have saved the file, preview your cart page to ensure it's displaying correctly.
 
 
 
==3.  Adding Afterpay info to the payment methods in your footer==
 
Copy the code provided below and paste it AFTER this line in your cart.liquid file...
 
<pre>{% endfor %}</pre>
 
 
 
<pre>
 
<li>
 
  <img width="50" src="/global/payment_types/afterpay.svg" alt="AfterPay" />
 
</li>
 
</pre>
 
 
 
Once you have saved the file, preview your store to ensure it's displaying correctly.
 
 
 
<br>
 
 
 
<br>
 
 
 
 
 
[[The Melbourne ecommerce theme guide|&laquo; The Melbourne theme guide]]
 

Revision as of 08:23, 7 May 2020

These instructions no longer apply, as Afterpay support is now built into this theme. If you are using an older version of the Melbourne theme that doesn't include Afterpay support, you'll need to update your theme.