Yderligere caching og performance

Ud over at vi har vores generelle caching der fungerer på sidebasis, og som bliver deaktiveret i det øjeblik en bruger logger ind, eller lægger noget i kurven, så har vi også en caching-funktion på blok-niveau som man selv skal implementere.

Den er brugbar hvis man fx har en masse smarty-kode til at rendere en menu, eller andre komplicerede ting – de ting kan nemlig sløve din shop en lille smule, da de måske skal lave en masse opslag. Afhængig af hvad du renderer selvfølgelig ..

<{get_cache name="my_cache" ttl=3600 assign="my_cached_data"}>

<{if $my_cached_data}>

  <{$my_cached_data}>

<{else}>

  <{cache name="my_cache"}>
    <!-- Her skal du skrive din egen kode -->
  <{/cache}>

<{/if}>

De to funktioner og blok-element du skal lægge mærke til er <{cache}> og <{get_cache}>.

<{cache}> bruges til at omkrandse den kode du vil gemme i din cache, og den skal have argumentet name=”…” for at angive navnet på cachen.

<{get_cache}> henter din cache ud, og den skal også have en name=”…” for at vide hvilken cache den skal hente. ttl=3600 er en Time To Live på din cache i sekunder, og hvis din cache er ældre end det du angiver kommer der intet resultat. Assign er valgfri, men anbefales. Den bruges til at assigne dit cachede data til en variable du senere kan checke på.

For at det virker optimalt skal du gøre som ovenstående, hvor du assigner din cache til en variable, og så checker om den er til stede. Er den til stede kan du vide dit cachede data. Ellers skal det renderes igen.

Update: Nørderne fra ClickStarter har leget med det og fundet en smart løsning på dynamisk indhold. Du kan se deres løsning her.

Sådan ændrer du selv lidt på instrumentbrættet

Nogle kan lide datteren, andre moderen. Så hvis du ikke lige kan lide placeringen af / farverne på knapperne i backend, så kan du selv style dem med CSS. Her kan du læse, hvor du rent praktisk skal indtaste din CSS. Dette indlæg viser dig, hvordan du finder ud af, hvordan du gør.

Log ind i Shoporama med f.eks. Firefox eller Chrome.

Hvis du f.eks. står under et rediger produkt og gerne vil fjerne f.eks. fanebladet “Abonnement” fordi du aldrig bruger det, så højreklik på det og vælg “Kontrollér element” eller “Inspicér element”. Så vil du få vist noget html om det element.

Fjerne faneblad med cssDet, man kan se her, er at det er et <li> element og at den ligger inden i en <div>, der har id’et “tabs”. Vi kan også se, det er det tredje <li> element, så en måde at fjerne det på er at indsætte

#tabs ul li:nth-child(3) { display : none; }

i vores “eget stylesheet” og vupti er fanebladet væk

Fjern abonnementfanen i Shoporama

Lad os tage et eksempel mere. Gem-knappen i bunden. Her er det endnu nemmere.

Når du højreklikker og vælger “Inspicér element”, så ser du dette

flytte gem-knappenNår du ser et id=”xxxx” så er dit arbejde rigtigt nemt. Nu skal du bare i eget stylesheet skrive

#savebutton { dine css regler }

Hvis vi f.eks. gerne vil give den en anden baggrundsfarve, så er det

#savebutton { background-color : #448C11 !important; }

Hvis du så også gerne vil have den til fast at sidde øverst på siden, så kan du ændre positionen til

position : fixed;
top : 10px;
left : 100px;

Så du ender ud med disse regler

#savebutton { 
background-color : #448C11 !important; 
position : fixed;
top : 10px;
left : 100px;
}

Og de giver dette resultat (uanset om du scroller).

Flytte gem-knap på ShoporamaBemærk: Vi opdaterer jo Shoporama i ny og næ. Så Abonnement-tab’en, der er nr. 3 kan pludselig blive nr. 4. Hvis det sker, så bliver din abonnements-tab synlig og den anden skjult. Så hvis du pludselig mangler noget, så prøv at slette alle dine CSS-regler.

Ellers er det bare at få lært noget CSS, så du kan få det til at se ud, som du vil.

 

 

Du skal bruge din tid på at være e-købmand

Ikke på kedelige ting som bogføring. Så vi gør, hvad vi kan for at gøre det nemmere for dig. Bruger du Billys Billing ver. 2, så kan vi automatisk bogføre dit Shoporama abonnement for dig, når vi hæver pengene. Ét bilag mindre at rode med.

For at aktivere det, logger du ind i Shoporama og klikker på dit firmanavn og vælg så “Send faktura”.

Automatisk bogføring af Shoporama fakturaDu kan selv vælge, hvilken konto du vil bogføre vores regninger på.

Nem bogføring med Shoporama

Klik gem og voilá – mindre bogføring – mere fritid.

2-trins log ind

Vi har øget sikkerheden i din shop og gjort det muligt at tilføje 2-trins log ind på Shoporama.

For at aktivere det, skal du logge ind som normalt, klikke på “Din konto” (kan også være dit firmanavn der står skrevet) i øverste højre hjørne

2-vejs log ind på ShoporamaDernæst klikker du på “2-steps login”

2-vejs log ind på ShoporamaTil sidst indtaster du dit mobilnummer (kun danske mobilnumre) og sætter flueben i “Aktiver 2-steps login” og klikker Gem.

2-vejs log ind på ShoporamaVupti… næste gang du logger ind, får du en sms kode tilsendt.

Du får en kode på sms

Som du indtaster i din kode i dit yndlings shopsystem og du er indenfor i varmen.

2-vejs log ind på ShoporamaHurraaaaa…. Øget sikkerhed.

Skal du være MobilePay eller Swipp?

Du kan ikke undgå at have set Swipp-reklamer (eller folk der gør grin med dem). Du har sikkert også MobilePay installeret på din smartphone. Hvorfor?

1. Fordi MobilePay gik efter »Done is better than perfect« og »Launch crap but launch« og »Fuck it – ship it« (skylder at sige, at MobilePay på ingen måde er crap, men de lancerede et såkaldt minimum viable product. Altså et produkt der kunne bruges. Måske ikke i alle situationer (du kan ikke købe din nye bil med MobilePay, men hvor tit er det lige, du køber bil?).

2. Swipp gjorde det modsatte. Finpudsede og debatterede den bedste løsning. Sad og kælede for punktummer og lavede kravspecifikationer. Og kom halsende efter MobilePay med et klodset produkt. Resultat: Lige nu bruger de formuer på reklamer og medarbejdere, der giver køb på deres egen integritet ved at nedgøre MobilePay i håb om at vi så skifter.

Hvad har det med dig at gøre, spørger du måske. Måske ingenting, men jeg ser rigtigt mange, der sidder og finpudser deres webshop og webshop drømme, alt imens er der er en måske klodset, måske halv-færdig, måske grim webshop, der løber med salget, starter på at opbygge en stor fanbase på Facebook, en kæmpe email liste, henter de gode placeringer i Google og får en fantastisk quality score på sine AdWords annoncer. Imens sidder du og vælger farvenuancer på din webshop eller gennemgår teksterne for 5. gang (hey – man kan godt ændre farverne efter man har lanceret sin webshop).

Har du læst bogen Delivering Happiness vil du vide, at fyren der startede Zappos ikke engang havde alle produkter i sin webshop. Han gik ned i en skobutik, tog et billede af en sko, lagde den op i sin webshop og blev den solgt, løb han ned i skobutikken, købte skoen og sendte den til kunden. Har du ikke læst bogen, så gør det ;-)

Efter sigende sad der folk ved Kodak og finpudsede en foto-app, der kunne det samme som Instagram. I evigheder… i mellemtiden kom Instagram så ud af en garage, hvor 3-4 studerende havde lavet den. Den var ikke perfekt, men den var der. De løb med alle brugerne og Kodak endte med at kassere deres app.

Min pointe: Launch crap but launch!

Det sjove er, at når du er i gang, så sker der ting og sager. Folk skriver og besøger din shop. Du bliver flov over at de ser dét, der ikke virker og får det fikset i stedet for at se endnu et afsnit på Netflix.

Har du brug for endnu et skud motivation for at få fingeren ud, så tag og lyt med her.

Hvornår skal jeg bruge canonical?

Inde på produkter har du mulighed for at angive et “canonical ID”. Det skal du bruge i følgende situation:

Lad os antage du har ét produkt i fire farver:

  • Rød
  • Grøn
  • Blå
  • Gul

Dine produkttekster er stort set identiske. Eneste variation er navnet på farven. Derfor risikerer du, at Google vil opfatte det som duplicate content (ved du ikke, hvad det er og hvorfor det er et problem, så hør lydfilen her).

Det kan løses ved at bruge canonical ID. Ud af de fire farver herover skal du vælge ét produkt, som er dét, du helst vil have frem, når folk googler dit produkt. Det vil typisk være dét, du tænker er mest populært (og derfor har du sikkert også flest på lager af dem). Lad os antage, du har valgt den røde. I det tilfælde skal du IKKE angive noget i feltet canonical ID på det røde produkt. Men på de tre andre produkter, skal du angive det røde produkts ID. Vi har gjort det nemt for dig, så hvis du opretter det røde produkt og derefter kloner det, så er canonical udfyldt (så skal du bare ændre navn, farve, url og evt. billede på det nye produkt).

Vælger du at oprette produktet selv, så kan du nemt søge produktet frem i canonical ID-feltet og så henter vi bare dens ID.

Skulle dit røde produkt blive udsolgt, inden de andre, så vil de jo i princippet pege over på et produkt, der er fjernet. Det er ikke godt. Men det har vi også taget hånd om. Når du logger ind, bliver du gjort opmærksom på denne uhensigtsmæssighed, og ud kan nemt rette den.

Hvornår skal jeg bruge canonical?

Hvad koster en webshop?

Okay… det er virkeligt svært at svare på. Der er startet shops ved os for stort set ingen penge og andre, der har kostet i nærheden af 80.000-100.000,-.

Men her er en case, hvor kvinden bag har fået en rigtig god responsive shop med sjæl og identitet til en meget fornuftig pris. Shoppen er Kforkage, som sælger bageudstyr.

Hvad koster en webshop?

Nogle vil sige, det er vildt dyrt, men faktum er, at det koster penge at tjene penge. Det er de færreste, der vil kunne starte en frisørsalon i centrum af din by med spejle, lys, sakse, frisørstol, kasseapparat etc. for den pris. Så hvis du tænker på, at du får en professionel shop, hvor du kan nå ud til hele Danmark, så er det faktisk rigtigt billigt.

Prisen – ja, den er endt på ca. 39.950,- ex moms og fordelte sig på

Design: 30.000,- (inkl. logo). Designet er lavet af Tobias Mikkelsen.

Kode fra psd til Shoporama shop: 7.500,-. Koden er udført af Eagle Media.

Indløsningsaftale ved Teller: 1250,-

Betalingsgateway (6 måneder): 1200,-

Når disse udgifter er betalt, så er der selvfølgelig Shoporama abonnement oveni og 4€ om måneden til en mail-adresse ved Google Apps samt evt. et beløb til MailChimp afhængig af, hvor stor listen er.

 

Vi er bedst på SEO

Det er noget af en påstand, ikke? Nuvel… lad mig få lov at underbygge den.

SEO er jo en kompliceret disciplin, som kun Google med sikkerhed kan sige, de ved alt om. Men det deler de ikke. Til gengæld har SEO-folk med erfaring en ret god opfattelse af, hvad der virker. Så lad os kigge på, hvorfor Shoporama er så sindssygt god i søgemaskinerne:

Den er hurtig!

Shoporama shops er hurtige. Google har meldt ud, at de godt kan lide hurtige sider. Her er nogle af de ting, der gør din Shoporama shop hurtig:

  • Du kan sætte caching på shoppen.
  • Du kan nemt lægge dine CSS-filer og JavaScript filer sammen til én fil, så du sparer de der 5-35 kald til serveren, som andre shop-systemer bruger. Se hvordan du gør her.
  • Du kan komprimere dine billeder (ved jpg).
  • Du styrer selv al koden på shoppen, så finder du en dygtig html-snedker, så har du alle forudsætninger for god semantisk kode – som google elsker.
  • Du kan benytte dig af de mikroformater, du vil. Vi anbefaler Schema.org’s product.

Du kan bruge alle tags

Ja, det lyder bizart ikke, men der er shopsystemer, hvor du f.eks. skal betale ekstra for at lave et <h1>-tag i din shop. Ved os bruger du bare løs. Du kan sætte alt- og title-attributter på billeder og title på links. Du gør, hvad der skal til for at gøre din kode semantisk.

OnPage SEO er yderst vigtig.

Lækre muligheder med title og description

Dit salg starter allerede ude i søgeresultaterne. Det ved vi godt. Derfor har vi lavet nogle variabler, du kan bruge, når du laver dine title og meta descriptions. Det er bl.a. [PRICE] og [STOCK] så du kan hive pris og lagerantal ud i din title. Her kan du se et eksempel.

SEO optimeret webshop system

Vi hjælper dig med at fastholde gode placeringer

Lyder også lidt for godt til at være sandt, ikke? Sagen er dén, at på et eller andet tidspunkt vil nogen linke til en forkert side på din shop og det vil ende i en 404-side. Du er jo en travl e-købmand, så du opdager det ikke og går dermed glip af både linkjuice og besøgende.

Well… bare besøg menupunktet 404 i ny og næ, så vil du se, hvem der har linket til dig og du kan sørge for at redirecte denne trafik.

Redirects – gør det manuelt eller importér en liste

Ja – flytter du en shop, så er det med at få redirectet trafikken. Du kan enten gøre det én ad gangen eller du kan importere en kommasepareret liste med dem.

Ah ja – og du kan også bruge regulære udtryk i dine redirects.

Vi holder dig i hånden hele vejen

Når du sletter produkter i din shop, så spørger vi dig med det samme, hvor trafikken og søgemaskinerne skal redirectes til. På den måde undgår du at folk og søgemaskiner går forgæves.

Canonical… no problem

Ja… selvfølgelig kan du sætte canonical på din shop. Og hvis du kloner et produkt, så sætter vi det automatisk på med det samme, så du ikke skal tænke på det.

Og vi holder øje med, når de bliver forældet

Ja… du kommer garanteret til at pege dine produkter over på et produkt, der bliver udsolgt på et tidspunkt. Så har du måske en 3-4 produkter, der henviser til et produkt, der er lavet redirect på. Det er ikke godt. Men det holder vi øje med og du får en advarsel, når du logger ind. Så kan du nemt fikse det. Her ser du en advarsel fra Faktorfobis webshop

Shoporama er SEO-venlig webshop

Vi indexerer ikke dit søgeresultat

Hvis folk laver en bizar søgning på din side, så bliver den ikke indexeret, for vi har sørget for at sætte noindex på siden. Det lyder simpelt. Det er simpelt. Men mange shopsystemer gør det ikke.

Du styrer noindex

Er der produkter eller kategorier, du ikke vil have indexeret, kan du naturligvis sætte noindex på.

Nemt at lave landingssider til long tail søgeord

Det er ultra hurtigt at lave landingssider til lange søgeord. Her er et eksempel på, hvor hurtigt du kan lave sådan en side.

Du skal da ikke bare tage vores ord for gode varer.

Men du skal naturligvis ikke tage vores ord for gode varer. Du kan jo høre hvad Thomas Rosenstand fra Concept-I siger om Shoporama  her.

Thomas har utallige års erfaring med søgemaskineoptimering og har bl.a. skrevet boget SEO-LEX.

Du kan jo også læse, hvad SEO-manden Emil Blücher synes om Shoporama set med SEO-øjne.

 

Selv style backend

Okay okay… vi vinder ingen designpriser for vores backend (endnu). Vi opererer efter »First Make It Work – then Make It Pretty«

Men hvis det gør så ondt på dine sarte e-købmands-øjne, så har du nu muligheden for selv at style din backend. Klik på dit firmanavn øverst. Klik så på “Eget stylesheet”.

Skriv din trylle-CSS og klik “Gem”. That’s it!

Her er et eksempel:

Når jeg kigger på ordrer, får jeg både betalte og ikke betalte ordrer, som du kan se her:

Selv style backend i ShoporamaJeg kan i kildekoden se, at de lyserøde rækker har klassen “unpaid”, så jeg opretter denne regel i min CSS

Selv style backendKlikker gem og nu….

Ændre udseende på Shoporama backendHvor nemt er det lige?

Dit stylesheet er tilknyttet den enkelte shop, så du f.eks. kan lave rød baggrund til din danske shop og blå til din svenske. Smart, ikke?