Unieke verkoopargumenten (Unique Selling Points, USP's) beschrijven waarin jouw bedrijf zich onderscheidt van concurrenten. Met geavanceerd gebruik van CSS kunnen we de demobar omzetten in een USP-bar zonder de code van het thema te bewerken. Dit maakt aanpassingen mogelijk zonder de Thema editor te activeren, waardoor het een eenvoudig maar krachtig alternatief is voor het weergeven van berichten.

Dit is getest met het Conform Plus-thema en werkt mogelijk ook met andere thema's. De aangepaste CSS zorgt dat de USP-bar de juiste stijl heeft en verborgen blijft op kleinere schermen voor een schone mobiele interface.

Voor verdere aanpassing kunnen alle standaard CSS-eigenschappen worden toegepast om het uiterlijk van de USP-bar aan te passen. Een vergelijkbare methode met CSS kan worden gebruikt om een paginagroot onderhoudsbericht te maken.

Voorbeeld van een demobar

Het standaardontwerp van de demobar:

Na de veranderingen in de CSS en vertaling:

De demobar activeren

De onderstaande stappen begeleiden je bij het activeren van de demobar nadat je bent ingelogd bij je eCom-backoffice.

1. Navigeer naar Instellingen > Geavanceerd in de kolom Algemene instellingen.
2. Scrol omlaag naar de sectie WINKEL en schakel de schakelaar Toon demobar in.
3. Klik op Opslaan.

De demobar aanpassen

Je kunt aanpassen hoe tekst wordt weergegeven in de demobar door USP's toe te voegen.

1. Navigeer naar je pagina Home.
2. Navigeer naar Inhoud > Vertalingen.
3. Selecteer Vertaling overschrijven om de bestaande tekst van de demobar aan te passen.
4. Klik op Aanmaken.
5. Voer een USP in en klik op Opslaan.
   • Je kunt symbolen toevoegen voor of na je USP‘s om ze van elkaar te onderscheiden. 

De tekst van de demobar kan standaard worden onderverdeeld in twee berichten: Deze winkel is in aanbouw en Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt.

1. Navigeer naar Inhoud > Vertalingen.
2. Klik op Vertaling overschrijven om nieuwe vertalingen aan te maken.
   • Er geldt een limiet van 255 tekens per vertaling.

Bijvoorbeeld:

• Deze winkel is in aanbouw kan bijvoorbeeld ingesteld worden op:
  • Voor middernacht besteld, morgen in huis! • Gratis verzenden en retourneren
• Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt kan worden ingesteld op:
  • Altijd de goedkoopste!

CSS aanpassen

1. Navigeer naar Home.
2. Navigeer naar Design > Geavanceerd > CSS aanpassen.
3. Plak de volgende code.
4. Klik op Opslaan.

   /* Dit zijn opmerkingen. Deze kun je in je CSS-code laten staan. Ze zijn er om te helpen elk gedeelte uit te leggen. */
   
   /* Dit deel van de CSS-code zorgt ervoor dat de link naar de backoffice en de sluitknop verborgen zijn. */
   .wsa-demobar a, .wsa-demobar a.close {
   
   display: none !important;
   
   }
   
    /* Dit deel van de CSS-code zorgt ervoor dat de USP-bar niet meer zichtbaar is als je scrolt zoals bij de originele demobar. */
   .wsa-demobar{
   
   position: absolute !important;
   
   
   /* Dit deel van de CSS-code reguleert de achtergrond- en voorgrondkleur van de USP-bar. Zoek online naar elke kleur in 'hex' en vervang het onderstaande nummer. #000000 is zwart, #ffffff is wit. */
   
   background-color: #000000 !important; 
   
   color: #ffffff !important;
   }
   
   
   /* Dit deel van de CSS-code zorgt ervoor dat de USP-bar verborgen is voor mobiele bezoekers. Als een scherm kleiner is dan 767 pixels breed zullen de USP‘s niet goed passen. */
   
   @media screen and (max-width: 767px){
   
   .wsa-demobar{
   
   display: none !important;
   
   }
   
   body {
   
   margin-top: 0px!important;
   
   }
   
   }

   Inzicht in de CSS-code

   .wsa-demobar a, .wsa-demobar a.close { display: none !important; }
   Hiermee worden alle links uit de demobar verwijderd, vooral het gedeelte "terug naar backoffice".

   .wsa-demobar{ position: absolute !important; }
   Hierdoor wordt de demobar anders op de webpagina gepositioneerd, bijvoorbeeld in het midden.

   Om de kleur te wijzigen, voeg je background-color:red !important; toe voor rood. Je kunt alle CSS-eigenschappen gebruiken om het uiterlijk van de demobar aan te passen.

   @media screen and (max-width: 767px){ .wsa-demobar{ display: none !important; } body { margin-top: 0px!important; } }
   Hiermee wordt de demobar verborgen op schermen kleiner dan 767 pixels, zodat de mobiele website overzichtelijk en gemakkelijk te navigeren blijft.