Describe unique selling points (USPs) in which your business differs from that of competitors. The Conform Plus theme does not have an option to add USPs. This article explains how to use CSS to convert the demo bar into a USP bar without having to modify the Conform Plus code. A similar method that changes the demo bar using CSS is used to Create a maintenance notification on a full page.
This item has been tested with Conform Plus and works with other themes as well.
Demo bar standard design:
After the changes in the CSS and translation:
Instructions
Activate the demo bar in your eCom Back Office by clicking Settings > Advanced, in the column General Settings. Scroll to the SHOP section and enable the Show demo bar option. Click on Save.
You can add symbols before or after your USPs to differentiate them. Click here for the available symbols.
Translate the text in demobar by going back to Home and clicking Content > Translations. By clicking on Adjust translation , you will see the demo bar appear at the bottom. Click on Create, then enter a USP and click on Save. The lines are then replaced by your USPs:
This store is under construction. Translate for example like this: • Ordered before midnight, delivered tomorrow! • Free shipping and returns
Orders placed are not fulfilled or executed. Translate for example like this: • Always the cheapest!
Add the CSS style code by going back to Home and clicking Design > Advanced > Customize CSS. Add the following code and then click Save.
/* These are comments. You can leave this in your CSS code. They are there to help explain each section. */
/* This part of the CSS code ensures that the link to the back office and the close button are hidden. */
.wsa-demobar a, .wsa-demobar a.close {
display: none !important;
}
/* This part of the CSS code makes sure that the USP bar is no longer visible when you scroll like the original demo bar. */
.wsa-demobar{
position: absolute !important;
/* This part of the CSS code controls the background and foreground color of the USP bar. Search online for any color in 'hex' and substitute the number below. #000000 is black, #ffffff is white. */
background-color: #000000 !important;
color: #ffffff !important; }
/* This part of the CSS code ensures that the USP bar is hidden from mobile visitors. If a screen is smaller than 767 pixels wide, the USPs will not fit properly. */
@media screen and (max-width: 767px){
.wsa-demobar{
display: none !important;
}
body {
margin-top: 0px!important;
}
}