Uppgift - ShabbyWalls

WooCommerce – Individuell inlämningsuppgift

Namn: Alicia Alvarez

Webbplats: Shabbywalls.com

Nedan finner ni ett antal punkter som er respektive webbplats skall uppfylla. De flesta av dessa kommer vi att gå igenom under kursens gång, så att vara med på lektioner underlättar såklart.

Resultatet skall presenteras punktvis på din egna webbplats på ett separat inlägg på din webbplats som skall finnas på sökvägen https://dittdomännamn.se/uppgift/.

Jag vill genomgående se beskrivande svar på hur ni gått tillväga för att uppfylla kraven. Ibland kan det passa bra med en länk till den sida som visar där uppgiften lösts, medan det på andra frågor kan krävas både skärmdumpar och beskrivande text som visar på vad som gjorts eller något som visar på resultatet.

Krävs någon annan form av dokumentation så står det under respektive uppgift. I övrigt är internet en bra källa till att hitta lösningar på problem, så glöm inte att Googla före ni frågar.

Inlämningen sker genom att du postar länken till dina svar fredagen den 17 oktober 17:00.

Lycka till!

Uppgifter

Webbplatsens domän och namn

Företagsnamnet är Shabby Walls och dess domän är www.shabbywalls.com.
Syftet med webbplatsen är att skapa en inspirerande digital miljö för väggdekorationer och tapeter som kombinerar natur, konst och modern minimalism.

Namnet Shabby härstammar från inredningsstilen Shabby Chic, en dekorativ stil där blommor utgör ett centralt och oumbärligt inslag. Denna stil kännetecknas av sin romantiska och naturliga estetik, där slitna detaljer möter elegans. Jag valde namnet eftersom kopplingen mellan naturen och begreppet Shabby ger ett elegant och harmoniskt intryck, samtidigt som det klingar väl och känns tidlöst.

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? Om du inte använt dig av rekommenderat tema, motivera ditt val.

Inledningsvis var min ursprungliga idé att sälja surfbrädor, men jag insåg snart att designprocessen var alltför komplicerad att genomföra. Därför började jag reflektera över mina egna intressen och insåg att jag alltid har haft en stark dragning till inredning och natur. Kombinationen av dessa två element – att föra in naturen i hemmet – framstod för mig som både estetiskt tilltalande och meningsfull.

Jag hämtade mycket inspiration från landskap och akvareller med ett handmålat uttryck, eftersom jag upplevde att det finns en brist på liknande motiv på marknaden. Webbplatsens design baseras därför på det sortiment som erbjuds, där beige och bruna toner används för att skapa en känsla av lugn, värme och harmoni.

I Sverige, där vintrarna är långa och en stor del av tiden tillbringas inomhus, anser jag att det är särskilt viktigt att skapa en trivsam och rogivande miljö. Genom Shabby Walls vill jag bidra till just detta – att erbjuda dekorationer som för in naturens skönhet i vardagsrummet och samtidigt förmedlar balans och välbefinnande.

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.

På webbplatsens startsida lade jag till en välkomsttext som introducerar varumärkets koncept och produktutbud:

”Skapa harmoni med naturliga väggar. Upptäck vår kollektion av tapeter inspirerade av skogar, fåglar och minimalistisk design.”

Texten fungerar som ett unikt försäljningsargument och syftar till att väcka intresse hos besökaren genom att förmedla en känsla av natur, balans och estetik. Direkt under introduktionstexten presenteras ett urval av produkter för att omedelbart fånga besökarens uppmärksamhet och uppmuntra till vidare interaktion.

Varje produkt är länkad till sin respektive produktsida, vilket gör det enkelt för användaren att navigera och snabbt hitta relevant information. Detta bidrar till en mer effektiv och användarvänlig upplevelse.

Startsidan är utformad i Elementor, vilket möjliggjorde en harmonisk kombination av bilder, text och produktpresentation. Genom verktyget kunde layouten optimeras för att skapa en visuellt tilltalande och sammanhängande design som stärker företagets varumärkesidentitet.

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.

Webbplatsen är uppbyggd med två separata menyer för att skapa en tydlig och användarvänlig navigationsstruktur.

Huvudmenyn innehåller följande menyalternativ: Hem, Produkter, Vår historia, Kontakt, Om oss, FAQ, Leverans samt Uppgift. Denna meny utgör webbplatsens primära navigationsverktyg och leder användaren till de mest centrala sidorna.

Den sekundära menyn inkluderar praktiska alternativ som Återbetalnings- och returpolicy, Kassa och Varukorg, vilka är placerade för att underlätta köpprocessen och ge snabb tillgång till kundrelaterade funktioner.

Under menyalternativet Produkter finns dessutom fyra underkategorier: Skogstapet, Fåglar och natur, Barn samt Modern minimalism. Denna indelning gör det möjligt för besökaren att enkelt navigera bland olika produktgrupper och snabbt hitta relevanta artiklar.

Webbplatsens struktur är utformad med fokus på enkelhet och logik, vilket bidrar till en intuitiv användarupplevelse. Genom en tydlig hierarki och konsekvent layout kan användaren effektivt orientera sig och nå önskat innehåll utan onödiga steg.

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.

På webbplatsen har jag skapat statiska undersidorna ”Om oss”, ”Kontakt”, ”Leverans” samt ”Återbetalnings- och returpolicy”. Dessa sidor fyller en viktig funktion genom att ge besökaren relevant information om företaget, dess verksamhet samt de villkor som gäller för köp och leverans.

Texterna har genererats med hjälp av en mallgenerator men har därefter anpassats för att bättre spegla företagets identitet och den stil som vanligtvis används av tapetbutiker. Denna anpassning bidrar till ett mer trovärdigt och professionellt intryck.

Jag valde dessa villkor eftersom de representerar branschstandard inom e-handel och därmed skapar tydlighet och trygghet för kunden. Genom att inkludera information om leverans, frakt, returer och kontaktmöjligheter får användaren en transparent översikt över köpprocessen, vilket stärker förtroendet för webbplatsen och förbättrar användarupplevelsen.

Vilka kontaktformulär har du på webbplatsen och vad har de för syften? Det skall finnas minst ett kontaktformulär på webbplatsen.

Jag har lagt till ett kontaktformulär på sidan Kontakt, som jag skapade med HTML-kod.

Formuläret gör det möjligt för kunder att skicka meddelanden direkt via webbplatsen.

Dessutom finns klickbara e-postlänkar och telefonlänkar för enkel kontakt.

Visa på att det finns klickbara mail- och telefon-länkar på din webbplats.

I vilket sammanhang har du använt dig av shortcodes? Det skall finnas minst ett användande av shortcode på webbplatsen.

På webbplatsen har jag använt mig av en shortcode för att implementera ett kontaktformulär. Koden är: contact-form-7 id=”9158229″ title=”Kontaktformulär 1″

Shortcodes används inom WordPress för att enkelt infoga dynamiska element utan att behöva skriva omfattande kod manuellt. I detta fall genererar shortcoden ett kontaktformulär som gör det möjligt för besökare att skicka meddelanden direkt via webbplatsen.

Funktionen förbättrar webbplatsens användarvänlighet och interaktivitet, då den ger ett enkelt sätt för kunder att komma i kontakt med företaget. Genom att använda Contact Form 7-pluginet kan formuläret dessutom anpassas efter behov, till exempel genom att lägga till specifika fält eller ändra meddelandestrukturen.

Hur har du utformat Webbplatsens footer och varför?

Footern har en ljusbrun bakgrund och innehåller följande text:

Jag har även lagt till ett tydligt meddelande som förklarar att detta är en demobutik, till exempel:

“Detta är en demobutik skapad för en skoluppgift. Inga riktiga köp kan göras.”

Texten har jag lagt till med HTML-kod.

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”?

För att tydligt informera besökaren om att webbplatsen inte representerar en faktisk e-handelsbutik har jag infört flera åtgärder. I sidfoten har jag, med hjälp av HTML-kod, lagt till ett tydligt meddelande som förklarar att webbplatsen är en demobutik skapad inom ramen för en skoluppgift, och att inga fysiska köp kan genomföras.

Dessutom har jag i slutet av avsnittet FAQ förtydligat att sidan enbart är en demonstrationssida. Dessa åtgärder syftar till att säkerställa att besökaren inte missförstår webbplatsens syfte eller funktion, samt att skapa transparens och tydlighet kring dess användningsområde.

I vilken utsträckning och hur har du arbetat med WooCommerce på webbplatsen? Det skall finnas produkter i någon form att köpa på webbplatsen. Produkterna skall vara minst tio till antalet och antalet kategorier minst tre. Beskriv vad du gjort och hur du gått tillväga. Undantag till detta kan finnas om det främst är tjänster som erbjuds, stäm av med Daniel om så är fallet.

Jag har arbetat med WooCommerce för att strukturera och presentera produkter på webbplatsen enligt kraven för uppgiften. Totalt finns tolv produkter fördelade på fyra kategorier:

Skogstapet (3 produkter)
Fåglar och natur (4 produkter)
Barn (4 produkter)
Modern minimalism (2 produkter)

Produkterna är varierade både till motiv och prisklass. Varje produkt finns tillgänglig i tre olika storlekar – Small (S), Medium (M) och Large (L) – vilket påverkar prisnivån. Denna struktur gör det möjligt att visa hur WooCommerce hanterar produktvariationer och prissättning baserat på attribut.

Genom WooCommerce har jag även kunnat skapa en logisk produktkatalog, lägga till bilder, beskrivningar och prisinformation samt testa funktioner som varukorg och kassa, även om faktiska köp inte kan genomföras eftersom webbplatsen är en demoversion.

Vilka produkttyper har du arbetat med och varför?

Här handlar det alltså om enkel/grupperad/variabel/nedladdningsbar/etc. Visa på exempel.

På webbplatsen säljs uteslutande tapeter, och jag har valt att arbeta med variabla produkter. Denna produkttyp möjliggör försäljning av varor med olika variationer, exempelvis i storlek eller färg, vilket gör den särskilt lämplig för tapetprodukter.

Varje tapet erbjuds i tre olika storlekar: Liten (S), Medium (M) och Stor (L). Priset justeras automatiskt beroende på vilken storlek kunden väljer. Denna struktur illustrerar tydligt hur WooCommerce hanterar produktattribut och dynamisk prissättning baserat på variationer.

Valet av den variabla produkttypen grundas på dess flexibilitet och användarvänlighet. Den gör det möjligt att presentera produkterna på ett mer realistiskt och professionellt sätt, samtidigt som den förbättrar kundupplevelsen. Genom att låta besökaren välja den variant som bäst motsvarar deras behov direkt på produktsidan, skapas en smidig och effektiv köpprocess.

13.Visa på exempel på designdelar som du anpassat med hjälp av Elementor.

Jag använde Elementor för att utforma och anpassa webbplatsens startsida samt andra visuella element. Med hjälp av verktyget kunde jag placera text och bilder på ett mer estetiskt och strukturerat sätt än vad som är möjligt i standardtemat Storefront.

Genom Elementor kunde jag skapa en mer professionell och tilltalande design som bättre speglar webbplatsens koncept och målgrupp. Verktyget möjliggör dessutom avancerad designanpassning utan krav på programmeringskunskaper, vilket effektiviserar arbetsprocessen och ger ett resultat med hög visuell kvalitet.

Vilka tillägg har du använt och varför? Komplett lista önskas.

För att utveckla och optimera webbplatsen har jag använt flera tillägg (plugins) som tillsammans bidrar till funktionalitet, design och användarupplevelse. Nedan följer en komplett lista med respektive syfte:

WooCommerce – används för att skapa och hantera e-handelsfunktionen på webbplatsen, inklusive produktkatalog, kundvagn och kassa.
WooCommerce Payments – implementerades för att simulera betalningslösningar och illustrera hur betalningsprocessen fungerar i en e-butik.
Elementor – användes som verktyg för sidredigering och visuell design, särskilt vid utformningen av startsidan (hemsidan).
Image Optimizer – Compress, Resize and Optimize Images – installerades för att optimera bildfiler genom komprimering och storleksanpassning, vilket förbättrar webbplatsens laddningstid och prestanda.
Classic Editor – användes för att hantera och korrigera bildinlägg samt för att underlätta textredigering i det klassiska WordPress-gränssnittet.
Contact Form 7 – implementerades för att skapa och anpassa kontaktformulär, vilket möjliggör kommunikation mellan besökare och webbplatsens administratör.

Dessa tillägg valdes utifrån deras funktionalitet och kompatibilitet med WordPress och WooCommerce. Tillsammans bidrar de till en professionell, användarvänlig och välstrukturerad webbplats.

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.

Design spelar en central roll vid försäljning av dekorativa tapeter, eftersom produkten är en del av inredningsprocessen och därmed starkt kopplad till estetik och visuell upplevelse. En genomtänkt och välutformad webbplats är därför avgörande för att förmedla varumärkets identitet och väcka kundens intresse.

Webbplatsen har utformats för att spegla varumärkets kärnvärden – natur, lugn och harmoni – genom användningen av jordnära färgtoner såsom brunt och beige, kombinerat med moderna och konstnärliga designelement. Syftet är att skapa en atmosfär som förmedlar balans och inspiration, i linje med tapeternas estetiska tema.

I designarbetet har jag strävat efter att uppnå en balans mellan värme, minimalism och naturlighet, vilket bidrar till en helhetsupplevelse som både är visuellt tilltalande och trogen affärsidén.

Validera din egna webbplats utifrån de kriterier som lyfts fram i föreläsningsmaterialet.
Peka på tre delar som du tycker att du tycker att du gjort riktigt bra.
Peka på tre delar som du inte är lika nöjd med eller tycker att du hade behövt arbeta vidare med.

a. Tre områden där jag anser att arbetet fungerade väl

Användarvänlighet: Webbplatsen är lätt att navigera och har en flytande struktur som gör det enkelt för besökaren att hitta relevant information.
Visuell attraktivitet: Jag anser att webbplatsen har en estetiskt tilltalande design som harmonierar med varumärkets koncept.
Bakgrundsdesign: Färgval och bakgrundsdesign skapar en lugn och balanserad atmosfär som passar väl för en tapetbutik.

b. Tre områden som kan förbättras

Begränsade designkunskaper: Jag skulle vilja fördjupa mina kunskaper i professionella designverktyg som Adobe Photoshop eller Adobe Illustrator för att kunna skapa mer avancerade och unika designelement. Mitt nuvarande arbete har främst gjorts i Canva, vilket erbjuder färre möjligheter för mer komplexa former och grafiska komponenter.
Produktinteraktion och användarupplevelse: Jag hade gärna sett att produkterna på Utvalda Produkter tydligare markerades som klickbara, till exempel så att de kan förstoras när man håller muspekaren över dem. På grund av förändringar i produktkategorier och varumärkesstruktur kunde detta dock inte implementeras fullt ut i den nuvarande versionen.

3.Produktvariation och försäljningsmetod: Min ursprungliga plan var att sälja tapeter baserat på exakta mått, men detta krävde tilläggsplugin som inte var tillåtna inom ramen för projektet. Därför valde jag att istället sälja produkterna i tre standardstorlekar – Small (S), Medium (M) och Large (L) – vilket fungerade som en praktisk lösning men inte fullt ut motsvarade min ursprungliga idé.