Säg att du ska ha en kampanj i din butik med reapriser på alla varor i nån eller några varugrupper eller av ett visst varumärke. Målet med din kampanj är så klart att få sälja mer, men hur ska dina besökare få reda på att kampanjen ens existerar? Om de går in och tittar på enskilda artiklar så kommer de kunna se det sänkta priset, men om du vill få impulsköpen som kommer just av att det är billigt så måste du visa upp din kampanj där besökarna ser dem utan att behöva leta.
|
Vad menar vi med "kampanj" här? |
Startsidan för din butik är en utmärkt plats att lägga in information om kampanjer. När du växlar kampanjer blir det också ett naturligt tillfälle att uppdatera startsidan, vilket gör att återkommande besökare ser att det händer saker i din butik, vilket i sin tur leder till att de har anledning att komma tillbaka oftare i framtiden.
I den här guiden går vi igenom några sätt som kan användas för att få en snygg layout med olika widgets. Naturligtvis ger den här guiden bara förslag på hur man kan göra och inte hårda regler som måste tillämpas.
Nedan kommer vi gå igenom hur dessa två kampanjstartsidor skapats.
Vart ska man komma om man klickar på en kampanjbild på startsidan?
Det finns olika sätt att tänka här. Om en besökare är tillräckligt intresserad av ett kampanjbudskap att klicka på det vill du troligen visa upp artiklar ifrån kampanjen för besökaren så snart som möjligt. Om kampanjen är för en specifik varugrupp eller ett varumärke så är det därför rimligt att klicket tar besökaren till sidan för respektive varugrupp/varumärke. Med tillvalsmodulen Filter kan du även göra en mer avancerad länkning som går till ett sökresultat av flera varugrupper eller varumärken som ingår i kampanjen. Men du kan också skapa en egen innehållssida för kampanjen där till exempel kampanjens villkor kan gås igenom med mer text än du kanske vill lägga direkt på förstasidan och med skyltfönster visa upp specifika varor ifrån kampanjen. Vad som blir bäst beror på hur kampanjen är utformad.
Bra bilder för kampanjer
Typiskt vill du inte använda rena produktbilder för att presentera en kampanj på startsidan. Om du är en liten återförsäljare har du dock troligen inte möjlighet att för varje kampanj ta in fotograf och modeller för att få till bra kampanjbilder. Använd då istället leverantörsbilder. Om du kontaktar din leverantör så har de ibland bra pressbilder som du kan använda. Till exempel, om vi vore återförsäljare av Scott Sports så skulle vi kunna använda någon av alla de bilder de de presenterar på http://marketing.scott-sports.com/ under kategorin "Action Imagery" förutsatt att vi följer deras användaravtal.
Om du inte kan eller inte vill använda leverantörsbilder, till exempel när du inte vill att kampanjbilden ska framhäva för ett specifikt varumärke, så kan du istället ta hjälp av bilder ifrån oberoende bildbanker. Se guiden Hur kan jag hitta bilder som jag har rätt att använda i min shop? I våra exempel för vår demoshop nedan använder vi genomgående bilder ifrån bildbanker.
Oavsett var du får dina bilder ifrån bör du tänka på att om en bild har stort fokus på en specifik produkt så kommer en del kunder troligen anta att din butik säljer just den produkten. Om du istället har en allmän stämningsbild som har produkter i sig utan att fokus ligger på en specifik produkt så kan du troligen komma undan med det utan att kunder försöker leta upp produkterna i bilden. Jämför bilderna nedan. I den övre bilden är det inte omöjligt att några kunder försöker leta upp hängmattan på bilden i din butik. Få kunder kommer nog göra samma sak med tältet i den nedre bilden. Tänk också på att även om din butik säljer hängmattan i den översta bilden så vill du se till att ha flera av den i lager så att den inte tar slut tidigt i kampanjperioden
Specifika kampanjlayouter
Exempel #1: Tre puffar under ett bildspel
Skärmbilden nedan ifrån vår demobutik visar en del av en startsida med en kampanj för mjukisdjur och tre puffar under som framhäver tre varugrupper lite extra. Bilden för gosedjurskampanjen är en av flera i ett bildspel. Det framgår så klart inte av en skärmbild, men denna bild växlar alltså på sidan till bilder med andra kampanjer och säljbudskap. Vi kommer nedan gå igenom hur denna layout skapats.
Gör så här:
Följande arbetsflöde är bara ett exempel på hur man kan göra. De flesta steg går att göra på flera olika sätt eller kan till och med hoppas över om de inte känns lämpliga för just din butik.
Ofta vill du börja med att kopiera butikens nuvarande startsida så att du får med de widgets som ska vara kvar, så som skyltfönster med nyinkommet, andra kampanjer som inte ska utgå eller sociala medier-widgets. Döp den nya sidan till något lämpligt och beskrivande så som "Startsida kampanj vecka 5-6" medan du arbetar på den. Innan du lägger den live kommer du vilja ändra sidans namn till det som ska synas i brödsmulevägar och liknande, men innan dess kan det vara förvirrande att ha flera olika sidor som heter likadant i admin men har olika sökvägar.
Sätt den nya startsidan som Dold medan du jobbar med den så att du kan ladda sidan i en webbläsare och se vad dina ändringar gör, medan den inte syns för någon som inte vet sidans URL.
Gör plats för den nya kampanjen
Om vi inte vill att vår startsida ska bli väldigt stor i höjdled behöver vi troligen först ta bort några element ifrån den gamla startsidan. Istället för att radera widgets vi tror vi vill återanvända väljer vi att inaktivera dem så att deras inställningar finns kvar till senare.
Vår gamla startsida har tre widgets som inte längre ska vara kvar men som vi kanske vill återanvända på en senare version av startsidan. Vi inaktiverar tre av dem genom att klicka ikonen med den tända glödlampan intill dessa widgets.
Bilden för nyårserbjudandet har årets år i sig så den kommer därför inte att användas igen. Vi raderar den därför genom att klicka på soptunneikonen.
Skyltfönstret med nya artiklar och widgetarna för sociala medier vill vi ha kvar längst ned på sidan på vår nya startsida, så dessa låter vi helt enkelt ligga kvar.
Nu ligger de widgets vi kanske vill återanvända som Inaktiverade och vi har plats att lägga in våra kampanjbilder.
Se bildernas dimensioner
Vårt exempel använder fyra bildplatser, men innan vi kan ladda upp dessa bilder behöver vi lista ut vilka storlekar bilderna ska ha. Fulla bredden för innehållet i din butik beror på din mall. Detsamma gäller för marginalerna mellan bilder. Detta betyder att du kanske inte kan använda samma siffror på bredd och höjd för bilderna i din butik som de vi går igenom nedan. Men du kan använda samma sätt för att se vilka dimensioner bilderna i din butik bör ha.
De mått bilderna bör ha för att passa just vår demobutiks mall. Nedan går vi igenom hur vi hittat dessa mått.
För just layouten ovanför vill vi dela in sidan i tre delar. Men widgetarna för Facebook-kommentarer och Instagram-flöde, som fortfarande ska vara kvar längre ned på sidan, vill vi ska ta upp halva sidbredden var. Vi använder därför 6 kolumner på sidan och lägger in widgets enligt bilden nedan.
Genom att i admin titta på en widget som spänner över alla kolumner ser vi att hela bredden i vår demobutik är 1000px. Bilderna i vårt bildspel ska därför vara 1000px breda och ha samma höjd som varandra så att de ser snygga ut vid övertoningen mellan bilderna.
Om vi tittar på våra widgets för puffarna så ser vi att de fått bredden 320px. Våra puff-bilder ska därför vara 320px breda och ha samma höjd som varandra för att deras nedre kant ska komma i linje med varandra.
Lägga in bildspelet
Vi skapar våra bildspelsbilder i ett bildediteringsprogram och ser till att de får storleken vi räknade ut i steget innan. I admin laddar vi upp dem till en ny mapp i filarean som vi döper till "Bildspel kampanjvecka 5-6". Eftersom vi vill att våra bilder i bildspelet ska vara länkande så klickar vi för varje bild i vår bildspelsmapp på i-ikonen längst ut till höger på raden.
Som Länk skriver vi in en intern länk till sidan vi ska länka till. I fallet för mjukisdjurskampanjen länkar vi alltså varugruppen "mjukisdjur". Notera alltså att vi inte skriver in hela domännamnet med http:// då detta skulle skapa en absolut länk.
Under Webbplats -> Sidor går vi igen till kampanjstartsidan och lägger in en ny widget för ett bildspel. Vi väljer mappen vi skapat i filarean och ställer in att bildspelet ska spänna över alla 6 kolumner på sidan.
Skapa puffarna med layoutat innehåll
Vi börjar med att i ett bildediteringsprogram göra så att våra tre varugruppsbilder får rätt storlek enligt ovan. Vi laddar sedan upp dessa bilder till filarean. (Webbplats -> Filarea.)
Vi har ovan skapat tre widgets med Layoutat innehåll och låtit varje widget spänna över två kolumner var. Vi har kallat varje widget till "Puff [varugruppsnamn]" så att vi i admin enkelt kan se vilken widget som gör vad. Eftersom vi lämnat valet för Rubrikmall på Ingen rubrik syns dessa namn inte på sidan.
För varje puff under fliken Inställningar skapar vi vårt layoutade innehåll genom att klicka på ikonen för "lägg till bild" editorn.
Eftersom bilderma ska visas i exakt den storlek vi laddat upp behöver vi inte röra inställningarna för bildstorlek.
Under bilden skriver vi rubriken och sätter som rubrik med Format -> Rubriker -> Rubrik 3. Under skriver vi texten vi vill att puffen ska ha. Ofta ger korta texter ett bättre intryck på startsidan än långa paragrafer som förklarar dina varugruppers förträfflighet. Notera att vi inte in några radbrytningar för texten, även om texten blir bredare än bilden. Text i widgeten layoutat innehåll kommer automatiskt radbrytas där den blir bredare än widgetens bredd.
Vi vill att bilden och rubriken ska länka till varugruppen vattenlek, så vi markerar dessa och trycker knappen Infoga/redigera länk. Vi sätter sedan länken till en intern länk till varugruppen.
I vårt exempel har vi undervarugrupper för flytleksaker, badleksaker, vattenpistoler och barnpooler så vi vill då att i texten länka till varje undervarugrupp. Vi markerar därför respektive ord och klickar knappen Infoga/redigera länk igen.
Upprepa proceduren för de två andra puffarna.
Spara, ladda om sidan och kontrollera att allt ser ut som du tänkt dig och testklicka på alla länkar så de fungerar som de ska.
Sätt den nya kampanjstartsidan som startsida
När allt på kampanjstartsidan ser bra ut och alla kampanjbudskap korrekturlästs inväntar du att kampanjen ska läggas live. När det är dags för detta går du till kampanjsidan och under fliken Allmänt sätter du Titel till det den ska vara, Status till Aktiverad och kryssa i rutorna Använd som startsida och Använd som shopstartsida. När du trycker knappen Spara så ligger den nya startsidan live. Ladda om startsidan för din butik och kontrollera att allt ser ut som det ska.
Den gamla startsidan går fortfarande att se för den som vet URL:en till den. Gå därför in i admin och sätt den gamla startsidans Status som Inaktiverad så att inte någon besökare kan råka hamna där och kanske till exempel se erbjudanden som inte längre gäller. Det är också rimligt att byta Titel till något annat än det den nya startsidan nu använder, så som "Startsida före kampanjvecka 5-6". Om du vet att du aldrig kommer vilja använda layouten eller innehållet ifrån en gammal startsida igen kan du naturligtvis istället radera sidan.
Exempel #2: Tre puffar på sidan av en splash
|
Denna layout är mer avancerad och guiden nedan är därför riktad till mer vana användare. |
Nedan är en skärmbild ifrån en demo-butik som har kampanj på gaming-produkter. Kampanjen presenteras på startsidan med en splash-widget som länkar till en kampanjsida. Till vänster om splash-widgeten ligger tre puffar som länkar till varugruppssidor. Vi ska nu gå igenom hur vi skapat denna layout.
Gör så här:
Följande arbetsflöde är bara ett exempel på hur man kan göra. De flesta steg går att göra på flera olika sätt eller kan till och med hoppas över om de inte känns lämpliga för just din butik.
Skapa den nya sidan och gör plats för kampanjen
Dessa steg gör vi på samma sätt som i exempel #1.
Beräkna bildernas dimensioner
Vårt exempel använder fyra bilder, men innan vi kan ladda upp dessa bilder behöver vi lista ut vilka storlekar bilderna ska ha. Fulla bredden för innehållet i din butik beror på din mall. Detsamma gäller för marginalerna mellan bilder. Detta betyder att du kanske inte kan använda samma siffror på bredd och höjd för bilderna i din butik som de vi går igenom nedan. Men du kan använda samma sätt för att räkna ut vilka dimensioner bilderna i din butik bör ha.
De mått vi nedan räknar fram att bilderna bör ha för att passa just vår demobutiks mall.
För vår layout vill vi dela in sidan i fyra kolumner. Genom att i admin titta på en widget som spänner över alla kolumner ser vi att hela bredden i vår demobutik är 1000px. Vi vill nu veta hur breda våra bilder ska vara. Vi vill även räkna ut vilka marginaler vår butiks mall har mellan sina widgets, då vi kommer vilja sätta samma marginal i höjdled mellan våra tre varugruppsbilder. Om vi skapar en rad där en widget spänner en kolumn och en annan spänner över övriga tre kolumner ser vi att dessa får bredderna 235px och 745px. Anledningen att summan av dessa blir 980px istället för 1000px är marginalen som ligger mellan widgetarna. Det betyder att i vår demobutik så är marginalerna mellan widgets 20px, (dvs 1000px-980px).
Bilden vi vill använda för vår splash-widget är högupplöst och tar i original upp 4608x3456px och 7.26MB, dvs alldeles för stor för att ladda upp. Eftersom vi vill att splash-widgeten ska vara 745px bred börjar vi därför med att i ett bildediteringsprogram krympa ned vår splash-bild till 745px bredd och spara den i som jpg med ca 90% komprimeringsgrad. Då vi behåller proportionerna blir den krympta bilden 745x559px och tar nu endast upp 42kb.
559px blir då också den totala höjden vi vill att kolumnen med våra tre varugruppsbilder ska ta upp. Eftersom det kommer bli två marginaler på vardera 20px mellan bilderna så tar själva bilderna upp 559px-20px-20px=519 pixlar på höjden. 519px/3 bilder ger oss 173px på höjden för varje varugruppsbild. Då en kolumns bredd i vår mall var 235px ska alltså våra varugruppsbilder vara 235x173px. I ett bildredigeringsprogram krymper och beskär vi därför bilderna till dessa mått.
Texten på våra varugruppsbilder ligger på själva bilden, alltså inlagt i bildediteringsprogrammet. Detta då vi i detta fall inte kan använda splash-widgeten då vi vill lägga de tre bilderna ovanför varandra utan att ta upp tre rader i layouten. Vi ser till att använda samma font på bilderna som butikens mall för att få ett enhetligt intryck på sidan. 
Lägga in splashen
Bilden vi använder till vår splash, som den ser ut utan rubrik och undertext.
Vi laddar upp den krympta splash-bilden till filarean, förslagsvis i en mapp döpt efter kampanjen så att vi när kampanjen är över vet vilka bilder vi kan radera ifrån filarean. Vi lägger sedan in Splash-widgeten på sidan, se denna guide för detaljer. Vi vill att splashen ska ta upp 75% av sidans bredd, så vi låter splashen ta upp tre av fyra kolumner.
Varugrupperna Handkontroller och Gamingmöss ligger i vår exempelshop båda som undergrupper till huvudgruppen Gaming. Vår shop har tillvalsmodulen filter, och vi vill att ett klick på splashen ska leda till en filtrerad sökning som visar artiklarna i dessa undergrupper. Vi gör därför i vår butik en sökning som filtrerar på detta sätt och kopierar URL:en. Sista delen i URL:en (från och med /sv/) sätter vi som Länk för hela ytan i splashen.
Lägga in varugruppsbilderna under varandra
Till vänster om splashen lägger vi in widgeten Layoutat innehåll som vi kommer att fylla med våra tre varugruppsbilder. I vårt layoutade innehåll under fliken Innehåll högerklickar vi i editorn och väljer Infoga tabell och tabellstorleken 1x5 rutor.
Varför en gånger fem rutor i tabellen när vi bara vill lägga in tre bilder? Svaret är att vi vill ha marginaler mellan bilderna, så vi lägger endast in bilder i översta, mittersta och understa tabellcellen.
Högerklicka på tabellen och välj Tabellegenskaper. Sätt Cellmellanrum, Cellpadding och Ram till 0. På så vis får vi elementen i tabellen att ligga exakt på pixeln där vi vill.
Klicka sedan i den översta tabellcellen och lägg in den första varugruppsbilden med hjälp av knappen Infoga bild.
Upprepa detta för de andra två bilderna i mellersta och nedersta tabellcellen.
Högerklicka i en tom tabellcell och välj Rad -> Radegenskaper och sätt Höjd för raden till den marginal i pixlar du vill ha mellan bilderna. I vårt exempel sätter vi den till 20px som vi ju räknade ut tidigare. Upprepa för den andra tomma tabellcellen.
Om du nu sparar och laddar om sidan bör det se ut som ovan. Notera att marginalerna får sidans bakgrundsfärg då vi inte satt någon bakgrundsfärg för vårt layoutade innehåll.
Så nu ser det bra ut, men varugruppsbilderna är ju inte länkade till sina respektive varugrupper. Gå in på det layoutade innehållet igen och högerklicka på respektive varugruppsbild och välj Infoga/redigera länk. Som URL sätter vi en intern länk till varugruppssidan, dvs ungefär /sv/articles/23/mobiltillbehor, alltså inte hela URL:en http://www.dinbutikssida.se/sv/articles/23/mobiltillbehor.
Spara, ladda om sidan och testklicka för att se att alla länkar fungerar som de ska.
Sätt den nya kampanjstartsidan som startsida
Detta görs på samma sätt som vi gick igenom för exempel #1.