Hoi, hoe kunnen we je helpen?

USP's in de demobar weergeven

Unieke verkoopargumenten (USP‘s) beschrijven waarin jouw zaak verschilt van die van concurrenten. Het thema Conform Plus heeft geen optie om USP‘s toe te voegen. In dit artikel wordt uitgelegd hoe CSS gebruikt kan worden om de demobar om te zetten in een USP-bar zonder de code van Conform Plus te hoeven aanpassen. Een vergelijkbare methode die de demobar verandert middels het gebruik van CSS wordt gebruikt om Een onderhoudsmelding te maken op een volle pagina.

Dit artikel is getest met Conform Plus en werkt ook met andere thema‘s.

Het standaardontwerp van de demobar:

Toont de demobar voor modificatie.

Na de veranderingen in de CSS en vertaling:

Toont de demobar na modificaties in de CSS.

Instructies

  1. Activeer de demobar in je eCom-backoffice door te klikken op InstellingenGeavanceerd, in de kolom Algemene instellingen. Scrol naar de sectie SHOP  en schakel de optie Demobar weergeven in. Klik op Opslaan.
  2. Je kunt symbolen toevoegen voor of na je USP‘s om ze van elkaar te onderscheiden. Klik hier voor de beschikbare symbolen.
    Vertaal de tekst in demobar door terug te gaan naar Home en te klikken op Inhoud > Vertalingen. Door op Vertaling overschrijven  te klikken, kan je de zinnen uit de demo bar opzoeken, welke dit zijn lees je hieronder. Klik op Maken, voer vervolgens een USP in en klik op Opslaan. De regels zijn vervolgens te vervangen door jouw USP‘s of wellicht een andere omschrijving:
    1. Deze winkel is in aanbouw. Vertaal bijvoorbeeld zo: • Voor middernacht besteld, morgen in huis! • Gratis verzenden en retourneren
    2. Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt. Vertaal bijvoorbeeld zo: • Altijd de goedkoopste!
  3. Voeg de CSS-stijlcode toe door terug te gaan naar Home en te klikken op Design > Geavanceerd > CSS aanpassen. Voeg de volgende code toe en klik dan 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;
    }
    }

Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 0 van 1