Header USPs

Add unique selling points (USPs) to the header of your webstore to boost customer confidence. USPs include things such as Free Shipping, Money Back Guarantees and Warranties.

Wireframe

Preparation Checklist

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

• Read through the Getting Started 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.
• The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Setup the ad group

To add an advert you will first need to create an advert group.

1. In the control panel, go to Setup & tools > All settings & tools > Webstore Advertising Groups.
2. Setup a new advert group named header-usps.

Step 2: Create the adverts

Create an advert and set the "Group" to usps.

• "Headline / Alt Text" Field: Enter the USP title (eg. Free Shipping Australia-Wide).
• "Ad Text" field: Enter a Font Awesome icon (eg. fa-truck). A range of different icons can be selected from the Font Awesome Cheat Sheet.

Step 3: Create the new advert template

Create a new template within /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/adverts named header-usps.template.html and add the following code:

<div class="d-none d-md-flex col-3 align-items-center justify-content-center">
    [%if [@description@]%]<i class="fa [%format type:'text' nohtml:'1' trim:'LE2R' wordlength:'27'%][@description@][%/format%] mr-2"></i>[%/if%]
    [%if [@headline@]%]<p class="m-0">[@headline@]</p>[%/if%]
</div>

Step 4: Add the header code

Open /httpdocs/assets/themes/[THEME-NAME]/templates/headers/template.html and paste the following code into the header template where you would like these USPs to appear.

[%advert type:'text' template:'header-usps' limit:'4' ad_group:'header-usps' sortby:'sortorder,name' category:'0'%]
    [%param *header%]
        <div class="row justify-content-center py-2">
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/advert%]

Customising this section

More information on how to customise this section can be found within the Advert Documentation.