Ontwerp Ecwid-winkel aanpassen op een WordPress-site

Wanneer u een Ecwid-winkel aan een WordPress-site toevoegt, past Ecwid het ontwerp aan zodat het overeenkomt met de website. De winkeletalage erft automatisch de lettertypen en kleuren van uw WordPress-site voor een naadloze samensmelting.

U kunt het winkelontwerp ook aanpassen met blokinstellingen, thema's of CSS-codes. Als deze opties zijn hulpmiddelen om producten weer te geven volgens uw ontwerpvoorkeuren: kies de beeldverhouding waarmee uw productafbeeldingen op het scherm passen, selecteer wat u op de winkelpagina's wilt laten zien, stel kleuren in voor knoppen, links en teksten enz.

Zorg voordat u begint ervoor dat uw WordPress-dashboard en de Ecwid-plug-in zijn bijgewerkt naar de nieuwste versies om toegang te krijgen tot alle ontwerpinstellingen die in dit artikel worden beschreven. U kunt de updates controleren in de WordPress Admin → Plug-ins.

In dit artikel:

Ontwerpinstellingen op een WordPress-site
Ontwerp van het winkelwagenpictogram
Aangepaste CSS-codes
Ontwerpthema's voor WordPress
Veelgestelde vragen

Ontwerpinstellingen op een WordPress-site

We raden u aan voor het toevoegen van Ecwid aan een WordPress-website onze officiële Ecwid E-commerce Shopping Cart plug-in te gebruiken. Met de plug-in kunt u eenvoudig de winkel en bepaalde producten aan verschillende websitepagina's toevoegen, op elke pagina afzonderlijk het ontwerp van de winkel wijzigen, winkelwidgets toevoegen (winkelwagenpictogram, zoekveld, enz.) en nog veel meer.

Om een lang verhaal kort te maken: u kunt het winkelontwerp aanpassen in de instellingen voor de blokken waar u Ecwid heeft toegevoegd:

Het algemene pad om het winkelontwerp te wijzigen op WordPress is als volgt:

Ga naar het WordPress-dashboard → Pagina's en open de pagina met de winkel.
Klik op het blok met de winkel. Aan de rechterkant ziet u de instellingen van het blok.
Wijzig de instellingen in het blok zoals u ze wilt hebben.
Klik op Voorbeeld om te zien hoe de winkel eruitziet met de nieuwe instellingen.
Klik op Bijwerken om de wijzigingen op te slaan.

Het is belangrijk dat u het ontwerp wijzigt zoals hierboven is beschreven: in de instellingen van het blok. Als u de ontwerpinstellingen voor de winkel wijzigt op het tabblad Ontwerp in de Ecwid-beheerder, zijn deze instellingen niet op uw website te zien omdat ze worden overschreven door de instellingen van het blok.

In de instellingen van het blok kunt u het volgende veranderen:

Welke inhoud wordt weergegeven op de categorie- en productpagina's: titel, artikelnummer, prijs, enz.
Welke links voor winkelnavigatie worden weergegeven: kruimelpad, aanmeldlink, enz.
De grootte en beeldverhouding voor categorieën en miniaturen van producten.
De kleuren voor knoppen, teksten, links, achtergrond en prijs.
En een heleboel andere instellingen die u terugvindt in het onderdeel van het blok.

Blokinstellingen worden alleen toegepast binnen een specifiek blok. Als u een verschillend ontwerp wilt hebben voor verschillende productcategorieën, moet u deze toevoegen aan afzonderlijke pagina's en in elk winkelblok het ontwerp aanpassen.

Ontwerp van het winkelwagenpictogram

Klanten gebruiken het winkelwagenpictogram om hun aankoop te voltooien. Wanneer u Ecwid aan WordPress toevoegt, wordt er rechtsonder standaard een winkelwagenpictogram toegevoegd.

Winkelwagenpictogram van Ecwid op WordPress

U kunt de positie veranderen, kiezen of u het aantal artikelen/subtotaal in de winkelwagen wilt weergeven, een rand instellen en een pictogram kiezen.

Als het winkelwagenpictogram al op een andere plek op uw website staat (bijvoorbeeld in de kop), kunt u deze standaard toegevoegde winkelwagen verwijderen zodat klanten maar één winkelwagen zien.

Het uiterlijk van het winkelwagenpictogram wijzigen:

Ga naar het WordPress-dashboard → Uiterlijk → Aanpassen.
Klik op Ecwid in het menu op de zijbalk → Winkelwagenwidget.
Probeer verschillende instellingen voor de winkelwagen uit. Telkens als u een nieuwe instelling kiest, verandert het uiterlijk van de winkelwagen in het voorbeeld.
Selecteer de optie Tonen indien leeg als u het winkelwagenpictogram ook wilt weergeven als er geen producten in de winkelwagen zijn.
Zodra u de gewenste weergave hebt gevonden, klikt u op Publiceren:

WordPress plug-in van Ecwid voor winkelwagenwidget

Om de standaard toegevoegde winkelwagen te verbergen, selecteert u "Niet tonen" in de eerste ontwerpoptie Winkelwagen weergeven. Als u voor alle sitebezoekers wilt benadrukken dat dit een winkel is, selecteert u "Tonen op alle pagina's". Het pictogram van de winkelwagen geeft aan dat de site een winkel heeft.

Aangepaste CSS-codes

U kunt CSS-codes gebruiken voor het doen van aanpassingen die anders niet beschikbaar zijn. U wilt bijvoorbeeld de pictogrammen in de voettekst verplaatsen (in het Engels) en bovenin uw etalage zetten (“Bestellingen bijhouden”, “Favorieten”, “Inloggen” en “Winkelmandje”). Er is geen ingebouwde instelling om dit te veranderen, maar u kunt een CSS-code gebruiken. De aangepaste CSS-codes voor uw Ecwid-winkel moeten in de instellingen van WordPress worden toegevoegd.

Een CSS-code toevoegen aan uw WordPress-website:

Ga naar het WordPress-dashboard → Uiterlijk → Aanpassen.
Klik in de zijbalk links op Aanvullende CSS.
Zet uw CSS-code in het veld.
Publiceer de wijzigingen.

Op deze manier kunt u CSS-codes voor uw WordPress-website toevoegen en ook voor uw Ecwid-winkel.

Als u de juiste CSS-code voor uw aanpassingen niet kunt vinden of maken, ontwikkelt ons team aangepaste oplossingen voor Ecwid-gebruikers. Neem contact op met ons Customization Team voor een offerte.

Ontwerpthema's voor WordPress

Ecwid is compatibel met elk WordPress-thema. Dit zijn de gratis thema's van WordPress, kwaliteitsthema's van een externe leverancier of op maat gemaakte thema's.

Ecwid heeft een ingebouwde tool die ervoor zorgt dat het ontwerp van uw winkel en het WordPress-thema overeenkomen. Welk thema u ook gebruikt, Ecwid detecteert het kleurenschema van uw site (op basis van de tekst, links, achtergrond en knoppen) en gebruikt dit automatisch in het winkelontwerp.

Als u nog over een WordPress-thema moet beslissen, kijk dan naar deze thema's:

Responsive van CyberChimps
HEALTHFLEX van PlethoraThemes
Verzameling Ecwid-thema's van ThemeForest

U kunt het ontwerp van uw winkel verbeteren door schuifregelaars te maken. WordPress heeft een geweldige plug-in hiervoor. Slimme Schuifregelaar 3 is een krachtige tool voor het maken van schuifregelaars met een gebruiksvriendelijke interface en een heleboel opties voor aanpassingen.

Veelgestelde vragen

In mijn WordPress-editor worden geen blokinstellingen voor de winkel weergegeven

U heeft de instructies hierboven gelezen, maar kunt niet dezelfde winkelinstellingen vinden in uw WordPress-editor? Hiervoor zijn twee mogelijke verklaringen:

U gebruikt de oude versie van WordPress.
Oplossing: werk WordPress bij naar de nieuwste versie. Zorg er ook voor dat uw Ecwid plug-in up-to-date is: ga naar WordPress Admin → Plug-ins → Geïnstalleerde plug-ins → Ecwid E-commerce Shopping Cart. Klik op Bijwerken als u ziet dat er een nieuwe versie van de plug-in is.
U heeft de winkel aan uw website toegevoegd voordat de WordPress-blokeditor (ook bekend als Gutenberg) werd geïntroduceerd.
Oplossing: werk WordPress bij naar de nieuwste versie, verwijder de winkel en voeg hem vervolgens opnieuw toe. Volg de instructies over het toevoegen van een Ecwid-winkel aan een WordPress-site.

Heeft dat allemaal niet geholpen? Neem contact met ons op. We zullen u helpen dit op te lossen.

De wijzigingen in het winkelontwerp zorden niet weergegeven op de website

Dit kan gebeuren als u de ontwerpinstellingen direct wijzigt in de Ecwid-beheerder → Ontwerp. Deze wijzigingen worden niet weergegeven op uw WordPress-website omdat ze worden overschreven door de ontwerpinstellingen in het winkelblok.

U moet uw winkelontwerp aanpassen in de WordPress-editor, bij de instellingen voor het blok waarin de winkel zich bevindt. Bekijk de instructies hier: Ontwerpinstellingen op een WordPress-site.

Kan ik verschillende ontwerpen instellen voor verschillende categorieën producten?

Ja, u kunt verschillende ontwerpen hebben als u uw winkel aan WordPress toevoegt via de Ecwid plug-in. Het instellen van verschillende ontwerpen voor winkelcategorieën op verschillende WordPress-pagina's gaat als volgt:

Wijs producten toe aan categorieën als u dit nog niet heeft gedaan.
Voeg categorieën van producten toe aan verschillende pagina's van de website.
Wijzig het winkelontwerp van elk blok.

Omdat wijzigingen in het ontwerp alleen worden doorgevoerd in het winkelblok waarin u ze instelt, kunt u op verschillende pagina's winkelcategorieën hebben die er anders uitzien.