Webshop-ontwerp

Met Webshop-ontwerp geef je je webshop een nieuw uiterlijk zonder zelf in WordPress te bouwen. Je kiest kleuren, lettertypes, een kop en voettekst en stelt je homepagina samen uit secties. Je ziet alles eerst in een voorbeeld van je echte webshop. Bezoekers blijven het huidige ontwerp zien totdat je publiceert.

Je vindt het in het menu links, in het blok Winkel, als Ontwerp. Alleen beheerders zien dit menu-item.

Wat je nodig hebt

Een gekoppelde WooCommerce-webshop. Zie Je WooCommerce-webshop koppelen.
De plugin Teamdock Designer in je webshop. Een webshop die Teamdock host heeft hem al. Heeft je webshop eigen hosting, dan laat Ontwerp zien dat je de plugin moet installeren, met de knop Plugin downloaden (.zip). Je vindt hem ook onder Instellingen → Integraties als Webshop-ontwerp. Zie WordPress-plugins van Teamdock.

Beginnen met een beschrijving

De eerste keer vraagt Teamdock je om je webshop te beschrijven.

Vertel bij Beschrijf je webshop in een paar zinnen wat je verkoopt, aan wie, en hoe je webshop moet aanvoelen.
Optioneel: vul bij Sites die je mooi vindt (optioneel) tot drie adressen in, of voeg een Schermafbeelding toe. De ontwerpen volgen dan de stijl van die sites (kleuren, letters, hoeken, volgorde). Er wordt geen tekst, foto of logo van overgenomen.
Klik op Maak drie ontwerpen. Dit duurt tot een minuut, of tot twee minuten als je sites hebt opgegeven.
Kies er een met Dit ontwerp gebruiken, of klik op Laat drie andere zien.

Een ontwerp kiezen verandert nog niets voor bezoekers. Het wordt je concept, dat je kunt blijven aanpassen. Wil je later opnieuw beginnen, kies dan Opnieuw beginnen met een beschrijving (onder Meer).

Het ontwerp aanpassen

Het voorbeeld van je webshop staat in het midden. Met de knoppenbalk eromheen open je de panelen en gereedschappen:

Stijl: kleuren, lettertypes, knoppen, hoeken, kaarten en overgangen. Onder Stijlen verandert één klik alles tegelijk; je teksten, foto’s en secties blijven staan. Verras me kiest een willekeurige stijl. Heb je een logo, dan haalt Kleuren uit mijn logo er een kleurenpalet uit.
Header en footer: je logo, de kop (indeling, zoekvak, menu, een regel boven de kop) en de voettekst (over je winkel, contact, openingstijden, extra kolommen met links, een aanmeldformulier voor de nieuwsbrief).
Secties: de secties van de pagina die je bekijkt. Gebruik Sectie toevoegen voor bijvoorbeeld een Opening, Producten, categorieën, vragen, klantcitaten of een Vrije indeling met eigen rijen en kolommen. Je kunt secties verplaatsen, verwijderen en een Eigen achtergrond geven (een Eigen kleur of een Foto als achtergrond). Begin je met een lege homepagina, dan helpt Begin met een voorgestelde homepagina.
Bibliotheek: bewaar een ontwerp onder een naam met Bewaren als… om het later terug te halen of te vergelijken, en bewaar losse secties met Bewaar sectie om ze op een andere pagina te gebruiken.
Sectie: klik daarna in het voorbeeld op een sectie om alleen die aan te passen.
Schrijf: tekst direct in het voorbeeld bewerken en secties slepen.
Schermgrootte: bekijk het voorbeeld als computer, tablet of telefoon.

Boven het voorbeeld kies je welke Pagina je bekijkt: Home, Winkel, Product, Winkelwagen, Afrekenen of Account. Ook die pagina’s kunnen eigen secties krijgen, die onder de inhoud van de pagina en boven de voettekst staan. De eigen pagina’s van je webshop (zoals “Over ons”) volgen het ontwerp; hun tekst bewerk je in WordPress via Tekst bewerken in WordPress.

Foto’s

Bij een foto kies je uit Mijn foto’s (de mediabibliotheek van je webshop), upload je er een met Afbeelding uploaden, of zoek je bij Stockfoto’s vrij te gebruiken foto’s. Lege foto’s vullen met mijn producten zet foto’s van je bestverkochte producten en categorieën op lege plekken.

De ontwerpassistent

Open Assistent en beschrijf in je eigen woorden wat je wilt, bijvoorbeeld “maak de kop donker en voeg een sectie met onze bestsellers toe”. Klik op Wijzigen. Heb je een sectie gekozen, dan past de assistent alleen die aan.

Stelt de assistent een nieuwe pagina voor, zoals een contactpagina, dan kun je die maken met Deze pagina aanmaken of overslaan met Nee, bedankt. Een aangemaakte pagina wordt meteen gepubliceerd. Eindigt hij met een aanvraagformulier, dan komt wat bezoekers sturen binnen als ticket in je Inbox.

Bij Welk AI-model antwoordt kies je Mistral (verwerkt in de EU) of, als een beheerder het heeft aangezet onder Instellingen → AI, Claude (verwerkt buiten de EU).

Bekijken en publiceren

Het voorbeeld werkt zichzelf bij terwijl je werkt. Rechtsboven zie je Wijzigingen… en daarna Voorbeeld is bijgewerkt. Staat er Voorbeeld niet bijgewerkt., klik dan op Opnieuw proberen.

Het voorbeeld is je echte webshop met het nieuwe ontwerp. Alleen jij ziet het, en er kunnen geen bestellingen vanuit worden geplaatst. Met Preview (Openen in nieuw tabblad) loop je in een eigen tabblad door je webshop.

Klik rechtsboven op Publiceren…. Die knop werkt pas als het voorbeeld is bijgewerkt.
Bevestig dat je het huidige thema wilt vervangen door dit ontwerp voor alle bezoekers.
Je ziet de melding dat je webshop nu het nieuwe ontwerp heeft.

Het vorige ontwerp blijft bewaard. Met Vorig ontwerp (Vorig ontwerp terugzetten) zet je het terug voor alle bezoekers. Laadt je webshop niet met het nieuwe ontwerp, dan zet Teamdock het vorige ontwerp vanzelf terug en verandert er niets voor bezoekers.

Ongedaan maken draait je laatste wijziging in het concept terug.

Tips

Krijg je een melding dat een knop in je ontwerp naar een pagina gaat die je webshop niet heeft? Klik op Deze pagina aanmaken, of pas de link van de knop aan.
Zie je de melding dat kopers niet kunnen afrekenen zonder account? Zet afrekenen als gast aan in WooCommerce → Instellingen → Accounts & privacy.
Zegt Ontwerp dat je webshop een oudere versie van de ontwerp-plugin heeft, download dan de nieuwe en upload hem op dezelfde manier in WordPress.

Andere meldingen, zoals “Je host blokkeert themawijzigingen”, staan in Problemen met de koppeling.