Unique selling propositions (USPs) describe why your business differs from competitors. The Conform Plus theme doesn't have an option for adding USPs. So this article explains how to use CSS to convert the demobar into a USP bar without editing the code of Conform Plus. A similar method that changes the demo bar using CSS is used to Create a full page maintenance message.

This article has been tested with Conform Plus and may work with other themes as well.

The default design of the demo bar:

After the CSS and translation changes:

Instructions

1. Activate the demobar in your eCom Back office by clicking Settings > Advanced, from the General settings column. Scroll to the STORE section and enable the switch labeled Show demo bar. Click Save.
2. You can add symbols before or after your USPs to differentiate them. For available symbols, click here.
   Translate the text in demo bar by going back to Home and clicking Content > Translations. Click Modify translation and find the demo bar text listed below. Click Create, then enter a USP and click Save. Find these strings and replaced with your USPs:
   1. This store is under construction. For example, translate this as: • Ordered before midnight, delivered tomorrow! • Ship and return for free
   2. Any orders placed will not be honored or fulfilled. For example, translate this as: • Always the cheapest!
3. Add the CSS styling code by going back to Home and clicking Design > Advanced > Customize CSS. Place the following code, then click Save.

   /* These are comments, they can be left in your CSS code. They are here to help explain each part. */
   
   /* This part of the CSS code ensures 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 ensures the USP bar is no longer visible when scrolling like the original demobar. */
   .wsa-demobar{
   
   position: absolute !important;
   
   
   /* This part of the CSS code controls the background and font color of the the USP bar. Search online for any colour in 'hex' and replace the number below. #000000 is black, #ffffff is white. */
   
   background-color: #000000 !important; 
   
   color: #ffffff !important;
   }
   
   
   /* This part of the CSS code ensures the USP bar is hidden for mobile visitors. When 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;
   
   }
   
   }