Bygg en e-handelsplats från början

Sep 14, 2025

Hur

E-handel har blivit så populär de senaste åren är det nu svårt att föreställa sig en framtid utan det. Internetets kraft har gjort förbindelse med kunderna en bris för företag och varumärken, och e-handel, för det mesta är det enklaste sättet att leverera produkter till sin publik.

Stiftelsens byggstenar Bibliotek med kodade UI-komponenter är utformade för att göra det lättare att nå en slutlig produkt snabbare. Till skillnad från mallar dikterar byggstenar inte hur din webbplats ska se eller vara strukturerad. De ger dig helt enkelt verktygen för att bygga upp ditt eget anpassade utseende och känna sig mycket snabbare.

I den här handledningen lär du dig att bygga en statisk e-handel webbplats från början med hjälp av e-handelskit, en kurerad samling av byggstenar som är utformade för att hjälpa dig att bygga specifika typer av webbplatser. Även om denna byggnadsställ är en prototyp, de byggstenar vi använder och layout vi slutar med kan tillämpas på vilket system som helst.

Komma igång

Building Blocks don’t dictate how your site should look — Byggstenar dikterar inte hur din webbplats ska se

Det första vi behöver göra är att skapa en miljö för att bygga webbplatsen. För den här handledningen måste du först ladda ner node.js. När det är installerat, vill du installera Foundation CLI med kommandot npm installera -g foundation-cli .

Nu när du har stiftelse installerat på ditt system, låt oss starta ett nytt grundprojekt med hjälp av kommando Foundation New E-handel. I listan som följer väljer du det första alternativet, "En webbplats (grund för webbplatser)", skriv in vårt projektnamn "eCommerce-webbplats" och välj sedan "Zurb Template". Detta kommer att starta en grundmall och utvecklingsserver så att vi lätt kan börja bygga vår hemsida. Springa npm start i terminalen för att köra projektet.

Därefter, låt oss ta en titt bakom koden i vårt nya projekt genom att öppna det i en textredigerare. Här hittar du en provsida i 'src / sidor / index.html' som innehåller några standardmallmaterial. Vi ska ta bort all kod här.

Redaktörens anteckning: Letar du efter en e-handel webbdesign för ditt företag? Om du letar efter information som hjälper dig att välja den som är rätt för dig, använd frågeformuläret nedan för att ge dig information från en mängd olika leverantörer gratis:

Installera ett kit

Innan vi skriver någon kod, kommer vi att dra i stiftelsens e-handelskit med Foundations CLI. Gå till din terminal och använd kommandot Foundation Kits Installera e-handel.

Om det här kommandot inte fungerar, kontrollera att din Foundation CLI är uppdaterad till 2.2.3. För att kontrollera vilken version du är på, kör Foundation -V i din terminal. Om du behöver uppdatera, helt enkelt avinstallera CLI med npm avinstallera -g foundation-cli och installera om det med npm installera -g foundation-cli .

Detta hämtade bara alla byggstenar inuti vår e-handel kit! När som helst du installerar ett byggblock kommer det att visas i SRC / Partials / Building-Blocks . Du vet att ditt kit är korrekt installerat om alla byggstenar har importerats automatiskt till din app.scss fil.

Några av dessa byggstenar innehåller ikoner från Font Awesome, så du vill antingen manuellt installera dem eller lägga till deras CDN till & lt; huvud & gt; av din webbplats. För att göra detta, navigera till src / layouter / default.html och lägg till & lt; länk href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" & gt; mellan & lt; huvud & gt; Taggar.

Byggnadsställningen

Mix and match blocks to achieve your ideal eCommerce layout — Blanda och matcha block för att uppnå din idealiska eCommerce-layout

Låt oss komma till byggnaden! Med vårt kit installerat, kommer dessa nästa par steg att känna sig lite som att leka med LEGO: I dina egna projekt kan du välja att använda dem alla, eller du kan bara använda ett urval. Känn dig fri att blanda och matcha byggstenar för att uppnå din dröm e-handel layout.

För den här handledningen börjar de två första blocken med huvud och promo hjälte. För att göra detta kommer vi att använda styrelsens partiella mekanism. I vår tomma index.html-fil, låt oss kasta i partierna {{& gt; e-handel-header}} och {{& gt; e-handel-promo-hero}} . Med bara dessa två byggstenar ser vår e-handel landningssida redan om halvvägs.

Därefter slänger vi in några produktkort under vår hjälte-sektion. För att använda produktkortsuppbyggnadsblocket använder vi Foundations Block Grid så att korten sitter jämnt inom ett rutnät. Detta gör det också lättare att ändra layouten av dessa kort senare.

Låt oss börja med & lt; div class = "rad små-up-2 medellång-up-5" & gt; . Inne i denna div, kasta i tio kolumner med produktkortet inuti varje kolumn & lt; div class = "kolumn" & gt; {{& gt; e-handel-produkt-kort}} & lt; / div & gt; .

Vi vill ge våra kunder ett sätt att komma till fler av våra produkter, så låt oss lägga till en callout-knapp under våra produktkort. Först måste vi skapa vår & lt; div class = "rad kolumn text-center" & gt; Så att vår knapp kommer att centreras på sidan. Därefter använder vi grundknappskomponenten för att skapa vår callout. Lägg till en & lt; Knappklass = "Knapp" & GT; Knacka alla produkter och lt; / knapp & gt; inuti .rad kolumn .

Sidan känns nästan färdig nu, men låt oss också lägga till en rubrik mellan vår hjälte och produktkort för att ge lite sammanhang. Under hjälten, lägg till en & lt; div class = "rad kolumn" & gt; att innehålla vår rubrik & lt; H1 & GT; Nyaste ankomster & LT; / H1 & GT; .

De flesta e-handel hemsidor har mer kampanjinnehåll under sina produkter. Låt oss använda byggstenen {{& gt; e-handel-hjälte-slider-små}} här. För att förhindra att skjutreglaget spänner över bredden på sidan, kommer vi att fästa det runt en & lt; div class = "rad kolumn" & gt; .

Eftersom e-handel webbplatser består vanligtvis av många sidor, kommer de flesta att kräva en mega footer med massor av länkar för att hantera volymen av sidor. Vår e-handel kit kommer med en sidfot för detta exakta användningsfall. För att sätta upp denna byggnadsställningar, låt oss släppa i {{& gt; e-handel-footer}} längst ner i vår HTML.

Kontrollera efter responsivitet

Dessa dagar är det svårt för någon webbplats att komma utan att vara mobilvänlig. Detta gäller särskilt för e-handel. Nu när online shopping har blivit normen, vill vi inte förlora den andelen användare som gör det genom sina mobiltelefoner.

Efter vårt motto av mobil-först är stiftelsens byggstenar byggda för att vara naturligt mottagliga. En snabb kontroll på en mindre skärm visar att vår webbplats fortfarande ser ganska bra ut.

Men när vi klickar på hamburgermenyn, har vår off-canvas inte varit ordentligt ansluten. Den här delen blir lite knepig, men oroa dig inte! Vi bryter ner vad som händer i denna Off-Canvas-menyn och sedan gå igenom hur man kopplar upp det.

Om du tar en titt på eCommerce-header.html-filen, märker du att denna rubrik har en off-canvas inbyggd i den. Så varför fungerade det inte? När vi klickade på hamburgermenyn var det enda som var "pressade" rubriken. Resten av sidan förblev i sikte, vilket orsakade några konstiga överlappande.

Detta beror på att denna rubrik byggdes för att fungera på egen hand, men i verkligheten behöver det fungera med hela sidan. Med andra ord måste det trycka all innehåll på sidan över när menyn Off-Canvas utlöses, inte bara rubrikmenyn. Denna e-handel-header skrevs så här, eftersom det krävs en off-canvas som kräver dykning i din src / layouter / default.html sida, som ligger utanför byggstenens räckvidd.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet — Det här är vad vi för närvarande ser eftersom off-canvas inte har blivit ansluten än

För att åtgärda detta är allt vi behöver göra allting inuti & lt; Div Class = "Off-Canvas eCommerce-header-off-canvas position-vänster" id = "eCommerce-header" data-off-canvas & gt; och flytta den till src / layouter / default.html . Därefter kommer vi att sätta på {{& gt; kropp}} av vår sida inuti a & lt; Div Class = "Off-Canvas-content" data-off-canvas-content & gt; . Detta kommer att trycka på vår webbplats när Off-Canvas utlöses.

Nu när vi klickar på vår hamburgare, flyttar hela webbplatsen över för menyn Off-Canvas! Vår kropp default.html Sidan ska se ut så här:

& lt; kropp & gt;
  & lt; Div Class = "Off-Canvas eCommerce-header-off-canvas position-vänster" id = "eCommerce-header" data-off-canvas & gt;
& lt; knappklass = "Stäng-knapp" Aria-Label = "Stängmeny" Typ = "-knapp" Data-CLOSE & GT;
  & lt; span aria-dold = "sant" & gt; & amp; gånger; & lt; / span & gt;
& lt; / knapp & gt;
& lt; ul klass = "vertikal meny" & gt;
  & LT; Li Class = "Main-Nav-Link" & GT; & LT; A HREF = "Kategorier.HTML" & GT; & LT; / Li & GT;
  & LT; Li Class = "Main-Nav-Link" & GT; & LT; A href = "#" & GT; Kategori 2 & LT; / A & GT;
  & lt; Li Class = "Main-Nav-Link" & GT; & LT; en href = "why.html" & gt; & lt; / ll & gt;
  & LT; Li Class = "Main-Nav-Link" & GT; & LT; A href = "build.html" & GT; & LT; / Li & GT;
  & lt; Li Class = "Main-Nav-Link" & GT; & LT; A href = "#" & GT; & LT; / Li & GT;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul klass = "Meny vertikal" & gt;
  & lt; li & gt; & lt; a href = "#" & gt; Hjälp & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; order status & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; contact & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; ett href = "#" & gt; mitt konto & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; Div Class = "Off-Canvas-content" data-off-canvas-content & gt;
{{& gt; kropp}}
  & lt; / div & gt;
  & lt; script src = "{{root}}} tillgångar / js / app.js" & gt; & lt; / script & gt;
& LT; / Body & GT;

Slutsats

Vi har visat dig hur du startar din e-handelswebbplats med Foundations e-handelskit, men sluta inte där! Det finns över 100 byggstenar som kan användas för att förbättra dina sidor. På några minuter har vi ställts in en statisk e-handel webbplats med byggstenar. Detta sparar dig mycket tid som du nu kan använda för att laga i de visuella och stilen som passar ditt varumärke.

Även om du tar det här ytterligare och använder ett back-end-system, annorlunda partiell mekanism eller har ett annat sätt att få dina data till webbplatsen, kommer det givna arbetsflödet med byggstenar verkligen att spara tid och därmed pengar. Stiftelsens byggstenar är ett bra sätt att komma igång eftersom de är avsedda att förlängas, passa in i dina befintliga stilar och användas i alla applikationssystem.

Denna artikel uppträdde ursprungligen i nätmagasin Utgåva 266. Köp det här .

Relaterade artiklar:

Bygg en kortbaserad UI med stiftelsen
10 vackra nya e-handel webbplatser du måste se
Hur man förbättrar prestanda för e-handelsplatser

Bygg en e-handelsplats från början

Komma igång

Installera ett kit

Byggnadsställningen

Kontrollera efter responsivitet

Slutsats

Hur - Mest populära artiklar

17 tips för att dra manga ansikten

Bygg en snabb reaktiv blogg med svelte och sapper

Skapa texturer med mönsterstämpelverktyget

Hur man skapar glitchtext och bildeffekter i CSS

Hur man korrigerar en bristfällig komposition

Hur man bygger en fullständig webbplats i vinkel

Gör en komposit i Photoshop

Hur man ritar Harley Quinn

Kategorier