Unique selling propositions (USPs) describe why your business differs from competitors. With some advanced uses of CSS, we can convert the demo bar into a USP bar without editing the theme's code. This allows for customization without activating the theme editor, making it a simple yet powerful alternative for displaying messages.

This has been tested with Conform Plus theme and may work with other themes. The custom CSS ensures the USP bar is styled appropriately and remains hidden on smaller screens to maintain a clean mobile interface.

For further customization, any standard CSS properties can be applied to tweak the appearance of the USP bar. A similar method using CSS can be used to create a full-page maintenance message.

Example demo bar

The default design of the demo bar:

After the CSS and translation changes:

Activating the demo bar

The steps below will guide you in activating the demo bar after logging in to your eCom Back office.

1. Navigate to Settings > Advanced, from the General settings column.
2. Scroll down to the STORE section and enable the Show demo bar switch.
3. Click Save.

Adjusting the demo bar

You can adjust how text appears in the demo bar, adding USPs.

1. Navigate to your Home page.
2. Navigate to Content > Translations.
3. Select Modify translation to adjust the existing demo bar text.
4. Click Create.
5. Enter a USP and click Save.
   • You can add symbols before or after your USPs to differentiate them.

The demo bar text may be separated into two messages by default: This store is under construction and Any orders placed will not be honored or fulfilled.

1. Navigate to Content > Translations
2. Click Override Translation to create new translations
   • There is a 255-character limit per translation.

For example:

• This store is under construction could be set to:
  • Ordered before midnight, delivered tomorrow! • Ship and return for free
• Any orders placed will not be honored or fulfilled could be set to:
  • Always the cheapest!

Adjusting CSS

1. Navigate to Home.
2. Navigate to Design > Advanced > Customize CSS.
3. Paste the following code.
4. 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 USP bar. Search online for any color 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;
   
   }
   
   }

   Understanding the CSS code

   .wsa-demobar a, .wsa-demobar a.close { display: none !important; }
   This removes all links from the demobar, especially the "back to back office" part.

   .wsa-demobar{ position: absolute !important; }
   This positions the demo bar differently on the webpage, like in the middle.

   To change the color, add background-color:red !important; to make it red. You can use any CSS properties to tweak the demo bar's appearance.

   @media screen and (max-width: 767px){ .wsa-demobar{ display: none !important; } body { margin-top: 0px!important; } }
   This hides the demo bar on screens smaller than 767 pixels to keep the mobile website clear and easy to navigate.