Terrarium template

Denne manual vil hjælpe dig med at opsætte Terrarium designet. Afhængigt af dine behov og stil kan du skippe de trin du ikke mener er nødvendige for din webshop. Manualen indeholder informationer om opsætning af de ekstra funktioner som følger med Terrarium, så det er en god idé at kigge i manualen for din webshop platform for yderligere instruktioner. 

 

Vi har skabt Terrarium baseret på undersøgelse af de nyeste webshop design tendenser og feedback fra vores kunder. Vi håber at du bliver glad for designet og ønsker dig en succesfuld forretning!

Vælg et tema

For at kunne starte med at bruge Terrarium som dit design, skal du i din administration gå til Webshop > Design > Besøg Design Store og vælge Terrarium. Når du kan se Terrarium mellem dine designs, skal du trykke Tilpas.

 

Terrarium findes i tre temaer, som du kan vælge imellem, det gør du under Opsætning > temaer > farvetemaer og trykker Gem. Tryk på Se online for at se hvordan din webshop ser ud. Det gør ikke noget hvis det ikke ser ud som forventet, de næste trin vil vejlede dig i yderligere opsætning af designet.

Terrarium

Blooming Tea

Contrast

Forsidebillede

Dette billedelement er placeret på forsiden lige under navigations menuen. Når du skal vælge et billede, skal du overveje hvad der ville repræsentere din webshop bedst muligt, da dette vil gøre det mere mindeværdigt for dine besøgende, hvilket betyder der er større chance for at de kommer igen.

Billedstørrelse

For af udnytte designets fulde potentiale, når det kommer til grafik, skal du sørge for at uploade billeder i høj billedkvalitet. I forhold til billedelementet på forsiden anbefaler vi at du optimerer billede med dimensionerne 1860X1046 ved 72dpi.

For at optimere et billede kan du bruge  Optimizilla komprimerings værktøj som hjælper med at reducere en fils størrelse samtidigt med at bibeholde billedets kvalitet. Du skal bare uploade billede, ændre kvalitets instillinger, hvis det er nødvendigt og tryk download.

For at kunne vise et stort billedelement med to overskrifter og en 'call to action' knap skal du gå ind i din forsides sidetræ og vælge billedelement. Upload et nyt billed eller vælg et eksisterende fra din fil manager og tryk Gem. Dit billede vises nu i panelet.

 

Brug en fængende overskrift og en 'call to action' knap

Tilføj indhold

Gå til Ekstra Info for at tilføje overskrifter og en 'call to action' knap. Indsæt det link, hvor du ønsker knappen skal føre hen, en titel som vil fungere som hovedoverskriften, en beskrivelse som vil være en sekundær overskrift og en link tekst, som vil være teksten på knappen. Du skal indtaste noget i titel feltet, ellers vil de andre elementer ikke vises.

Du kan justere denne sektions højde fængende at gå til Design Manager of vælge en værdi fra den dropdown ved Forside billed højde værdi indstilling og derefter gemme din ændringer. Vælg mellem værdier på  35%, 40%, 50%, 60%, 70% and 100% Hvilket er den plads billedet vil fylde på forsiden. Placeringen af overskrifter og knap vil tilpasse sig billedets højde.

Tip: Indsæt et 'mellemrum' i  Titelfeltet, hvis du ikke vil have en hovedoverskrift

Kategoriliste

Produktkategorierne kan give dine kunder et godt overblik over hvad din webshop kan tilbyde, derfor er disse også tilgængelige på nøgle placeringer i designet.

Alle første niveau kategorier vil vises i en dropdown menu under shop menu. På den måde kan dine kunder altid nemt tilgå produktkategorierne, når de besøger din webshop.

Terrarium tilbyder også en fuld-vidde sektion som indeholder en liste med første niveau produktkategorierne, hvilket vil blive vist på desktop. For at aktivere denne funktion skal du gå til Webshop > Design, trykke Tilpas og finde Vis produktkategorier på forside instillinger og indstille dem til Ja, herefter skal du trykke Gem. Elementet vil blive vist lige under forside billedet. Dette område vil være en af de første ting dine kunder ser, når de lander på din webshop, og på dette tidspunkt har du mulighed for at fange deres interesse og motivere dem til at begynde at kigge rundt. 

Du kan ændre kategori-listens baggrund og tekst farve ved at indstille dem i Webshop > Design > Tilpas under Template farver sektionen og derefter trykke på Gem. 

 

Dropdown liste over første niveau kategorier

Kategori 'fuld-vidde'  sektion

Produktliste

Ligesom i andre designs har du muligheden for at vise produktlisten i enten et 'række layout' eller et 'kolonne layout'. Når du bruger Terrarium, tilbyder 'kolonne layoutet’ en mere simpel og æstetisk visning af produkterne, da denne kun viser navn, billede og produktets pris. 

 

Hvis du vælger 'kolonne layout', kan du vise et overlay (kun på forsiden) som vil vise sig, når kunden hviler over produktet. Dette gør du ved at gå til Webshop > Design > Tilpas og indstille Vis produktlisten overlay på forside til Ja. Visningen af produkterne vil indeholde en kort beskrivelse, bedømmelse og 'call to action' knap, hvis disse funktionaliteter er tilgængelige. Læs mere om at oprette et produkt i manualen.

 

For at sikre at produktbillederne fremstår flottest muligt i produktlisten såvel som på produktsiden, anbefaler vi at du bruger dimensionerne: 1428x940 at 72dpi.

 

Kolonne layout produktliste med overlay

Unique selling points

Brug USP 'fuld-vidde' sektionen til at skabe opmærksomhed omkring din webshops stærke sider, for eksempel specielle tilbud, gratis levering eller organiske produkter.

 

Unique selling points fuld-vidde sektion

For at aktivere denne funktion, skal du gå til Webshop > Design > Tilpas, åbne bjælken Indstillinger og indstille Vis USP sektionen til Ja, herefter skal du trykke Gem. For at ændre indholdet i USP'erne, skal du gå til Handlinger > Designspecifikke tekster og ændre følgende felter:

 

TOP_USP_1_large - Hovedoverskrift venstre

TOP_USP_1_small - Sekundær overskrift venstre

TOP_USP_2_large - Hovedoverskrift i midten

TOP_USP_2_small - Sekundær overskrift i midten

TOP_USP_3_large - Hovedoverskrift højre

TOP_USP_3_small - Sekundær overskrift højre

 

Når du er tilfreds med indholdet, skal du trykke Gem. Ved at trykke Se online kan du se resultatet.

Du kan vælge denne sektions baggrundsfarve og tekstfarve under Tilpas, så det passer til resten af siden. Det gør du ved at instille USP baggrundsfarve og USP sektion tekst farve og derefter gemme.

 

Tip: Du kan være kreativ med denne sektion. Hvis du har nogen HTML-færdigheder, kan du nemt tilføje Font Awesome ikoner i overskriften, som passer til teksten.

Social media feed

Social medier-sektionen af dette template kan bruges til at indsætte indhold fra dine sociale medier på dit website.  I det efterfølgende eksempel vil vi hjælpe dig med at indsætte en Instagram widget, som vil vise dine Instagram-billeder på dit website. 

 

Instagram feed ved brugen af  SnapWidget

Step 1 - Opret en ny side

For at komme igang skal du oprette en ny side i dit sidetræ. Vælg en titel og en overskrift til siden, som på websitet vil vises som sektionens overskrift og undertitel. Du skal indstille siden til at være gemt i menuen, da den kun skal bruges til at gemme på din widget.

Step 2 - Vælg et værktøj

For at kunne lave en Instagram widget, skal du bruge et tredjeparts værktøj. I denne guide har vi valgt at bruge Snapwidget, fordi den er nem at bruge og har mange muligheder for at kunne personalisere designet.

 

Tip: Du kan finde andre værktøjer ligesom Snapwidget ved at søge på "social media widget" i din browser. Eksperimentér med de forskellige værktøjer og vælg den der passer bedst til dine behov.

Step 3 - Lav din widget

For at komme igang skal du gå til: https://snapwidget.com  og scrolle ned indtil du når til overskriften: Embed your photos and videos with a list of different options. Vi vil gerne bruge et gratis værktøj som skaber et responsivt GRID af INSTAGRAM-billeder, så det er denne du skal vælge fra listen.

 

Et ny vindue vin åbne sig med et preview af din widget og de forskellige muligheder du har til at personalisere din widget. For at komme igang med at personalisere din widget skal du indtaste din Instagrambruger og godekende Snapwidgets vilkår. Nu burde du kunne se et preview med billeder fra din instagramprofil. I efterføægende trin vil hjælpe dig med at personalisere din widget. Hvis du løbende vil se hvordan din widget ser ud, kan du genopfriske ved at trykke på preview-knappen.

 

  • Change thumbnail size - Dette er størrelse af de viste billeder (Eksempel: indtast 200, hvilket vil ændre den automatiske størrelse på billederne til 200 pixel i bredde og højde). 

  • Layout - layoutet på dit billed-grid (Vi har valgt 6x1 i Terrarium templatens widget. Det betyder at billederne bliver arrangeret i én række af seks billeder).

  • Photo border - tilføjer en kan på alle billeder

  • Background color - tilføjer en baggrundsfarve til din widget ( skal skal indtaste en valid hex-farve, ligesom du kender det fra Design manageren).

  • Photo padding - tilføjer mellemrum mellem alle billeder (vi har indtastet 10, da dette vil tilføje 10 pixels mellemrum mellem billederne).

  • Hover effect - Vælg en effekt som vises når man holder musen over et billede ( vi har valgt fade, da vi synes denne passer godt til effekterne i Terrarium templaten). 

  • Sharing buttons - social sharing-knappen vil vise sig når man holder musen over et billede - på denne måde kan dine kunder nemt dele billeder på deres sociale medier. 

  • Responsive - Denne funktion vil sørge for at billederne tilpasse sig den browser de vises i (vi anbefaler at du vælger ja til denne funktion).

 

Når du har foretaget alle dine ændringer, kan du trykke preview en sidste gang for at sikre at du er tilfreds med det endelige resultat. Hvis ikke skal du blive ved med at foretage ændringer indtil du er tilfreds med resultatet. Når du er tilfreds med din widget, skal du trykke på get widget-kanppen. Nu vil der åbne sig et nyt vindue, hvori din widgets kode vil være. Tryk på kopier til clipboard-knappen for at kopiere hele koden. 

Step 4 - Tilføj din widget

Når du har kopieret din widgets kode, skal du åben sideindholdet på din nye side. Her skal du skifte over til kilde/source-mode og indsætte din widgets kode. Når du skifter tilbage til tekst-mode vil du kunne se at din widget er vist i form af en iframe.

 

Indsat widget kode

 

Sidenindholdet vises son en iframe

Step 5 - Vis din widget

For at vise din widget på dit websites forside, skal du finde den side du oprettede i step 1's side ID. Den finder du under side data, under feltet Side ID. Kopier nummeret i dette felt, og gå til Webshop > Design. Her skal du i din kopi af Terrarium designet trykke Tilpas og finde Sociale medier sideindhold (side ID) feltet og indsætte Side ID nummeret. Efter du har gemt burde du kunne se din widget på dit website.

 

Tip: Eksperimentér med at implementere andre sociale medier-widgets såsom Pinterest eller Twitter. Implementeringsprocessen vil minde meget om den proces vi har beskrevet ovenover.

 

Side ID

Nyhedsbrev sektion

Nyhedsbrevets signup sektion er en god funktion til at få flere at tilmelde sig dit nyhedsbrev. Denne funktion muliggør at du kan vise en blanket i footeren på alle sider. For at aktivere denne funktion, skal du gå til Webshop > Design > Tilpas og indstille vis nyhedsbrev signup i footer til Ja.

 

Præsenter kort nyhedsbrevets indhold ved at tilføje en overskrift

 

Du kan tilføje en 'call to action' linje over blanketten under sprogsektionen og skrive sætningen i NEWSLETTER_SIGNUP_HEADLINE feltet.

Du kan vælge baggrundsfarve og tekstfarve under Footer nyhedsbrev sektion baggrundsfarve og Footer nyhedsbrev sektion tekst farve felterne.