Forside » Support » Endre designen for mobilvisning

Endre designen for mobilvisning

Starter No
Mini Yes
Active Yes
Pro Yes

Nettbutikkens mobilvisning er optimalisert for å være så enkel og rask som mulig. Designen er derfor forenklet og alt ekstra er fjernet. Her er noen tips om hvordan du kan endre designen på mobilvisningen, på en liknende måte som for den vanlige visningen.

Siden det finnes mindre muligheter for å endre designen i mobilvisningen, enn hva som finnes for den vanlige visningen, så er det viktig at innholdsfeltene i administrasjonen er fylt med korrekt informasjon. F.eks. bør logoen være lastet opp under Innstillinger > Generelle Innstillinger. (I den vanlige visningen kan man legge til logoen med f.eks. et bilde). Det samme gjelder for de ferdiglagde informasjonssidene (generelle vilkår, kontaktinformasjon, rettningslinjer for personvern osv.), disse trenger man ikke bruke i den vanlige visningen, det kan f.eks. brukes  vanlige innholdssider . I mobilvisningen brukes disse lenkene til informasjonssidene i bunnteksten og bø derfor også ha riktig informasjon. Kontroller og test alle lenker i mobilvisningen før du lanserer butikken.

Startsidens design

For den klassiske visningen kan du velge hvilke tekstfelt (1, 2,3, & 4) du vil vise på startsiden, under Innhold/kategorier > Dataark visning > Layout. . For mobilvisning er ikke disse innstillingene tilgjengelige,  der vises alle tekstfeltene. Dette gjør at du om du vil vise innhold i mobilvisning som ikke vises i den klassiske visningen, kan du fylle inn f.eks. i tekst i feltet "Lang beskrivelse (3)" for så å velge å kun vise tekstfeltet 1 og/eller 2 i layoutinnstillingene.

Forhåndsvisning av mobilversjonen

Alle sider i butikken kan forhåndsvises i mobilversjon ved å klikke på knappen "vis mobilvisning" i administrasjonen.

Man kan även titta på mobilvyn på datorn genom att byta ut .sf i url-adressen till .mobile. Det här gör det enklare att ändra och testaCSS-kod ochjQuery-kod med hjälp av webbläsarens web developer-verktyg.

Endre designen med egen kode

Som for den klassiske visningen, kan mobilvisningen endres med CSS- og jQuery-kode. Koden legges inn på siden Innstillinger > Generelle innstillinger > Avanserte innstillinger for mobilvisning, slik at koden koden legges i html-kodens head-område for alle mobilsider.

Større logo

<style type="text/css">

.Header { height: 100px; }

.Header img.Logo { height: 90px; margin: 5px; max-height: 90px; }

</style>

 

Større produktbilder i produktlistene

<style type="text/css">

.Products .ProductSmallImage { max-width: 200px; max-height: 200px; }

</style>

 

Større produktbilder på produktsidene

<style type="text/css">

.ProductImage { max-height: 300px; }

</style>

 

Vis produktene under hverandre på startsiden

Produktene på startsiden vises på en rad, og man må bla til høyre eller venstre på siden, for å se flere produkter. Hvis man i stedet vil at produktene skal vises under hverandre og bla nedover, for å se flere produkter, kan det gjøres med denne jQuery-koden:

<script type="text/javascript">

jQuery(function() {

 jQuery('#ProductsSlidebox').after('<div id="NotSlideBox"></div>');

 jQuery('#ProductsSlidebox ul').appendTo('#NotSlideBox');

});

</script>

 

<style type="text/css">

.Homepage .slidee li { clear: both; width: 85%; margin-bottom: 30px; }

.Homepage img.ProductSmallImage { max-width: 200px; max-height: 200px; }

</style>

Beskrivelse synlig på produktsidene

Som standard er beskrivelsene på produktsidene skjult, og vises når det trykkes på overskriften. Beskrivelsen kan i stedet vises for produktet med denne koden:

<script type="text/javascript">

jQuery(function() {

 jQuery('.Article .ShowMore').click();

});

</script>

 

Kategorilisten åpen som standard

Som standard er kategorilisten stengt, og må aktiveres for å åpnes. Kategorilisten kan settes til å være åpen som standard med denne koden:

<script type="text/javascript">

jQuery(function() {

 if(jQuery('div.FrontPage').length){

   jQuery('.DropdownTrigger').click();

 }

});

</script>

 

Hvis du trenger hjelp til å endre mobilvisningens utforming, ta gjerne kontakt med vår kundestøtte!

Share on social media