De Demobar omtoveren tot USP bar (Conform thema)

NynkeNynke Administrator, Lightspeed Staff Berichten: 372 moderator
februari 2018 aangepast in Thema's en maatwerk
Het Conform thema bevat standaard geen optie tot het toevoegen van USP's. Met wat handig gebruik van CSS kunnen we echter wel de demobar 'verbouwen' tot een simpel alternatief. Het grote voordeel hiervan is dat de thema editor hierdoor niet hoeft te worden geactiveerd. Je kunt deze methode natuurlijk ook gebruiken voor andere berichten of meldingen te tonen.



Hoe gaan we dit doen:
1. De Demobar activeren
2. De USP's vertalen
3. De CSS styling toevoegen

Stap1: De Demobar activeren
Ga naar Instellingen > Geavanceerd en activeer "Toon demobar"



Stap2: De USP's vertalen
De tekst die we gaan vertalen bestaat uit twee aparte sleutels:
"Deze winkel is in aanbouw." en "Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt."

Ga naar Inhoud > Vertalingen en klik rechtsboven op de groene knop "Vertalingen overschrijven" Zoek vervolgens de sleutel "Deze winkel is in aanbouw." en klik op 'aanmaken'. Je kunt nu bij de vertalingen je eerste USP toevoegen.
Herhaal deze stap met de sleutel "Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt." voor de tweede USP.

Tip: Gebruik (kopieer) symbolen om het onderscheid tussen de USP's te vergroten.



Stap2: CSS styling toevoegen.
Ga Naar Design > thema aanpassen > aangepaste CSS en plaats hier onderstaande code:
.wsa-demobar a, .wsa-demobar a.close {
display: none !important;
}
.wsa-demobar{
position: absolute !important;
}

@media screen and (max-width: 767px){
.wsa-demobar{
display: none !important;
}
body {
margin-top: 0px!important;
}
}
Wat doet deze code:

.wsa-demobar a, .wsa-demobar a.close {
display: none !important;
}
Zorgt ervoor dat de link en bijbehorende tekst naar het backoffice gedeelte en de 'sluiten' knop worden verborgen. Je wilt tenslotte niet dat je bezoekers deze te zien krijgen.
.wsa-demobar{
position: absolute !important;
}
Zorgt ervoor dat de USP bar niet meer altijd mee scrolled / zichtbaar is zoals de originele demobar. Wil je de bar liever in een ander kleurtje? Dan kun je bijvoorbeeld ook 'background-color: #123456 !important' toevoegen, ( 123456 vervang je voor de kleurcode naar keuze" Het zelfde kun je ook doen voor de tekst met 'color: #123456 !important'. Plaats deze extra code direct boven de afsluitende '}'.
@media screen and (max-width: 767px){
.wsa-demobar{
display: none !important;
}
body {
margin-top: 0px!important;
}
}
Zorgt ervoor dat de USP bar wordt verborgen wanneer het scherm van de bezoeker kleiner is dan 767pixels (breed)
Omdat de ruimte beperkt is op mobieltjes is de kans groot dat de USP's ook niet goed passen en het uiteindelijk dus rommelig gaat ogen. Het is dan ook verstandiger om de mobiele weergave zo overzichtelijk mogelijk te houden.
Post edited by Nynke on
eCom support nummer: +31 20 808 63 58
Klik hier om een terugbelverzoek in te dienen.
Voor algemene vragen en informatie, ga naar het helpcentrum

18 reacties

  • EdinhoEdinho Member Berichten: 1
    Mooi gevonden! Gaat dit forum het andere (oude seoshop) forum vervangen?
  • ManoukManouk Administrator, Lightspeed Staff Berichten: 40 moderator
    Hi Edinho,

    Thanks voor je berichtje ! Yes, uiteindelijk gaat dit forum ook het oude SEOshop forum vervangen. Voor nu nog niet officieel, dat volgt snel!
  • dirkdirk Member Berichten: 8
    Beste Marijn

    Zijn deze guidelines ook van toepassing voor het thema Absolut?

    Hartelijk dank
    Grtz
    Dirk
  • MaartjeMaartje Administrator, Moderator, Lightspeed Staff Berichten: 230 moderator
    Goedemiddag Dirk,

    Dit is inderdaad ook toepasbaar in het thema Absolut. De CSS classes zijn gelijk, dus je kan dit ook in jouw shop gebruiken!
    Lightspeed
    Maartje Tindemans
    Lightspeed Support Omnichannel
    Lightspeed HQ
  • dirkdirk Member Berichten: 8
    Bedankt voor de reply Maartje; operatie geslaagd :-)
  • pbopbo Unconfirmed, Member Berichten: 1
    Super zeg! Dank je! Kan iemand mij met soortgelijks helpen voor de NEW/SALE button. Ik zou daar graag eentje willen die automatisch de korting berekend en weergeeft in percentage.
  • JaivyDaamJaivyDaam Lightspeed Staff Berichten: 29 Lightspeed
    maart 2018 aangepast
    Hi Pbo,

    Welkom op het forum!

    Ik heb hier een stukje code dat automatisch de korting berekend op basis van de oude en nieuwe prijs. Hiervoor dient wel de Thema Editor te worden geactiveerd.
    https://community.lightspeedhq.com/nl/discussion/328/automatisch-kortingspercentage-berekenen
    Post edited by JaivyDaam on
  • JoanMlJoanMl Member, Beta tester Berichten: 106 ✭
    Gelukt! Voor dit gratis thema een goede extra mogelijkheid.

    Joan
  • dirkdirk Member Berichten: 8
    Beste

    Ik kreeg zopas een mailtje dat ik de functie Mobile Commerce heb ingeschakeld; de functie verdwijnt echter op 30 april.
    Ik moet deze functie uitschakelen en/of mijn thema Absolut (waarvan ik dacht dat het responsive is) upgraden met een thema uit de Theme Store.
    Blijkt nu dat het thema Absolut Default (responsive) daar ook terug te vinden is. Is er echt een verschil met het thema dat ik nu gebruik en zullen bij een eventuele noodzakelijke upgrade alle instellingen enz. worden overgenomen?
    Nu weet ik het niet meer ...

    Graag een beetje klaarheid a.u.b.

    Hartelijk dank
    Dirk
  • NynkeNynke Administrator, Lightspeed Staff Berichten: 372 moderator
    Hi @dirk! Ik heb naar je thema gekeken en gekeken of hij responsive is, en dat is hij inderdaad. Bij jou staat wel de thema editor aan, waardoor jij nog gebruik maakt van een oudere versie van Absolut dan die je nu in de theme store staat (desalniettemin wel responsive). De nieuwste versie zal erg veel lijken op de versie die jij hebt, maar we hebben in de tussentijd onderhoud gedaan aan het thema zoals bugfixes en kleine aanpassingen. De wijzigingen die gedaan zijn kun je terugvinden in het Changelog op het dashboard van de eCom backoffice.

    Ik kan zo op het eerste gezicht niet zien wat er precies aangepast is. Mocht je wel de nieuwste versie van Absolut willen, dan kun je het volgende doen:
    - Staat de thema editor onnodig aan? Dan kun je het Absolut thema installeren vanuit de theme store. Je moet daarna wel de thema instellingen opnieuw aanpassen, deze worden niet meegenomen (dus alles onder "Thema aanpassen"). Je kunt dit doen door de instellingenpagina van je browser op te slaan, of screenshots te maken van de instellingen en die er later bij te pakken.
    - Staat de thema editor terecht aan? Doe in dat geval hetzelfde als beschreven in de vorige stap, maar sla van te voren ook de stukken code op die je destijds gewijzigd hebt. Als je het thema opnieuw hebt geïnstalleerd, kun je daarna de thema editor weer aanzetten en de stukken gewijzigde code er weer terug inzetten.

    Heb je veel maatwerk laten doen? Neem in dat geval contact op met je maatwerkpartner zodat zij dit in goeie banen kunnen leiden.
    Wij van support kunnen je ook helpen bij het overzetten van maatwerk, maar: omdat wij het maatwerk niet hebben gedaan, is er geen garantie dat dit correct gebeurt en dat we je maatwerk kunnen behouden zoals het oorspronkelijk bedoeld was. Uiteraard zullen we voorzichtig te werk gaan, maar 100% garantie kunnen we niet bieden :)

    Ik hoop dat dit meer duidelijkheid schept. Mocht je vragen hebben dan hoor ik het graag!
    eCom support nummer: +31 20 808 63 58
    Klik hier om een terugbelverzoek in te dienen.
    Voor algemene vragen en informatie, ga naar het helpcentrum
  • dirkdirk Member Berichten: 8
    Hartelijk dank Nynke
    Alle aanpassingen werden sowieso door jullie gedaan.
    Ik zie in het changelog echter niet direct welke veranderingen er zijn aangebracht aan ons thema. Kan jij me die aangeven? Mochten dit echt relevante zaken zijn voor ons dan zou ik een update naar de nieuwste versie overwegen (via de tweede mogelijkheid) na eerst de thema-instellingen te hebben opgeslagen.
    -D
  • NynkeNynke Administrator, Lightspeed Staff Berichten: 372 moderator
    @dirk ik heb het Changelog doorzocht en dit waren de wijzigingen die ik vond:

    eCom support nummer: +31 20 808 63 58
    Klik hier om een terugbelverzoek in te dienen.
    Voor algemene vragen en informatie, ga naar het helpcentrum
  • dirkdirk Member Berichten: 8
    Bedankt Nynke en een fijn weekend.
    Dirk
  • kielenkielen Member Berichten: 93 ✭
    Hallo @Nynke

    De demo bar gebruiken in Conform voor de USP heb ik geprobeerd en werkt prima.  Ik heb het weer uitgezet, omdat ik het niet mooi vond. Er staat namelijk al een balk met je winkelwagentje. Je krijgt dan twee balken boven elkaar of één hele dikke. Nu mijn vraag: Is het ook mogelijk om op deze wijze de USP in de balk te zetten waar het winkelwagentje in staat?
    Ik hoor graag van je. 
    Kees Kielen

    www.manivivendi.nl
  • MaartjeMaartje Administrator, Moderator, Lightspeed Staff Berichten: 230 moderator
    Hi @kielen
    Ja, juist in Conform is dit ook mogelijk. Je kan het volgende in de Aangepaste CSS plaatsen (via Design > Thema Aanpassen > Aangepaste CSS)
    @media screen and (min-width: 880px) {
      .topnav > .container > .right::before {
      content: "Voor 12:00 uur besteld, morgen in huis  --  Verzendkosten 3,95  --  Gratis verzending vanaf 49-, -- Veilig betalen met iDEAL";
      font-weight: bold;
    }
    }
    
    Pas de content tussen de aanhalingstekens naar eigen wens aan; zo komt de tekst in de al bestaande balk van Conform te staan!
    Lightspeed
    Maartje Tindemans
    Lightspeed Support Omnichannel
    Lightspeed HQ
  • kielenkielen Member Berichten: 93 ✭
    @Maartje, o:) perfect, dank je wel. Ga ik van het weekeinde proberen. :)
    Kees Kielen

    www.manivivendi.nl
  • BeauBBeauB Member Berichten: 1

    Hi,

    Het is gelukt, leuke uitvinding. Alleen werkt bij ons de kleur code niet.. Misschien dat we hem op de verkeerde plek hebben geplaatst..? Hebben meer mensen dit?

    Groetjes

  • SharleneSharlene Moderator, Lightspeed Staff Berichten: 128 moderator
    24 juni aangepast

    Hey @BeauB, deze moest inderdaad op een andere plek:


    Hij moest verplaatst worden naar .wsa-demobar in plaats van .wsa-demobar a 😄

Log In of Registreer om te reageren.