Shopify Designkurs

Lektion 1 • Shopify-temaarkitektur

Förklarar hur teman är strukturerade med hjälp av mallar, sektioner och block. Denna grund krävs innan någon temaanpassning eller kodning påbörjas.

Lektion 2 • Översikt över Shopifys ekosystem

Täcker Shopifys roll inom e-handel, prisplaner och central terminologi. Etablerar den mentala modell som behövs för alla efterföljande designbeslut.

Lektion 3 • Grundläggande butikskonfiguration

Täcker viktiga butiksinställningar inklusive valuta, fraktzoner och betalningsgateways. Korrekt konfiguration förhindrar att designarbete undergrävs av trasig funktionalitet.

Lektion 1 • Visuell hierarki inom butiksdesign

Lär ut hur man styr kundens uppmärksamhet med hjälp av skala, kontrast och avstånd. Informerar direkt de layoutbeslut som fattas under hela kursen.

Lektion 2 • Typografi för e-handel

Behandlar teckensnittsval, kombinationer och hierarki för produktfokuserade layouter. Bra typografi förbättrar läsbarheten och den upplevda varumärkeskvaliteten.

Lektion 3 • Färgteori för onlinebutiker

Täcker färgpsykologi, palettkonstruktion och varumärkeskonsistens inom detaljhandel. Deltagarna bygger paletter som förstärker förtroende och driver handling.

Lektion 4 • UX-principer för konvertering

Introducerar minskning av friktion, förtroendesignaler och övertygande designmönster. Dessa principer vägleder varje layout- och komponentbeslut i senare kapitel.

Lektion 1 • Navigations- och menydesign

Konfigurerar huvudmenyer, rullgardinsmenyer och sidfotsnavigering för användbarhet. Tydlig navigering minskar avvisningsfrekvensen direkt och förbättrar produktupptäckten.

Lektion 2 • Design av startsida

Bygger en högkonverterande startsida med hjälp av hero-sektioner, utvalda kollektioner och förtroendeelement. Startsidan är det mest kritiska första intrycket för kunder.

Lektion 3 • Utvärdera och välja teman

Täcker kriterier för att välja gratis vs. betalda teman baserat på nisch och funktionsbehov. Ett starkt temaval minskar den anpassade utvecklingstiden avsevärt.

Lektion 4 • Varumärkeskonfiguration i teman

Applicerar logotyper, varumärkesfärger och typografi via temainställningar. Etablerar visuell varumärkesidentitet på alla sidor i butiksgränssnittet.

Lektion 1 • Layout för produkttitel och beskrivning

Strukturerar produkttitlar, beskrivningar och punktlistor för skannbarhet och SEO. Layouten påverkar direkt både konverteringsgrad och synlighet i sökresultat.

Lektion 2 • Visning av varianter och alternativ

Designar färgprover, storleksväljare och kvantitetsinmatning för tydlighet och enkelhet. Dålig UX för varianter är en ledande orsak till övergivna produktsidor.

Lektion 3 • Strategi för produktbilder

Täcker bildtyper, bildförhållanden, zoomfunktioner och gallerilayout för produkter. Starka bilder är det enskilda element med högst påverkan på en produktsida.

Lektion 4 • Design av lägg i varukorg- och köpknappar

Optimerar CTA-knappars placering, storlek, färg och text för maximal klickfrekvens. Lägg i varukorg-knappen är det mest kritiska konverteringselementet på sidan.

Lektion 1 • Sidnumrering och oändlig scroll

Jämför sidnumrering, ladda mer- och oändlig scroll-mönster för katalog-UX. Rätt val beror på katalogstorlek och SEO-krav.

Lektion 2 • Layoutmönster för kollektionssidor

Behandlar rutnäts- kontra listvyer, kolumnantal och design av kollektionsbanners. Layoutval påverkar direkt hur många produkter kunderna interagerar med.

Lektion 3 • Filtrerings- och sorteringssystem

Bygger aspektfilter och sorteringsalternativ som matchar kunders tankemodeller. Effektiv filtrering minskar tiden till köp för kataloger med många SKU:er.

Lektion 1 • Redigera mallar och sektioner

Modifierar befintliga temamallar och sektionsfiler för att ändra layout och logik. Denna färdighet överbryggar gapet mellan temaredigerarens gränser och full anpassning.

Lektion 2 • Shopify Liquid-objekt

Kartlägger viktiga Shopify-objekt som produkt, kollektion, varukorg och kund. Kännedom om tillgängliga objekt möjliggör dynamisk, datadriven malldesign.

Lektion 3 • Bygga anpassade sektioner

Skapar nya återanvändbara sektioner med schemadefinierade inställningar för temaredigeraren. Anpassade sektioner ger handlare flexibel kontroll över nya layouter utan kod.

Lektion 4 • Grunderna i Liquid-språket

Introducerar Liquid-syntax inklusive objekt, taggar och filter. Att förstå Liquid är porten till all meningsfull temakodanpassning.

Lektion 1 • Anpassade stylingtekniker

Applicerar riktade CSS-överskrivningar för typografi, avstånd, knappar och kort. Deltagarna uppnår pixel-exakt varumärkesanpassning utan att bryta temats standardinställningar.

Lektion 2 • Integration av tredjepartsskript

Täcker säkra metoder för att lägga till analys-, chatt- och marknadsföringsskript i teman. Felaktig skriptladdning försämrar prestanda och bryter funktionalitet.

Lektion 3 • Responsiv CSS för Shopify

Skriver media queries och flytande stilar som anpassar layouter över brytpunkter. Säkerställer att anpassade stilar inte förstör mobilupplevelsen.

Lektion 4 • Shopifys CSS-arkitektur

Förklarar hur teman organiserar CSS-filer, variabler och specificitetslager. Att förstå den befintliga CSS-strukturen förhindrar konflikter och regressioner.

Lektion 1 • Kvalitetssäkring inför lansering

Genomför en strukturerad QA-checklista som täcker länkar, formulär, kassaflöde och innehåll. En noggrann QA-genomgång säkerställer en professionell, felfri butikslansering.

Lektion 2 • Tillgänglighetsstandarder i Shopify

Applicerar WCAG-anpassade metoder inklusive alt-text, tangentbordsnavigering och färgkontrast. Tillgängliga butiker betjänar fler kunder och minskar juridisk exponering.

Lektion 3 • Testning över webbläsare och enheter

Testar butikens utseende och funktionalitet över webbläsare, enheter och skärmstorlekar. Att fånga problem före lansering skyddar intäkter och varumärkesrykte.

Lektion 4 • Prestandaoptimering av Shopify-butik

Identifierar och löser hastighetsflaskhalsar inklusive bildstorlek, app-uppsvällning och renderingsblockerande skript. Snabba butiker rankar högre och konverterar bättre.