Hoi, hoe kunnen we je helpen?

Een onderhoudsbericht maken

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:

Toont de demobar zoals deze standaard wordt weergegeven.

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

Toont de demobar zoals deze wordt weergegeven na de CSS wijzigingen.

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.

Sleutelvertalingen bewerken

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.

Instelling demobar inschakelen

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 een demobar dat als bericht wordt weergegeven

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.

Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 0 van 0