Menu

Een leuke pagina met aanbiedingen maken

In de vorige blog adviseerden wij een speciale actiepagina te maken met afgeprijsde artikelen. Dat kan op verschillende manieren. In dit artikel leggen we stap voor stap uit hoe je producten uit verschillende categorieën labelt, vervolgens afprijst en tezamen op een mooie actiepagina plaatst. De pagina wordt toegevoegd aan de rechterzijde van het categoriemenu en voorzien van een leuke voorjaarsbanner.

Actiepagina maken

Maak een labelset

Ga naar Webshop > Geavanceerd > Productlabels. Klik nu rechts op de grote blauwe knop Labelset toevoegen. In het volgende scherm typ je “Voorjaarsactie” in het veld achter "Labelset titel" . De drie opties daaronder kun je uitvinken. Tot slot typ je “Aanbieding” in het veld onder “Productlabels” , zoals in onderstaand voorbeeld, en klik je op Opslaan

Labelset maken

Label de producten

Nu gaan we de producten, die je op de actiepagina wilt tonen, labelen. Ga naar Webshop > Producten. Vink de producten die je op de actiepagina wilt tonen aan door het vierkantje in de linkerkolom aan te klikken. Wanneer je de gewenste producten hebt aangevinkt klik je op de knop Bewerken onderaan de pagina. In het volgende scherm klik je op Label onder het kopje "Label" en vervolgens vink je het label ‘Aanbieding’ aan, zoals in onderstaand voorbeeld en klik je op Opslaan. Tip! op de pagina worden de producten in rijden van vier getoond, voor een mooi symmetrisch overzicht selecteer je dus een veelvoud van 4.

Producten selecteren Producten labelen

Je krijgt een melding dat het aantal geselecteerde producten zijn bijgewerkt. Klik op ”OK” en je keert terug naar het productoverzicht. Een voorjaarsactie is natuurlijk niet aantrekkelijk als er geen leuke korting wordt aangeboden. Daarom gaan we nu de geselecteerde producten afprijzen.

Producten afprijzen

Laat de vinkjes voor de producten staan en klik opnieuw op de knop Bewerken onderaan de pagina. In het volgende scherm klik je op Korting onder het kopje “Prijs”. De makkelijkste manier is om nu een percentage in te vullen, bijvoorbeeld 15% en kies bij de opties daaronder voor “Overschrijven / Instellen”, zoals in onderstaand voorbeeld, en klik op Opslaan.

Producten afprijzen

Let op: als je op deze producten reeds een korting had ingesteld dan wordt deze nu overschreven!

Je krijgt weer een melding dat de geselecteerde producten zijn bijgewerkt en je keert terug naar het overzicht. Klik onderaan het overzicht op Alles deselecteren om alle vinkjes te verwijderen.

Actiepagina aanmaken

We gaan nu de actiepagina toevoegen en invullen. Ga naar Pagina’s beheren > Pagina overzicht. Klik onderaan het overzicht op de blauwe knop Pagina toevoegen. In het volgende scherm vul je achter “Paginatitel” de titel van de pagina in, bijvoorbeeld “Sale” of “Voorjaarsactie”.Onder het kopje “Hoofdgedeelte” klik je op Nieuw pagina element en kies je voor Dynamische content.

Pagina maken

In het menu achter “Selecteer content type” selecteer je Toon producten met het gekozen label. Daaronder typ je de titel die je op de pagina boven de producten wilt tonen, bijvoorbeeld “Voorjaarskorting!”. Vink vervolgens het label “Aanbieding” aan en achter “Voorwaarde” selecteer je Product moet ALLE gekozen labels hebben. Achter "Shuffle" kies je Ja als je wilt dat de producten op de pagina telkens in een andere volgorde worden getoond en achter “Toon” geef je aan hoeveel producten je op de pagina wilt tonen. In principe kun je hier het beste het aantal gelabelde producten invoeren, dus bijvoorbeeld 8. Zie onderstaand voorbeeld voor alle instellingen:

Producten op de pagina plaatsen

Klik tot slot op Toepassen en Opslaan. De producten worden nu getoond op de pagina.

Pagina rechts in het categoriemenu tonen

Blijf op de pagina en ga naar het tabblad Extra opties. Kies Ja achter “Toon rechts van categoriemenu” en klik op Opslaan. Let op, als jouw categoriemenu reeds helemaal is gevuld met categorieën dan is er geen plek meer voor deze pagina. In dat geval wordt de pagina alleen in het hoofdmenu getoond.

Pagina rechts in categoriemenu tonen

Mooie banner maken voor bovenaan de pagina

We willen de pagina natuurlijk ook nog een beetje leuk aankleden. Omdat te doen gaan we een brede banner maken die we boven de producten plaatsen, zoals deze:

Ga naar Unsplash en kies een mooie afbeelding. Deze foto’s zijn rechtenvrij en kunnen dus zonder problemen worden gebruikt. Download de gewenste afbeelding. In je webshop ga je weer naar de actiepagina. Als je eruit was ga je naar Pagina’s beheren > Pagina overzicht en klik je op Bewerken bij de actiepagina.

Afbeelding bewerken

Onder “Hoofdgedeelte” klik je weer op Nieuw pagina element en dit keer kies je voor Tekst toevoegen. Klik op de knop Afbeelding invoegen /bewerken en vervolgens op de knop met het mapje en het vergrootglas (bladeren).

Afbeelding invoegen

Je gaat nu naar de file browser. Klik op Bestanden uploaden en vervolgens op Bladeren. Zoek de afbeelding op en klik deze aan en klik op Openen en vervolgens op Uploaden. De afbeelding wordt geüpload en verschijnt in de file browser. Selecteer deze afbeelding en klik rechtsonder op Afbeelding bewerken.

Afbeelding bewerken

Je belandt nu in de geïntegreerde beeldbewerkingsoftware.

De breedte van de afbeelding aanpassen

De foto is vermoedelijk veel te breed dus klik eerst op Beeld en daaronder op Afbeeldingsgrootte

Breedte aanpassen

Vul achter breedte “1120” in let erop dat het vinkje voor “Beperk verhoudingen” is ingeschakeld. De waarde achter hoogte wordt automatisch aangepast. Klik op OK.

Afbeeldingsformaat wijzigen

Afbeelding uitsnijden

De afbeelding is waarschijnlijk veel te hoog dus we willen er een gedeelte uit te snijden. Kies nu uit de instrumentjes aan de linkerzijde Selectiekader gereedschap.

Selectiekader gereedschap

 Bovenaan het scherm kun je nu achter “Beperking” kiezen voor “Fixed Size”. Achter breedte vul je “1120” in en achter hoogte “350”. Je kunt natuurlijk hiermee spelen en voor een andere hoogte kiezen.

Selectiekader instellen

Klik nu op de foto om een gedeelte van de afbeelding te selecteren. Zorg daarbij dat het gedeelte binnen de stippellijnen een mooi en aantrekkelijk beeld bevat. Zodra je tevreden bent over het beeld binnen  de stippellijn klik je weer op Beeld en daaronder op Uitsnijden. Het gedeelte van de afbeelding dat buiten de stippellijn valt wordt verwijderd.

Afbeelding uitsnijden

Tekst toevoegen

Klik nu op het instrumentje Tekst gereedschap en klik ergens op de afbeelding.

Tekstgereedschap selecteren

Typ de tekst die je wilt invoegen, kies het lettertype (leuke lettertypen vind je op Google Fonts), kies de grootte, stijl en kleur en klik op OK.

Tekst toevoegen

Door nu het instrumentje Verplaats gereedschap te kiezen kun je de tekst op de gewenste plek slepen.

Verplaats gereedschap

Als je wilt kun je natuurlijk nog een tekst toevoegen.

Afbeelding opslaan en plaatsen

Als je tevreden bent klik je op Bestand en daaronder op Bewaren.

Afbeelding opslaan

 In het scherm dat verschijnt klik je op OK. Het kan zijn dat je nu onderstaande melding krijgt. Klik op Deze pagina verlaten om naar de file browser terug te keren.

Melding

Klik nu de uitgesneden afbeelding aan en klik rechtsonder op Selecteer bestand en vervolgens op Oké. De afbeelding wordt in de tekst-editor geplaatst. Klik op Toepassen en Opslaan om de afbeelding op de site te plaatsen.

Banner bovenaan plaatsen

Het tekstblokje met de afbeelding staat nu waarschijnlijk onder de producten. Klik op het tekstblokje en sleep deze met de muisknop ingedrukt omhoog en laat de muisknop los. Het tekstblokje is nu boven de producten geplaatst. Klik op Opslaan om alles door te voeren op de pagina.

Blokje verslepen

Et voilá!

Actiepagina

Heb jij een mooie actiepagina gemaakt? We zijn erg benieuwd naar de resultaten dus deel jouw actiepagina in de reacties bij onze Facebook-post van dit artikel. Zo kun je ook meteen de pagina een beetje promoten.


< Terug naar blog

Lees ook:

Klanten geven ons een 8,9!

Beoordeling Shoppagina ster 1 Beoordeling Shoppagina ster 2 Beoordeling Shoppagina ster 3 Beoordeling Shoppagina ster 4 Beoordeling Shoppagina ster 5
Gebaseerd op 866 reviews