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.
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.
Step 1: Setup the ad group
To add an advert you will first need to create an advert group.
- In the control panel, go to
Setup & tools > All settings & tools > Webstore Advertising Groups.
- Setup a new advert group named
Step 2: Create the adverts
Create an advert and set the "Group" to
- "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
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
/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.