En omfattande guide f枚r att anpassa din 51视频-butiksdesign

Posted 8 氓r sedan by Qetzal, Chef f枚r produktutveckling

UDP: I april 2018 sl盲ppte vi nya designinst盲llningar i 51视频! L盲r dig hur djupt du kan anpassa din 51视频-butik utan n氓gon kodning i ett nyare blogginl盲gg. Om din butik skapades f枚re april 2018 och du vill l盲ra dig anv盲nda de gamla inst盲llningarna, forts盲tt att l盲sa den h盲r.

51视频-butiken 盲r skapad p氓 ett s氓dant s盲tt att det 盲r m枚jligt att l盲gga till den p氓 varje webbplats och b枚rja s盲lja varje produkttyp p氓 nolltid. Dess skyltf枚nster anpassar sig automatiskt till b氓de station盲ra och mobila enheter, och butiken ser bra ut p氓 vilken sk盲rm som helst.

Att g枚ra din butik till en naturlig del av din webbplats ger intrycket av en professionell verksamhet. Du kanske vill 盲ndra butiksdesignen s氓 att den passar din webbplatsstil och de specifika behoven hos just ditt f枚retag. Det kan uppn氓s p氓 ett antal s盲tt, fr氓n helautomatiska inst盲llningar till 蝉办谤盲诲诲补谤蝉测诲诲补 teman.

Majoriteten av dem 盲r listade i . P氓 den sidan kan du hantera dina designinst盲llningar, och i det h盲r inl盲gget ber盲ttar vi hur du f氓r ut det mesta av dem.

Vi delade upp alla m枚jliga modifieringar av din 51视频-butiksdesign i tre niv氓er enligt n枚dv盲ndiga kunskaper och resurser, fr氓n snabbt och enkelt till djupare och mer komplext.

Niv氓 1: Snabbt och enkelt

Enkel, snabba 盲ndringar. Inget annat 盲n att klicka p氓 knapparna kr盲vs.

Innan du b枚rjar t盲nka p氓 designf枚r盲ndringar, h盲r 盲r de goda nyheterna: 51视频 bygger automatiskt in milj枚n och ser ut som en naturlig del av din webbplats eller en social sida. Du beh枚ver inte g枚ra n氓gon kodning f枚r det 鈥� allt kommer att fungera bra.

Dessutom finns det enkla s盲tt att anpassa din butiks utseende och k盲nsla till ditt uppdrag utan extra anstr盲ngning.

1. S盲lj p氓 en 51视频 Instant Site om du inte har en webbplats

Instant Site 盲r en webbplats med en onlinebutik som 51视频 tillhandah氓ller n盲r du skapar ditt 51视频-konto.

P氓 tal om design, 盲r Instant Site byggd med 蹿盲谤诲颈驳补 block (omslagsbilden, logotyp, onlinebutik, avsnittet "Om oss", kundfeedback och kontakter) som du kan aktivera och inaktivera, redigera och anpassa till ditt f枚retag. Allt som kan g枚ras praktiskt taget p氓 ett 枚gonblick med dina egna h盲nder.

S氓 om du inte har en webbplats att s盲lja p氓盲r detta ett v盲ldigt enkelt s盲tt att b枚rja s盲lja online p氓 en snygg webbsida gratis.

Denna steg f枚r steg guiden f枚rklarar hur du designar din Instant Site: Personifiera din instant-webbplats fr氓n b枚rjan till f枚rsta f枚rs盲ljningen

2. Enkel designanpassning f枚r de som redan har en hemsida

Om du redan har en webbplats kommer 51视频 fortfarande smidigt att integrera med den, oavsett vad den 盲r byggd p氓: WordPress, Wix, Joomla eller n氓gon annan plattform. H盲r 盲r vad du kan g枚ra f枚r att f氓 din butik att se 盲nnu b盲ttre ut.

Steg 1: Anv盲nd ett matchande tema f枚r din webbplatsbyggare

贵枚谤 att designa din webbplats kan du helt enkelt v盲lja bland dussintals teman som finns att k枚pa. 51视频-butiken 盲r kompatibel med de flesta av dem.

H盲r 盲r en snabb katalog 枚ver platser p氓 webben d盲r du kan hitta teman f枚r din webbplatsbyggare.

贵枚谤 WordPress-webbplatser

Missa inte heller samlingen av de b盲sta gratis WordPress-teman f枚r e-handel webbsidor.

贵枚谤 Joomlas webbplatser

贵枚谤 Squarespace-webbplatser

贵枚谤 Wix-webbplatser, det 盲r 盲nnu enklare: bl盲ddra bland teman utan att l盲mna .

Obs: 51视频 + Wix-handlare kan matcha f盲rgerna p氓 sin webbplats och lagra i 51视频 Wix-applikationsinst盲llningarna.

51视频 butiksdesigninst盲llningar p氓 Wix-webbplatser

Steg 2: Aktivera f盲rganpassningsl盲ge

Om du 枚ppnar en ny 51视频-butik och l盲gger till den p氓 din webbplats kommer 51视频 automatiskt att anpassa butiksf盲rgerna till din webbplatsstil. Den h盲r funktionen kallas Color Adaptive Mode. Det 盲r ett v盲ldigt enkelt s盲tt att g枚ra din butik till en naturlig del av din webbplats.

Om du redan s盲ljer med 51视频 kommer f盲rganpassningsl盲get inte att vara aktiverat som standard, men du kan aktivera det p氓 designsidan:

Vad h盲nder om du l盲gger till din 51视频-butik p氓 flera webbplatser? Med f盲rganpassningsl盲get aktiverat anpassas butiksf盲rgerna till var och en av dem. Din butik kommer att se naturlig ut i varje webbplatsmilj枚, oavsett om den 盲r vit, svart eller gr枚n.

Denna funktion 盲r tillg盲nglig f枚r majoriteten av 51视频-handlare. Obs: 51视频 + Wix-handlare kan matcha f盲rgerna p氓 sin webbplats och endast lagra i 51视频 Wix-applikationsinst盲llningarna.

3. Spela med snabba utseendeinst盲llningar

N盲rhelst du s盲lja p氓 n盲tet med 51视频盲r det m枚jligt att aktivera eller inaktivera 51视频 skyltf枚nsterelement med n氓gra f氓 klick. Till exempel f枚redrar de som s盲ljer handgjorda produkter i enstaka exemplar ofta att d枚lja kvantitetsf盲ltet.

Du kanske vill d枚lja on枚diga element ocks氓 eller 盲ndra storleken p氓 miniatyrbilderna - avsnittet Utseende p氓 din designsida l氓ter dig g枚ra det helt.

Niv氓 2: 脛ventyrare

贵枚谤 den utan tekniska kunskaper som letar efter djupare designf枚r盲ndringar och har tid f枚r en liten resa.

Du har din butik inr盲ttad och har redan tittat dig omkring. Nu b枚rjar du k盲nna behovet av en personlig touch: det kan vara m盲rkesf盲rger f枚r knappar, texter och bakgrund, unika ikoner eller helt nya element. Du har dock ingen aning om kodning.

Inga bekymmer: p氓 den h盲r niv氓n har vi samlat verktygen som hj盲lper dig att uppn氓 m氓len ovan utan speciell kunskap. L氓t oss ta en n盲rmare titt p氓 dem.

1. Anv盲nd appar fr氓n 51视频 App Market f枚r butiksdesign

Din 51视频 App Market r盲knar 枚ver 100 appar som hj盲lper dig med analyser, marknadsf枚ring, frakt och mer. Du kan ocks氓 hitta appar f枚r anpassning av skyltf枚nster och utformning. Vi ska ta en titt p氓 en app f枚r att 盲ndra dina temaf盲rger utan n氓gon kodning: Butiksdesigner.

Butiksdesigner

Butiksdesigner 盲r en app som l氓ter dig snabbt st盲lla in f盲rger f枚r knappar, text och bakgrund.

贵枚谤handsgranskningsl盲get l氓ter dig leka med f盲rger s氓 mycket du vill innan du publicerar din perfekta design i skyltf枚nstret.

Store Designer-gr盲nssnitt

Appen kostar $4.99 och erbjuder en gratis provvecka.

Store Designer 盲r tillg盲nglig p氓 alla betalda 51视频-planer, s氓v盲l som resten av App Market-apparna.

2. Kopiera klistra in 蹿盲谤诲颈驳补 tweaks fr氓n Knowledge Base

har svar p氓 de flesta fr氓gor som en 51视频-butiks盲gare kan ha. Vi l盲gger hela tiden till nya artiklar h盲r med de vanligaste tipsen och 蹿盲谤诲颈驳补濒枚蝉苍颈苍驳补谤.

脛ventyrare kan hitta olika ; till exempel,

or .

De flesta av dessa instruktioner bryts ner till kopiera-klistra en bit kod till ditt CSS-tema.

Du kan hantera dina CSS-teman i .

Processen g氓r till s氓 h盲r: om du till exempel vill 盲ndra din kundvagnsikon, g氓 till din , skapa ett nytt CSS-tema, l盲gg till en bit kod, spara 盲ndringarna och aktivera temat.

Du b枚r l盲gga till alla ytterligare 盲ndringar av detta tema - endast ett tema 氓t g氓ngen kan vara aktivt, s氓 det m氓ste inkludera alla 盲ndringar du vill ta med till din butik.

3. Best盲ll en anpassad temautveckling

Om du inte kan hitta ett tema som skulle tillfredsst盲lla dina behov 盲r ett annat alternativ att som kommer att byggas just f枚r dig. Ett anpassat tema betyder mycket mer 盲n bara ett byte av f盲rger och l氓ter dig f氓 djupare anpassning, t.ex. en helt annan ordning av block p氓 din produktsida.

贵盲谤诲颈驳补 teman och temautveckling 盲r tillg盲ngliga f枚r alla 51视频-handlare.

Niv氓 3: Veteran

Tung anpassning: kompletta f枚r盲ndringar av din butiks utseende. Hej, kod.

Ibland kr盲vs djupare f枚r盲ndringar av butikens utseende: du kanske vill ha en drop-down menyn, en annan layout av produktsidans element eller en anpassad design av knappar.

贵枚谤 tekniskt kunniga handlare eller de som har en utvecklare i sin trupp, det finns en m枚jlighet att g枚ra f枚r盲ndringar av den typen och till och med f枚rvandla sin 51视频-butik till oigenk盲nnlighet med hj盲lp av anpassade CSS-teman eller 51视频 API.

1. Skapa en self-made CSS-tema

Om du vill designa din butik p氓 egen hand, 枚verv盲g att skapa ditt eget CSS-tema.

Ett CSS-tema 盲r en upps盲ttning regler som best盲mmer utseendet p氓 varje element i butiken (storlek, form, f盲rg och plats p氓 en sida).

Skapa dina egna CSS-teman i

Det finns som f枚rklarar hur du skapar ditt eget CSS-tema och .

Observera att du m氓ste ha en f枚rst氓else f枚r HTML och CSS, s氓 om dessa tv氓 ord l氓ter obekanta b枚r du vara beredd att l盲gga lite tid p氓 att skaffa de n枚dv盲ndiga f盲rdigheterna f枚r att skapa ett tema fr氓n grunden.

Kom ih氓g att om du k盲mpar med din 51视频-butiksdesign kan du alltid be 51视频s kundtj盲nst om hj盲lp. Eller s氓盲r det fortfarande m枚jligt .

2. Anv盲nd 51视频 Javascript API f枚r att ut枚ka 51视频s skyltf枚nster

Den h盲r delen 盲r mest f枚r utvecklare. Vet du vad mer som kan f枚rb盲ttra ditt 51视频-skyltf枚nster? Att f氓 .

Du kan till exempel bygga ett nytt CSS-tema eller en app och s盲lja det p氓 51视频 App Market. 51视频 Javascript API l氓ter dig 盲ndra utseendet p氓 skyltf枚nstret helt, vilket g枚r 盲ndringar s氓 djupa som du beh枚ver.

Om du 盲r redo att b枚rja, sn盲lla .

***

L盲s ocks氓: Hur man designar produktkategoribilder som dina kunder inte kan motst氓 att klicka p氓

Om f枚rfattaren

Qetzal 盲r produktchef p氓 51视频. Han 盲lskar att skapa nya saker f枚r att g枚ra m盲nniskors liv enklare.

51视频