Hallo. De inhoud van ons blog is voor uw gemak automatisch vertaald. Onze excuses voor de mogelijk slechte vertaling.
New Ecwid Ontwerp Instellingen: Tientallen Aanpassingsopties, No Coding
Posted Apr 24, 2018 door Den Nikiforov, Ecwid team

New Ecwid Ontwerp Instellingen: Tientallen Aanpassingsopties, No Coding

Ontwerp spreekt boekdelen voor een e-commerce op te slaan. Als mensen gemakkelijk kunnen navigeren op uw online storefront, heb je een veel betere kans om ze te converteren. Een consistente, modern design kunnen klanten dat je een betrouwbaar merk vertellen.

Ecwid helpt elk bedrijf - zelfs een kleine en beginnende één - om te kijken en te verkopen professioneel op het web. Je hoeft niet heel veel top-tier webdesigners betalen om een ​​mobiel-vriendelijke krijgen, schoon, en mooie e-commerce op te slaan.

We’ve toegevoegd tientallen nieuwe storefront ontwerp functionaliteiten om Ecwid, zodat je kunt geven uw e-commerce op te slaan de look en feel die een afspiegeling is van uw merk het meest.

Het opzetten van elk klein detail in uw online winkel ontwerp is dood eenvoudig. afbeelding Wijzigen stijlen, product pagina-indelingen, en storefront elementen zonder codering. U zult het zelf zien in deze post.

Het nest nieuwe instellingen onder Instellingen → Ontwerp in uw Ecwid Configuratiescherm. Om ze te gebruiken, Zorg ervoor dat u alle storefront updates ingeschakeld in Instellingen → Wat is er Nieuw.

Wat is nieuw sectie in Ecwid bedieningspaneel

Schakel deze updates in Instellingen → Wat is er nieuw aan de nieuwe pagina ontwerp instellingen zien

Wat als ik ben met behulp van de oudere versie van Ecwid storefront?

Overschakelen naar de nieuwe storefront kan het uiterlijk van uw winkel volledig te veranderen. Met het nieuwe ontwerp instellingen, vindt u meer aanpassingsmogelijkheden en een meer dwingende look voor uw winkel te krijgen. Echter, Wees voorzichtig als u een self-made CSS thema of andere op maat ontwikkelde storefront functies - ze zijn mogelijk niet compatibel met de nieuwe storefront zijn. Als je hulp nodig hebt, ons support team is er voor u.

Design Your Online Storefront

Je bestuurt de gehele uitstraling van uw product catalogus, van product foto's SKU's en knoppen.

1. Сhoose de beste beeldformaat voor de presentatie van uw producten

Standaard, productafbeeldingen zijn middelgroot, die geschikt is voor de meeste winkels.

Sommige producten hebben belangrijke details die je zou willen visualiseren (bijvoorbeeld, als u verkoopt sieraden en schilderijen). Selecteer het grote beeldformaat uw klanten te laten genieten van uw mooie producten en fotografie.

Als u verkoopt een product soort in een groot assortiment (zeggen, 200 lederen riemen in verschillende kleuren), vasthouden aan kleinere afbeeldingen. Uw winkel zal veel producten op het scherm weer te geven en uw klanten zullen onder de indruk door de keuze.

Product foto's ontwerp in Ecwid

Klein, medium, en een groot beeldformaat voor product foto's

2. Optimaliseer de beeldverhouding om uw product afmetingen

Verkoopt u palmen? Of misschien langbenige modellen showcase uw ontwerper jassen? Beide zullen groot in verticale foto's zien.

De horizontale verhouding past breed producten - zeg, schoenen, sofa's, of voeding bars.

Voor ronde voorwerpen (of, in geval van twijfel), Gebruik vierkante beelden, ze zien er altijd geweldig.

 Verticaal, horizontaal, en plein product foto's

Verticaal, horizontaal, en vierkante afbeeldingen

Als u wilt benadrukken productfoto's en maken ze zich onderscheiden van de winkel achtergrond, selecteer “donkerder achtergrond afbeelding”.

3. Kies welk product informatie te laten zien in de etalage

Net als bij productfoto's, U kunt kiezen uit vele ontwerpmogelijkheden voor de andere storefront elementen: product namen, titels, prijzen, Sku ' s, “Kopen” knoppen. Beslissen hoe elk van hen weer te geven - het beeld product onder of op de muis hover.

Het ontwerp van de product foto's in Ecwid

Toon de elementen onder product foto's, bij aanwijzen, of ze te verbergen

Als u ervoor kiest om de informatie onder het product foto's te plaatsen, is het mogelijk om de layout in te stellen. uw inhoud uit te lijnen naar links, rechts, center, of rechtvaardigen - u bent vrij om de look die u het meest te maken.

Verschillende indelingen van de elementen (productnaam en priceDifferent layouts van de elementen

Verschillende indelingen van de elementen (naam van het product en de prijs)

Het is ook mogelijk om elementen te verbergen. Verbergen ze allemaal om uw storefront lijken op een lookbook. Door te klikken op een van de productfoto's, uw klanten zullen naar de productpagina.

Kies ervoor om een ​​extra product afbeelding weergegeven als u wilt meer details te zien. Ecwid zal de eerste afbeelding van het product fotogalerij op de muis hover tonen.

Extra product afbeelding op de muis hover

Extra product afbeelding op de muis hover

Deze nieuwe instellingen te maken voor een groot aantal van ontwerp varianten voor uw storefront blik.

4. Ontwerp uw winkel categorieën

U zult opties om het opzetten van de look van uw categorieën te vinden. Of u nu foto's, pictogrammen, of merk logo's voor uw categorie foto's, Ecwid heeft het ontwerp opties om ze ziet er fantastisch uit.

Het ontwerp van de productcategorie foto's

Categorie namen onder de foto's, op hen, bij aanwijzen, en verborgen

Optimaliseer productpagina's voor conversie

Nu kunt u de informatie van uw product pagina's op verschillende manieren te organiseren, afhankelijk van wat het beste werkt voor uw klanten. Elk ontwerp optie is gemaakt op basis van de beste e-commerce praktijken voor het verhogen van conversies.

1. Kies het product pagina-indeling

Er zijn vier nieuwe mogelijkheden voor het organiseren van de inhoud op uw productpagina's.

Het aantrekken van aandacht voor uw product foto's. een afbeelding van hoge kwaliteit product op de linkerkant van uw product pagina zal zij het eerste wat uw klanten zullen merken. Gebruik de 2-kolom lay-out met de product beschrijving aan de rechterzijde als u verkoopt visueel aantrekkelijke producten en hebben korte productbeschrijvingen.

Product page optimalisatie

De 2-kolom lay-out met de product beschrijving aan de rechterzijde

Voeg gedetailleerde productbeschrijvingen. Voor producten zoals elektronica en farmaceutische producten, productbeschrijvingen kan behoorlijk lang duren. Selecteer vervolgens de twee kolommen lay-out met de beschrijving product onder de afbeelding. Zelfs als je een lange handleiding toe te voegen voor het gebruik van uw product, de pagina eruit zal zien harmonieuze.

Product page optimalisatie 2

De 2-kolom lay-out met de beschrijving product onder de afbeelding

Benadruk product opties en de knop “afrekenen”. Als uw klanten niet hoeven te lange beschrijvingen lezen of onderzoekt de galerij om uw producten te kopen, ervoor kiezen om het product opties met de kassa-knop aan de linkerkant weergegeven. Zeggen, als u verkoopt kleine aquariumvissen.

Product page optimalisatie 3

De knop “Voeg toe aan bag” in focus

Minimaliseren scrollen en afleiding. Een drie-kolom lay-out werkt als u wilt dat uw product pagina naar een maximum aan informatie zonder extra moves tonen.

Product page optimalisatie 4

De compacte lay-out 3-column

U kunt ook selecteert u de lay-out van uw foto galerij. Help uw klanten krijgen het gevoel van uw product met een dwingende fotogalerij. Kies de lay-out voor miniaturen van foto's in je galerij (verticale of horizontale) of toon uw hypnotiserende beelden in full size. Hoe meer afwisselende en gedetailleerde beelden te laten zien, de betere.

Fotogalerij layoutopties

Fotogalerij layoutopties

3. Selecteer het product informatie om weer te geven in de zijbalk

Een omzetting van product pagina biedt voldoende product informatie, terwijl het simpel te houden. In Ecwid, U kunt de elementen verbergen (zoals SKU, product opties, share buttons) als je ze niet nodig hebt, zodat uw klanten laat je niet afleiden op weg naar winkelwagen.

Het beste deel is dat je elk element kunt slepen en organiseren ze in willekeurige volgorde. Test veel nieuwe manieren om uw product pagina's voor conversies te optimaliseren.

Product page optimalisatie 5

Flexibele zijbalk instellingen

Wijzig uw Storefront Navigation & kleuren

Er zijn nog een paar storefront instellingen, die zijn standaard ingeschakeld om u te helpen uw klanten te navigeren uw winkel. U kunt een van hen uit te schakelen wanneer u maar wilt.

Als u overschakelt van de oudere storefront versie, deze instellingen zullen migreren naar de nieuwe storefront zoals u ze eerder had.

Kleur Adaptive Mode. Als u een Ecwid online winkel te installeren op uw website, de winkel kleuren zullen automatisch worden afgestemd op uw website thema. Uw winkel zal zien als een natuurlijk onderdeel van uw website.

De voettekst menu en paneermeel helpen klanten naar uw winkel sneller te bladeren en te voorkomen dat ze verdwalen.

De sign-in verbinding stelt klanten in staat om in te loggen op hun profiel om hun bestellingen te bekijken en gebruik maken van de wishlist.

“Sorteren op” opties kunnen uw klanten om uw producten sorteren op prijs, naam, en andere voorwaarden.

Andere manieren om uw Ecwid Store Design wijzigen

Het nieuwe ontwerp instellingen hebben betrekking op de meest voorkomende gevallen. Wilt u naar uw winkel te veranderen op andere manieren:

  1. Als u een aangepast thema voor uw winkel zonder codering, proberen ontwerp apps uit de Ecwid App Market (beschikbaar in de betaalde Ecwid plannen, app prijzen gelden).
  2. Een aangepaste CSS thema (een set van regels die het uiterlijk van elk element in de winkel bepaalt, zoals de grootte, vorm, of kleur). Het creëren van een CSS thema vereist bepaalde tech kennis. Er is een gids voor CSS thema's in de Ecwid Knowledge Base waarin wordt uitgelegd hoe je je eigen CSS thema te maken en instructies voor het veranderen van specifieke elementen. U kunt altijd vragen aan de Ecwid customer care team om hulp, of veroordeling van de ontwikkeling op maat van uw eigen CSS thema.
  3. Voor ontwikkelaars: Het gebruik van de Ecwid Javascript API om Ecwid storefront functies uit te breiden. U kunt een nieuw CSS thema of een app te bouwen, en verkopen op de Ecwid App Market. De Ecwid Javascript API kunt u de storefront blik volledig te veranderen, het brengen van veranderingen zo diep als je nodig hebt. Als u klaar bent om te beginnen, gelieve inschrijven op onze pagina voor ontwikkelaars.

Hier krijg je een One-pagina website voor uw Online Store

Uw Ecwid winkel ziet er geweldig uit, maar je hoeft niet een website te verkopen op hebben?

Starter Site is een gratis-pagina website die Ecwid biedt wanneer u uw Ecwid account aan te maken. Dit wordt gedaan om je snel te laten beginnen met online verkopen op een nette webpagina en winst maken meteen om uw bedrijf te laten groeien.

Spreken van het ontwerp, Starter Site is gebouwd met kant en klare blokken (de omslagafbeelding, logo, online winkel, “Over Ons” sectie, klanten feedback, en contacten) dat u kunt inschakelen, onbruikbaar maken, en aanpassen.

Als u nodig hebt om uw Starter Site aanpassen, die nu ga je bellen? Goed, niemand! U kunt de hele website te bewerken zonder speciale kennis, met behulp van uw desktop computer of zelfs via de Ecwid Mobile store management-app voor iOS.

Bouw je gratis Starter Site vandaag met behulp van onze stap-voor-stap handleiding.

We kunnen niet wachten om te leren wat u vindt van het nieuwe ontwerp-instellingen - zie je in de reacties hieronder.

About the author
Den Nikiforov is a Product Designer at Ecwid. He loves to see his ideas come to life and bring good to Ecwid entrepreneurs. In his free moments Den enjoys sci-fi books and long walks.