1. Webbplatsens domän och namn
Domän: detektiv-shop.se
Namn: DetektivShop
2. Val av tema? Vad har du för tema på din webbplats och vad behöver normalt sett övervägas vid val av tema?
Svar: Jag har valt att använda mig av Storefront eftersom det rekommenderades och är särskilt anpassat för WooCommerce. Hade jag börja om hade jag kanske valt att använda mig av ett tema som fungerar bättre med Elementor. Samtidigt har jag lärt mig mycket genom att testa mig fram och lösa olika hinder själv, vilket har gett mig mer självförtroende i WordPress.
3. Normalt sett lyfts utvalda produkter (bästsäljare eller kanske de med bäst marginal )eller kategorier fram på startsidan. Där brukar även finnas usp:ar och en säljande beskrivning av företaget/verksamheten. Hur har du gjort och varför? Förtydliga gärna med skärmdumpar
Svar: På min startsida möts man av texten ”Välkommen till din Detektivshop online – Din partner i alla uppdrag”, syftet med texten är att informera samt bygga en personlig relation till kunden.
Genom att vara en partner till kunden vill jag skapa känslan av att Detektivshop förstår och kan tillgodose kundens behov.
Längre ner på startsidan finns även två kategorier med knappar som tar besökaren direkt till kategorierna teknik och kontorsmaterial (utredningsstationen). Här använder jag bakgrundsbilder för att skapa en mer visuellt tilltalande design.
Jag har även med ett block med ”Bästsäljare”, där jag lyfter fram Detektivshops mest ”köpta produkt” skuggnytt, här har jag valt att ha en säljande och informativ text med en shortcode för produkten direkt på startsidan.
Det finns även CTA för ”get the look” – som innehåller kategorier från Kläder & Assessorer och ”get the supplies” – som innehåller produkter från kategorin Utrustning. På så sätt lyfter jag fram alla fyra huvudkategorier direkt på startsidan för att ge ett smakprov på vad shoppen har att erbjuda.
På botten av sidan hittar man en länk till produktkatalogen.
Jag har valt att inte ha någon ”om oss” sektion på startsidan eftersom temat, budskapet och utbudet genomsyrar helheten. Man kan istället hitta ”om oss” både på headern och footern.
4. Hur har du lagt upp webbplatsens meny, struktur och navigering? Se till att dessa följer en logisk struktur och beskriv hur du lagt upp dessa delar
Loggan: När man kommer till hemsidan möts man av butikens logga, den är skapad i procreate och är inbäddad med en länk som tar besökaren till startsidan. Det är ganska vanligt på hemsidor och brukar hjälpa kunder att navigera till startsidan om man råkat tappa bort sig. Loggan fyller även en funktion som talar om för kunden om hemsidans identitet och varumärke.
Menyer: Jag har valt att dela upp mina menyer i tre delar för att enkelt kunna separera, anpassa och skapa ”luft” emellan dem. Anledningen var att jag ville göra det lättåskådligt för besökaren att navigera på hemsidan, utan att känna sig överväldigad. Alla tre menyer finns i headern och är uppdelade i tre kategorier, ”Webbshoppen/produkter” ”information och tjänster” samt ”kundhörnan”.
Från vänster till höger:
Meny 1: Hamburgaren/”Webbshoppen/produkter” – Jag har valt att använda en hamburgermeny för mina produkter, då jag ville skapa en separerat meny som skiljer sig från de andra menyerna. Tanken är att man som kund ska kunna differentiera mellan shop och information. Hamburgermenyer har även börjat bli allt vanligare inom e-handel (ex lyko.com). En orsak skulle kunna bero på att vi idag oftast handlar från mobiltelefoner och surfplattor, där menyerna oftast är hamburgermenyer. På så sätt kan allmänheten ha börjat associerar hamburgermenyer med ”butiksidan/produktkatalogen”.
Under produktmenyn kan man navigera mellan:
Produkter – En överskådlig sida där man kan läsa om de olika kategorierna samt se utbudet för underkategorierna.
Utbud – Man hittar även de fyra huvudkategorierna i den här menyn och genom att trycka på plus visas även underkategorierna.
Produktsortering – Underkategorierna har emojis för att man som kund enkelt ska kunna identifiera innehållet med hjälp av symboler.
slutet – Det finns även en sida som visar hela produktkatalogen om man skulle vilja ha det mer överskådligt.
Meny 2:” information och tjänster” – Här hittar man [om oss] [tjänster] och [kundservice]. Navigeringsmenyerna finns på headern, så man enkelt kan hitta information om företaget, detektivtjänster samt kundfrågor.
Meny 3: ”kundhörnan” – I den här menyn finns [Mitt konto] och [Kassa]. Jag har dessutom en sökfunktion samt varukorg (shoppingbag).
5. Det skall finnas statiska undersidor på webbplatsen som tydligt beskriver ”Om oss”, ”Kontakt”, plus de leveransvillkor och köpvillkor som gäller. Även frakt och returer bör beröras i samband med detta. Beskriv här även varför du valt just de villkor som du valt.
Svar: Mina statiska undersidor finns både i header och footer.
På header hittar man dem i menyraden. På Kundservice sidan har jag valt att samla FAQ, Policy, Kontaktformulär och integritetspolicy med knapplänkar till sidorna.
På Footer har jag istället valt att länka till sidorna med inbäddad text. Man kommer även till sidan ”om oss” genom att trycka på texten.
Detektivshops villkor:
Integritetspolicy: Här finns information om hur personuppgifter lagras och hur man går till väga för att radera personuppgifter.
Återbetalnings- och returpolicy/Policy: Eftersom att jag har en detektivshop har jag valt att erbjuda mina kunder diskret leverans, där produktinformation och logotyper inte syns på förpackningen. Det för att mina kunder ska känna sig säkra att deras identiteter inte avslöjas. Leveranstiden är på 2-5 arbetsdagar beroende på tillgänglighet i lager. Detektivshop erbjuder även 30 dagars öppet köp förutsett att produkterna är i originalförpackning. Detektivshop erbjuder dok inte returer för förbrukningsvaror, exempelvis kolpulver eller bläck, av säkerhetsskäl.
Alla mina texter under FAQ, Policy samt integritetspolicy är tematiska och jag nämner att Detektivshop är en demoshop i utbildningssyfte med fiktiva svar.
6. Vilka kontaktformulär har du på webbplatsen och vad har de för syften? Det skall finnas minst ett kontaktformulär på webbplatsen.
Svar: Jag har valt att använda mig av två kontaktformulär. Det ena hittar man under Kontakt och det andra under Tjänster.
Kontakt – är till för frågor och fungerar som en kundtjänst.
Tjänster – här kan man skicka in ett case som man behöver hjälp med. Detektivshop erbjuder nämligen hjälp från 4 ”olika” experter inom området detektivarbete.
7. Visa på att det finns klickbara mail–och telefon–länkar på din webbplats.
Svar: Man hittar klickbara länkar till mejl och telefon på footer, under Huvudkvarteret, a.k.a adress:
8. I vilket sammanhang har du använt dig av shortcodes? Det skall finnas minst ett användande av shortcode på webbplatsen.
Jag har valt att använda mig av 3 shortcodes på min startsida. Bästsäljare visar en specifik produkt, medan de andra två ”get the look” och ”get the supplies” visar produkter från två olika kategorier.
Här är shortcode för en enskild produkt
Här är en shortcode för kategorin Förklädnader och Accessoarer
9. Hur har du utformat Webbplatsens footer och varför?
Svar: Ja, jag har utformat både min footer och header själv med hjälp av UAE (Ultimate Addons for Elementor Lite).
Jag har en container som visar en varningstexten ”⚠️ OBS! Det här är en demoshop och går inte att handla från!⚠️” som rullar, med hjälp av HTML.
Jag har även en container uppdelad i tre block med länkar till statiska sidor, Om oss med en lite kortfattad USP, samt ett block med en fiktiv adress och kontaktuppgifter.
Längst ner på botten hittar man även en copyrightstämpel som försvann när jag avaktiverade storefronts footer.
Jag valde att göra min egen footer då det var frustrerande att ändra css med Storefronts begränsningar. Jag ville även hålla min footer informativ, kort och anpassningsbar.
10. Vilka åtgärder har du vidtagit för att det tydligt skall framkomma att det är en demobutik och att det faktiskt inte går att handla ”på riktigt”?
Svar: som jag nämnde på fråga 9 har jag en rullande text på min footer med en varningstext ”⚠️ OBS! Det här är en demoshop och går inte att handla från!⚠️” . Jag har även nämnt att det här är en demobutik under FAQ och Policy. Det finns även varningstext i mina mejlmallar där jag skrivit ” beställningar kommer inte att skickas”.
11. I vilken utsträckning och hur har du arbetat med WooCommerce på webbplatsen?
Svar: Jag har över 49 produkter i min butik, med 4 huvudkategorier och 17 underkategorier.
Läs mer om kategorierna här: https://www.detektiv-shop.se/produkter/
Jag har ett ganska tydligt tema på min butik och har därför valt produkter och kategorier som stämmer överens med temat. Alla mina produkter har namn och beskrivningar som kan förknippas med detektivarbete. Jag ville skapa en röd tråd och har haft väldigt roligt under processen.
Utredningsstationen – innehåller kontorsmaterial och sådant man skulle kunna tänkas behöva för att skapa en kartläggningstavla.
Förklädnader och Accessoarer – innehåller produkter som är typiskt förknippade med detektiver.
Utrustning – innehåller produkter som kan hjälpa på spåret, ex förstoringsglas.
Teknik – innehåller kameror och ljudutrustning, något som en detektiv kan tänkas behöva.
12. Vilka produkttyper har du arbetat med och varför? Här handlar det alltså om enkel/grupperad/variabel/nedladdningsbar/etc. Visa på exempel.
Svar: Jag har valt att arbeta med enkla produkter men har 4 produkter med varianter. Under trenchcoat har jag som exempel varianter på storlekar och i kategorin Inkognitohörnan kan man hitta mustascher och skägg i olika modeller.
13. Visa på exempel på designdelar som du anpassat med hjälp av Elementor.
Svar: Jag har anpassat de flesta sidor med elementor. Man kan se det på startsidan, produktsidan, Om oss, tjänster, kundservice samt i footer och header.
14. Vilka tillägg har du använt och varför?Komplett lista önskas
Jag har valt att använda mig av följande:
Classic Editor – för att kunna få en bättre redigeringslayout i WordPress.
Contact Form 7 – för att kunna skapa kontaktformulär enkelt.
Elementor – För att kunna anpassa min hemsida och designa den.
One.com – Förinställd, något med performance?
Performance Cache – Gör hemsidan snabbare, förinställt, har inte valt att ta bort
StoreCustomizer – Ger fler val för att kunna redigera Woocommerce, knappar osv
Ultimate Addons for Elementor Lite – Gör det möjligt att redigera header och footer + fler tilläggsval i elementor
Variation Swatches for WooCommerce – Fler tilläggsval i elementor som är anpassade med Woocommerce
WooCommerce – Gör det möjligt att kunna handla på butiken.
15. Vilka andra åtgärder har du vidtagit för att skapa en snygg, inspirerande och effektiv webbplats som på bästa sätt levererar utifrån din affärsidé? Presentera resultat i text och bild.
Svar: Jag har använt mig av tilläggen ovan, samt CSS. Med CSS har jag bland annat lagt till en hover effekt på mina produkter. Min logga har jag designat själv, jag har valt ett genomgående tema med färgval samt hover-effekter. Jag tycker min webbshop är rolig och unik. Den är tematisk och håller konsekvent fast i sin karaktär.
16. Validera din egna webbplats utifrån de kriterier som lyfts fram i föreläsningsmaterialet.
a. Peka på tre delar som du tycker att du tycker att du gjort riktigt bra.
1. Menyerna är lättåtkomliga och följer en logisk struktur. Alla länkar leder till rätt sidor samt att sökfunktionen fungerar. Det finns flera genvägar för information och sidan är i helhet enhetlig.
2. Alla produkterna har produktbeskrivningar och namn som är tematiska. Kunderna kan även läsa och lämna recensioner om produkterna.
3. Jag har implementerat flera fungerande element som shortcodes, kontaktformulär och klickbara länkar, vilket gör webbplatsen både interaktiv och användbar. Det finns även en extra tjänst där Detektivshop erbjuder sina kunder detektivhjälp (Tjänster🔍).
b. Peka på tre delar som du inte är lika nöjd med eller tycker att du hade behövt arbeta vidare med.
1. Begränsningarna med Storefront och Woocommerce har gjort det svårt att utforma sidan som jag hade önskat. Exempel är butikssidan där jag hade velat visa produkterna i samma tema som under https://www.detektiv-shop.se/produkter/ , samt att produktbilderna hade kunnat visas bättre.
2. Det hade varit kul att implementera ett community i form av ett forum, där detektiver kan posta anonyma meddelanden. Jag hade även velat arbeta mer på kundsidan samt ha en chattfunktion.
3. Hemsidan är tyvärr inte mobilanpassad och jag hade behövt lägga ner mer tid samt förstå hur man anpassar en webbplats på ett ultimat sätt för mobilversioner.