We all like to be reminded why we should buy from a particular business. One helpful way to remind your customers of your Unique Selling Points or your Value Propositions is to add them just below your header.
But the tough part is that on Mobile you have less space than on a Desktop. Thus, you might have to limit your messages to just 1 or 3.
In this article you can see how to add unique USP's or VP's to your mobile header that are different from the ones that you might have added to your desktop view.
Step 1 : Add an HTML Widget
Go to your header layout and add a HTML widget to the header.
Step 2: Add this to your HTML Widget
<div class="countyOX-mobileBaner">
<a href="/contact-us">Our Top Sellers</a>
<a href="/contact-us">Save £££'s on Seating</a>
<a href="/contact-us">Special Offers</a>
</div>
Step 2.5: Add this to the widget's Css Class field
countyOX-mobileBaner-widget
Step 3: Add the below to your CSS Block in Theme Options
.countyOX-mobileBaner {
background-color:#049af3;
text-align:center;
}
.countyOX-mobileBaner a {
color: #fff;
display: inline-block;
font-size: 11px;
letter-spacing: -.5px;
font-weight: bold;
padding: 10px 5px 10px;
}
.countyOX-mobileBaner-widget {
display:none;
}
@media only screen and (max-width: 768px) {
.countyOX-mobileBaner-widget {
display:block;
}
}
Step 4: Add this to your Footer Block
<script>
// Add mobile header banner links
var evoXHeaderLinks = document.querySelector('.headersection-4');
var evoXMobileHeader = document.querySelector('header');
evoXMobileHeader.appendChild(evoXHeaderLinks);
</script>
That's it now open your website on mobile and you will see that the links only appear when the website is being viewed from a mobile.
Customize your content
Lastly, customize the links and text in the HTML widget to link to the pages and content that you wish.