Counter (nedtællingsfunktion)
I denne artikel:
Sæt fokus på dine begivenheder
Med denne smarte app kan du indsætte en nedtællingsfunktion på din webshop. Du kan bruge appen til at gøre opmærksom på en begivenhed du afholder på en bestemt dato, en konkurrence eller tidsbegrænsede tilbud og kampagner. Appen sætter fokus på de vigtige tilbud og hjælper dig med at sælge mere.
Se også: Bliv klar til udsalg med vores Black Week tema-artikel
Du kan benytte nedtælling til:
- Black Week og Black Friday
- Cyber Monday
- Valentine's Day
- Singles Day
- Julehandel
- Januarudsalg
- Mærkedage
- Generelle udsalgsdage, arrangementer, konkurrencer, lodtrækning mv.
Bemærk: Funktionen understøtter i nuværende version følgende designs:
• Classic
• Ilumina
• Palette
• Rooty
• Simpl
• Sprout
• Terrarium
Hvis du benytter et andet design end dem vi har listet herover, eller hvis du har foretaget tilretninger af dit nuværende design, så kan det være at du skal tilpasse tælleren før den vises korrekt på din shop.
Features
Når du holder udsalg på din webshop, så vil du gerne have at flest muligt ser de gode tilbud. Brug nedtællingsfunktionen til at sætte fokus på udsalget og sælg endnu mere!
Du kan selv indstille:
- Begivenhedens navn.
- Dato for begivenheden (tæller ned fra den aktuelle dato til den angivne dato).
- Farver på tekst og baggrund.
- Oversættelse til andre sprog.
Når datoen er nået, skjules tælleren automatisk. Dette kan kombineres med et periodestyret billedbanner, der kan tage over, når tælleren er skjult, for at henvise til den pågældende begivenhed. Du kan se eksempler på dette i denne artikel.
Sådan kommer du i gang
For at installere denne app på din webshop, skal du blot kopiere en lille stump kode (JavaScript) og sætte den ind i dit design. Vi gennemgår indsætning af JavaScript trin for trin i denne artikel.
Bemærk: Indsætning af JavaScript kræver at din nuværende abonnementspakke understøtter dette. Hvis du er i tvivl om hvilken pakke du har, er du velkommen til at kontakte vores kundeservice.
Gå til Webshop > Design klik på menuen Handlinger og vælg Indsæt JavaScript:
Indsæt nedtællingskoden (se Download herunder) i redigeringsfeltet med titlen Sidens indhold (bunden):
Husk at gemme dine ændringer. Bemærk: Hvis koden f.eks. indsættes i Sidens header, så vil siden ikke være færdigindlæst når scriptet afvikles, og det vil derfor ikke fungere efter hensigten.
Download
- Du kan downloade nedtællingskoden her: counter-script.zip
Vigtigt: Så snart du klikker Gem i design manageren vil nedtællingsfunktionen være online. Du bør derfor foretage dine indstillinger (tilpasning af titel, dato og tidspunkt i koden) inden du gemmer app-koden. Du kan også arbejde på en kopi af dit design så du undgår utilsigtede ændringer på din live-shop.
I toppen af koden har du mulighed for at sætte følgende værdier:
- Title: Denne skal sættes til titlen, som vises i toppen af counteren. Dette kan f.eks. være
'Dage til Black Week'
,'Dage til jul'
eller'Dage til den store premiere'
mv. - End_time: Denne værdi bruges til at sætte tiden som man ønsker at countdown appen skal tælle ned til. Vigtigt: Husk at angive måned på engelsk (Oktober = "oct", Maj = "may" etc.) og benyt formatering magen til vores eksempel, f.eks.
'nov 20, 2023 00:00:00'
. - Text_color: Her indsættes evt. farvekode til teksten i banneret.
- Background: Her indsættes evt. farvekode til baggrunden af banneret.
- Font: Her indsættes navn på evt. alternativ font (skrifttype). Værdien "inherit" gør at shoppens nuværende font benyttes.
- Andre variabler: Days, Hours, Minutes og Seconds benyttes til at lave oversættelserne til tidsenhederne, som bruges i countdown koden. Disse kan tilpasset hvis du benytter koden på andre sprog.
TIP: Du kan benytte denne farvevælger til at generere nye farvekoder. Kopier farvekoderne fra felterne som vist her:
En korrekt CSS-farvekode starter med "#" og hele strengen kopieres over så f.eks. #ff0000
vil stå som 'Text_color': '#ff0000'
i vores counter kode.
- Farvevælger: Mozilla Color picker tool
Nyttige links
- Bliv klar til udsalg med vores Black Week tema-artikel
- Hvordan indsætter jeg JavaScript?
- Læs mere om sikker redigering af designs i denne artikel
- Du kan læse mere om tilpasning af design her
- Læs mere om ændring af design med CSS i denne artikel