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:
Na de veranderingen in de CSS en vertaling:
Instructies
Activeer de demobar in je eCom-backoffice door te klikken op Instellingen > Geavanceerd, in de kolom Algemene instellingen. Scrol naar de sectie SHOP en schakel de optie Demobar weergeven in. Klik op Opslaan.
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 Content > Vertalingen. Door op Vertaling aanpassen te klikken, zie je de demobar onderaan verschijnen. Klik op Maken, voer vervolgens een USP in en klik op Opslaan. De regels zijn vervolgens vervangen door je USP‘s:
Deze winkel is in aanbouw. Vertaal bijvoorbeeld zo:
• Voor middernacht besteld, morgen in huis! • Gratis verzenden en retournerenDe geplaatste orders worden niet ingewilligd of uitgevoerd. Vertaal bijvoorbeeld zo:
• Altijd de goedkoopste!
Voeg de CSS-stijlcode toe door terug te gaan naar Home en te klikken op Ontwerp > 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;}}