USPs - Product Page

Add unique selling points (USPs) to your product page to boost customer confidence. Show things such as Free Shipping, Australian Owned & Operated, Money Back Guarantee, Warranties and etc.

Wireframe

USPs Product Page

Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:

Read through the Introduction to Neto Document to get a better sense of how the Control Panel, Database and Front End store interact.
Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

There are two different ways of adding product page USPs (unique selling points) depending on your requirements:

Display different USPs on a product-to-product basis - setup using custom product fields.
Display the same USPs across all products - setup using a content zone.

Display different USPs on a product-to-product basis

Step 1: Setup the custom product fields

Go to Setup & Tools > All settings & tools > Custom Product Fields, and create a new custom product field for each USP, using the below options and text for each:

Free Shipping USP
Australia Owned & Operated USP
Money Back Guarantee USP
1 Year Warranty USP
30 Day Returns USP

Brand Logo

Step 2: Add the code into the product template

Open the product template here /httpdocs/assets/themes/[THEME-NAME]/products/template.html.

Paste the following code directly underneath [%load_ajax_template id:'_header' type:'item' template:'header' preload:'1' tmpl_sku:'[@current_sku@]' tmpl_preview:'y'/%], also highlighted here.

<div class="row mt-3">
    [%if [@misc1@]%]
        <div class="col-12 col-sm-6">
            <p><i class="fa fa-truck fa-fw mr-2"></i> Free Shipping Australia-wide</p>
        </div>
    [%/if%]
    [%if [@misc2@]%]
        <div class="col-12 col-sm-6">
            <p><i class="fa fa-flag fa-fw mr-2"></i> Australia Owned & Operated</p>
        </div>
    [%/if%]
    [%if [@misc3@]%]
        <div class="col-12 col-sm-6">
            <p><i class="fa fa-dollar-sign fa-fw mr-2"></i> Money Back Guarantee</p>
        </div>
    [%/if%]
    [%if [@misc4@]%]
        <div class="col-12 col-sm-6">
            <p><i class="fa fa-thumbs-up fa-fw mr-2"></i> 1 Year Warranty</p>
        </div>
    [%/if%]
    [%if [@misc5@]%]
        <div class="col-12 col-sm-6">
            <p><i class="fa fa-exchange-alt fa-fw mr-2"></i> 30 Day Returns</p>
        </div>
    [%/if%]
</div>

If the custom field numbers that you've set up in the backend don't correspond to the above [@misc@] fields, update the numbers. For example, the "free shipping USP" may be setup as misc3 in the control panel, in which case [%if [@misc1@]%] will need to be changed to [%if [@misc3@]%] for the that section in the code.

Step 3. Change the product fields, to test the code

Create a new test product in the system and change all of the new custom fields to "true", in order to test whether they work.

Change Product Fields

Adding the USPs as a content zone

Step 1: Create the content zone

Go to Webstore > Content Zones in the control panel and create a new content zone named product_usps with the following code:

<div class="row mt-3">
    <div class="col-12 col-sm-6">
        <p><i class="fa fa-truck fa-fw mr-2"></i> Free Shipping Australia-wide</p>
    </div>
    <div class="col-12 col-sm-6">
        <p><i class="fa fa-flag fa-fw mr-2"></i> Australia Owned & Operated</p>
    </div>
    <div class="col-12 col-sm-6">
        <p><i class="fa fa-dollar-sign fa-fw mr-2"></i> Money Back Guarantee</p>
    </div>
    <div class="col-12 col-sm-6">
        <p><i class="fa fa-thumbs-up fa-fw mr-2"></i> 1 Year Warranty</p>
    </div>
    <div class="col-12 col-sm-6">
        <p><i class="fa fa-exchange-alt fa-fw mr-2"></i> 30 Day Returns</p>
    </div>
</div>

Add New Content Zone