20% DISCOUNT ON ALL SUMMER ARTICLES

Thema documentatie

 

 

 

dresser-header.png

Over Dresser

Dresser is een responsive thema, specifiek ontworpen voor kleding- en mode accessoire webshops. Dit moderne thema volgt minimalistische design trends, biedt verschillende unieke kenmerken die de ervaring van klanten kunnen verbeteren en kan helpen met het creëren van een brand community met features zoals "Shop the look" en de Instagram feed integratie. Hierdoor kan er meer worden gefocussed op klanten en het verhogen van conversie door de unieke klanten ervaring in de webshop.

Instellingen aanpassen

Instellingen kunnen worden aangepast in het "Design" gedeelte in de backoffice (dit gedeelte kan gevonden worden in de sidebar aan de linkerkant van het scherm) via de knop "Thema aanpassen" in het midden van het scherm. Deze pagina geeft een overzicht van iedere beschikbare thema instelling, deze instellingen zijn bepalend voor het uiterlijk van de webshop en kunnen naar wens worden aangepast.

 

Logo-favicon.png

Logo: Dit is het logo van de webshop, deze wordt weergegeven in de linkerbovenhoek op iedere pagina van de webshop. Aanbevolen dimensies: 230px x 60px (breedte x hoogte) met 400px x 300px (breedte x hoogte) als maximale dimensies.

Favicon: Dit is het kleine logo dat wordt weergegeven in de tabs van de internet browser. Aanbevolen dimensies: 16px x 16px.

Retina logo: Activeer deze instelling om een retina versie van het logo te gebruiken.

Retina logo: Upload een retina versie van het logo.

 

 

02. Kleur instellingen

dresser-doc-colors.png

Navigation bar background color: Verander de achtergrond kleur van de navigatie bar.

Navigation bar text color: Kies hier een kleur voor de tekst in de navigatie bar

Footer bar background color: Kies hier een achtergrond kleur voor de footer bar.

Footer bar text color: Kies hier een kleur voor de tekst in de footer bar.

Category title box background color: Kies hier een achtergrond kleur voor de achtergrond van de categorie titel box in de categorie pagina.

Category title box text color: Kies hier een kleur voor de tekst in categorie titel box van de categorie pagina

Text color: Kies hier de tekstkleur van de webshop.

Buttons: Kies hier een kleur voor de tekst in de buttons.

Buttons: Kies hier een achtergrond kleur voor de buttons.

dresser-doc-footer-colors.png

 

 

03. images

Scale category & brand images to fit: Activeer hier het automatisch aanpassen van de grootte van categorie & brand afbeeldingen.

Scale NEW products images to fit: Activeer hier het automatisch aanpassen van de grootte van NIEUWE product afbeeldingen.

Scale products to fit: Activeer het automatisch aanpassen van producten zodat ze passen.

Scale product image on the product page so it fits: Activeer het automatisch aanpassen van product afbeeldingen op de product pagina hier.

 

03. achtergrond

Background image: Upload een achtergrond afbeelding voor de webshop.

Background position: Uploaded achtergrond positie.

Background repeat: De manier waarop de achtergrond wordt herhaald.

Background color: Aanpassen van de container body content achtergrond kleur.

04. Unique selling points

usp-eng.png

Het Dresser thema geeft de mogelijkheid om 'Unique Selling Points' weer te geven in de online winkel, het gebruik van de juiste woorden kan helpen om klanten over te halen om (nog) iets te kopen en conversie te verhogen. Er kunnen maximaal 6 USP's worden toegevoegd. Wanneer er meerdere talen zijn geïnstalleerd zal voor elke USP een aparte vertaling moeten worden toegevoegd ("Content > Translations > Add Custom Translation"). De USP's kunnen worden vertaald door, per USP, de USP tekst als vertaal sleutel te gebruiken. Meer informatie over vertalingen kan worden gevonden in onze help center.

 

Activate: Gebruik deze instelling om de Unique Selling Points te activeren of te deactiveren.

Unique Selling Points 1: Voeg hier tekst toe voor de Unique Selling Point.

Unique Selling Point 2:Voeg hier tekst toe voor de Unique Selling Point.

Unique Selling Point 3:Voeg hier tekst toe voor de Unique Selling Point.

Unique Selling Point 4:Voeg hier tekst toe voor de Unique Selling Point.

Unique Selling Point 5:Voeg hier tekst toe voor de Unique Selling Point.

Unique Selling Point 6:Voeg hier tekst toe voor de Unique Selling Point.

Color Text: Kies hier een kleur voor tekst van de USP's.

 

 

05. topbar

topbar-eng.png

De topbar kan gebruikt worden om bijvoorbeeld een aanbieding, aankondiging van een nieuwe collectie of ieder ander bericht uit te lichten.

Als meerdere talen zijn geïnstalleerd, zal deze tekst vertaald moeten worden, vergelijkbaar zoals dit voor USP's gedaan moet worden. Meer informatie over vertalingen kan gevonden worden in onze help center.

Activate: Hier kan de topbar geactiveerd of gedeactiveerd worden. In de topbar kunnen klanten bewust gemaakt worden of worden geïnformeerd over bijvoorbeeld een sale of actie. Zie 'themes' voor voorbeelden.

Text in the offer top bar: Voeg hier tekst toe aan de top bar.

Background color: Kies hier een achtergrond kleur van de top bar.

Text color: Kies hier een kleur voor de tekst.

 

06. google lettertypes

Google webfonts: Kies het lettertype van de webshop.

 

 

 

mceclip1__1_.png

07. Grote banners

Activate: Activeer of deactiveer de grote banners onder de headlines.

 

07. Grote banners - linker banner

URL of the banner: Voeg de URL van de pagina toe, waar de banner naar moet linken.

Banner image: Voeg een afbeelding toe voor deze banner.

Activate: Activeer of deactiveer de tekst in de banner.

Text color: Kies hier een kleur voor de tekst in de banner.

Background color text: Kies een achtergrond kleur voor de tekst in de banner.

 

07. Grote banners - rechter banner

URL of the banner: Voeg de URL van de pagina toe, waar de banner naar moet linken.

Banner image: Voeg een afbeelding toe voor deze banner.

Activate: Activeer of deactiveer de tekst in de banner.

Text color: Kies hier een kleur voor de tekst in de banner.

Background color text: Kies een achtergrond kleur voor de tekst in de banner.

 

 

08. Kleine banners

Activate: Activeer of deactiveer de kleine banners onder de headlines.

 

08. Kleine banners - 1. eerste banner

URL of the banner: Voeg de URL van de pagina toe, waar de banner naar moet linken.

Banner image: Voeg een afbeelding toe voor deze banner.

Activate: Activeer of deactiveer de tekst in de banner.

Text color: Kies hier een kleur voor de tekst in de banner.

 

08. Kleine banners - 2. second banner

URL of the banner: Voeg de URL van de pagina toe, waar de banner naar moet linken.

Banner image: Voeg een afbeelding toe voor deze banner.

Activate: Activeer of deactiveer de tekst in de banner.

Text color: Kies hier een kleur voor de tekst in de banner.

 

08. Kleine banners - 3. third banner

URL of the banner: Voeg de URL van de pagina toe, waar de banner naar moet linken.

Banner image: Voeg een afbeelding toe voor deze banner.

Activate: Activeer of deactiveer de tekst in de banner.

Text color: Kies hier een kleur voor de tekst in de banner.

 

08. Kleine banners - 4. fourth banner

URL of the banner: Voeg de URL van de pagina toe, waar de banner naar moet linken.

Banner image: Voeg een afbeelding toe voor deze banner.

Activate: Activeer of deactiveer de tekst in de banner.

Text color: Kies hier een kleur voor de tekst in de banner.

 

 

09. Shop the look

mceclip2.png

Shop the look: Activeer "shop the look" op de homepage.

Link to more looks: Voeg de link naar de categorie pagina met meer looks toe.

"Shop the look" is een feature gericht op het verbeteren van de winkel ervaring en het mogelijk maakt voor klanten om een bepaalde look te kopen. "Shop the look" maakt gebruik van de featured product functionaliteiten van de webshop, deze kunnen dus niet tegelijkertijd gebruikt worden. Zet "Shop the look" uit om de featured producten functionaliteit te gebruiken.

 

Om deze functie correct op te zetten, volg de volgende stappen:

Step 1: Activeer template data:

  1. In de backoffice, navigeer naar "Instellingen > Workflow" en activeer de optie: 'Extra template Data'.
  2. Sla dit op door op 'Save' te klikken in de rechterbovenhoek.

Step 2: Creëer een product:

  1. In de backoffice, navigeer naar 'Producten' en klik on 'product toevoegen' in de rechterbovenhoek.
  2. Voeg een titel toe voor de look, laat alle andere velden leeg en klik op 'Save'.
  3. Voeg een beschrijving toe voor de look.
  4. Scroll naar beneden tot 'Extra template data'. Voeg het keyword: 'look' toe aan het lege veld naast 'data 01'.
    Vanaf nu, zal het product worden gezien als een 'Shop the look' product in plaats van een normaal product.

Belangrijk: 'look' mag geen hoofdletters of spaties bevatten.

Step 3: Voeg producten toe aan de look:

  1. Scroll naar 'Related products', binnen de pagina waar net de product zijn gewijzigd.
  2. Voeg items toe die bij deze look passen door op 'Product toevoegen' en sla de wijzigingen op.

Step 4: Laat de looks zien op de homepage

  1. Navigeer naar "Content > Featured products" in your backoffice.
  2. Verwijder alle featured products op deze pagina door ze te selecteren en op 'Delete' te klikken aan de bovenkant van de tabel.
  3. Voeg de look toe die net is gemaakt door op 'Product toevoegen' te klikken in de rechterbovenhoek.
  4. Bekijk het resultaat op de homepage.

Producten niet zichtbaar?: Zorg ervoor dat "Shop the look" is geactiveerd! Navigeer naar Design > Theme editor > Customise theme en scroll naar beneden tot "SHOP THE LOOK", activeer deze als dit nog niet was gedaan. En sla de wijzigingen op.

Extra: Als een categorie pagina is gemaakt met meerdere looks, kan de link naar die pagina in het tekst gedeelte worden toegevoegd.

 

 

10. banner naast shop the look

Banner: Activeer de banner hier.

Banner link: Voeg de URL van de pagina hier toe.

Banner image: Upload een afbeelding voor deze banner.

 

 

11. Instagram feed

mceclip3.png

De Instagram feed functionaliteit geeft de mogelijkheid om klanten te inspireren met afbeeldingen van een eigen Instagram feed.

Showcase afbeeldingen van een eigen feed (Instagram feed / Option 1)

  1. Activeer de functionaliteit
  2. Er zijn twee ID's nodig: het 'Client ID' en een 'Access Token'.
    Gebruik deze link en volg de stappen om deze ID's te vinden.
  3. Vul het 'client ID' in bij stap '11. INSTAGRAM FEED' in het veld naast 'Instagram client ID'. Het client ID is een meestal een combinatie van ongeveer 30 letters en cijfer.
  4. Activeer '11. Instagram feed - option 1: Instagram profile images' en vul de 'Access Token' in het veld naast 'Access token'.
  5. Kopieer de tekens van het begin van de 'Acces token' tot de . in de 'Access token' (meestal rond de 10 tekens) en plak deze in het veld naast 'User ID'.
  6. Ten slotte, selecteer de manier waarop de feed moet worden weergegeven via de drop-down naast 'Sort by'.

Filter met een specifieke hashtag (Instagram feed / Optie 2)

Optioneel kan ook een gefiltered worden in de eigen feed door middel van een specifieke tag. Dit kan gedaan worden met de onderstaande stappen:

  1. Activeer de instelling 'Tagged'.
  2. Voeg de naam van de tag, waarop gefiltered moet worden, in het veld naast 'Tagname'

 

Activate: Activeer of deactiveer de Instagram feed hier.

Sort by: DESCRIPTION_MISSING

Instagram client ID: Lees de gebruikershandleiding om de Instagram clientId te vinden.

 

11. Instagram feed - optie 1: Instagram profiel afbeeldingen

Profile: Laat afbeeldingen zien van het eigen profiel.

Access token: Vul ALLEEN de access token in als de afbeeldingen wilt laten zien van het profiel, en niet afbeeldingen via een hashtag.

User ID: Als is gekozen om afbeeldingen te laten zien van het eigen profiel, vul dan hier de user ID in. In de gebruikershandleiding teruggelezen worden hoe het UserID is te vinden.

 

11. Instagram feed - optie 2: Instagram tagged afbeeldingen

Tagged: Laat alleen afbeeldingen zien van de eigen feed met een specifieke tag.

Tagname: Fill in the tag that you want to filter on.

 

 

Facebook: Voeg de Facebook URL toe om het Facebook icoon in de footer te weergeven.

Twitter: Voeg de Twitter URL toe om het Twitter icoon in de footer te weergeven.

Google+: Voeg de Google+ URL toe om het Google+ icoon in de footer te weergeven.

Pinterest: Voeg de Pinterest URL toe om het Pinterest icoon in de footer te weergeven.

Youtube: Voeg de Youtube URL toe om het Youtube icoon in de footer te weergeven.

Tumblr: Voeg de Tumblr URL toe om het Tumblr icoon in de footer te weergeven.

Instagram: Url van de Instagram Profiel.

 

 

Blog and Social Media feed updates: Activate de blog en social media feed updates in de footer hier.

 

Facebook feed: Activeer de Facebook feed widget hier.

Facebook page name: Voeg de naam van de Facebook pagina toe.

Pinterest feed: Activeer de Pinterest feed widget hier.

Pinterest profile name: Voeg de naam van de Pinterest profiel naam toe.

 

Show the company name: Zet deze instelling aan om de naam van het bedrijf te weergeven in de footer.

Show description: Zet deze instelling aan om een kleine omschrijving van het bedrijf weer te geven in de footer.

Company name: Voeg de bedrijfsnaam toe.

Description: Voeg een korte beschrijving toe.

Show phone number: Zet deze instelling aan om een telefoon nummer te weergeven in de footer.

Phone number: Voeg een telefoon nummer toe.

Show email:Zet deze instelling aan om een e-mailadres te weergeven in de footer.

Email: Voeg een e-mailadres toe.

 

Blog banner image: Upload een afbeelding voor deze banner.

 

 

14. functies

Show featured products on the homepage: Standaard zal dit thema de featured products weergeven als "Shop the look" uit staat. Zet deze functie uit om de featured products op de homepagina te verbergen.

Show featured categories on the homepage: Zet deze functie uit om op de homepagina de featured categories te verbergen.

Brands: Door dit te activeren, zullen merken worden weergeven in de navigatie.

Reviews: Geef reviews weer.

Newsletter: Geef de nieuwsletter weer in de footer.

Tags homepage: Geef de tags weer op de homepagina.

Kiyoh: Vul de Shop id in om de widget te activeren (gebruik vertalingen voor meertalig).

Feedbackcompany ID: Vul de Shop id in om de widget te activeren(gebruik vertalingen voor meertalig).

Display brand name next to product name: Indien geactiveerd, laat brand name zien naast de product naam in de catalogus en de homepagina.

 

Product opties

Show discount: Laat zien hoeveel procent korting de producten in de collectie pagina hebben.

Show sold out: Laat 'Sold out' berichten zien op de producten in de collectie pagina (werkt alleen in de standaard variant).

 

Afbeelding dimensies cheatsheet

dimensions.png

 

← Keer terug naar de backoffice    Deze winkel is in aanbouw. Eventueel geplaatste orders zullen niet worden gehonoreerd of verwerkt. Verbergen