Skip to main content
All CollectionsAdvanced Design
Banner link strip for your Mobile Header
Banner link strip for your Mobile Header

Learn how to add Unique Selling Points or Value Propositions your mobile header menu

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

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;

}
}

<script>
// Add mobile header banner links
var evoXHeaderLinks = document.querySelector('.headersection-4');
var evoXMobileHeader = document.querySelector('header');
evoXMobileHeader.appendChild(evoXHeaderLinks);
</script>

Customize your content

Lastly, customize the links and text in the HTML widget to link to the pages and content that you wish. 

 


Did this answer your question?