Je kunt de ingebouwde functie voor aangepaste CSS gebruiken om het uiterlijk van de demobar te wijzigen, zodat deze als volledige pagina of als pop-upbericht kan worden weergegeven. Dit voegt een laag toe aan je bestaande thema, in plaats van een balk bovenaan de webpagina.

Dit is een ander proces dan het uitschakelen van je eCom-winkel.

Ons Support-team kan helpen met de vaste oplossing die hier wordt beschreven, maar het bewerken van de CSS kan problemen veroorzaken waarvoor externe support nodig is voor verdere aanpassingen.

De demobar is standaard een grijze balk die bovenaan je webpagina verschijnt:

Met deze instructies wijzig je de demobar in een blauw schermvullend bericht op je webpagina:

Het toevoegen van de aangepaste CSS

Je kunt de manier waarop de demobar op de website wordt weergegeven wijzigen. Volg daarvoor deze instructies:

1. Klik in je eCom-backoffice in de zijbalk aan de linkerkant op Design.
2. Klik aan de rechterkant van het scherm op Geavanceerd.
3. Klik rechtsboven op het scherm op CSS aanpassen.
4. Kopieer de volgende code:
   

   .wsa-demobar {
     font-size: 2em !important;
     color: #333 !important;
     padding-top: 200px;
     height: 100% !important;
     width: 100% !important;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
     background: #a7c7dc !important; /* Old browsers */
     background: -moz-linear-gradient(top, #a7c7dc 0%, #85b2d3 100%) !important; /* FF3.6-15 */
     background: -webkit-linear-gradient(top, #a7c7dc 0%,#85b2d3 100%) !important; /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to bottom, #a7c7dc 0%,#85b2d3 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   }
   .wsa-demobar a {
       display: none;
   }
   .wsa-demobar .close {
       display: none !important;
   }
   

5. Plak hem in het aangepaste CSS-venster.
6. Klik op Opslaan.

Berichten vertalen

Je kunt de vertaalfunctie in je eCom-winkel gebruiken om de weergave van berichten in verschillende talen te wijzigen, met een limiet van 255 tekens per bericht. In de onderstaande stappen wordt uitgelegd hoe je de specifieke berichtenDeze winkel is in aanbouw en Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt vertaalt, maar je kunt dezelfde instructies volgen voor andere vertaalsleutels.

1. Klik in je eCom-backoffice in de zijbalk aan de linkerkant op Inhoud > Vertalingen.
2. Selecteer de vertaalsleutels Deze winkel is in aanbouw of Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt uit de lijst.
   • Als ze niet in de lijst staan, klik dan op Vertaling overschrijven om ze te zoeken.
3. Voer in de velden Vertaling naar het bericht in die elke vertaalsleutel moet vervangen.
4. Klik op Opslaan.
5. Herhaal de stappen voor de andere vertaalsleutel uit stap 2.

De demobar inschakelen

Volg deze instructies om de wijzigingen die je hebt aangebracht zichtbaar te maken door de demobar in te schakelen.

1. Klik in je eCom-backoffice in de zijbalk aan de linkerkant op Instellingen.
2. Klik onder Algemene instellingen op Geavanceerd.
3. Schakel in het gedeelte WINKEL de schakelaar naast Toon demobar in.

De demobar als een bericht weergeven

Je kunt je demobar weergeven als een zwevend bericht op je website, die gebruikers kunnen lezen en negeren. Je kunt de onderstaande CSS-code gebruiken om een bericht weer te geven door de werking van de demobar aan te passen.

Voorbeeld van CSS-code

Deze CSS-code kan worden toegepast op je website om de demobar te laten verschijnen als een pop-upbericht in plaats van een banner.

1. Klik in je eCom-backoffice in de zijbalk aan de linkerkant op Design.
2. Klik aan de rechterkant van het scherm op Geavanceerd.
3. Klik rechtsboven op het scherm op CSS aanpassen.
4. Kopieer de volgende code:
   

   
   /* eCom-demobar (C-Series) - Een berichtvenster maken BEGIN */
   div.wsa-demobar {
     top: auto !important;
     bottom: 100px;
     border-radius: 10px;
     padding: 10px;
     width: 20% !important;
     height: auto !important;
     position: fixed;
     font-size: 11px;
     text-shadow: 0px 0px 3px black !important;
     right: 30px;
     left: auto !important;
     background: #333333 !important;
     box-shadow: 5px 5px 5px hsla(231, 92%, 49%, 0.11) !important;
   }
   
   /* Als je de link "Terug naar de backoffice" wilt verwijderen */
   .wsa-demobar a { display: none; }
   
   /* Als je wilt dat dit wordt weergegeven zonder dat je het kunt sluiten */
   .wsa-demobar a.close { display: none !important; }
   /* eCom-demobar (C-Series) - Een berichtvenster maken EINDE */
   

5. Plak hem in het aangepaste CSS-venster.
6. Klik op Opslaan.

Test je wijzigingen

Zoals bij elke designwijziging moet je je wijzigingen altijd testen om te zien of je tevreden bent met het eindresultaat. Je kunt een privénavigatievenster openen en naar de home-pagina van je eCom-winkel gaan om te bekijken hoe de wijzigingen eruit zien voor je klanten.