Thema-instellingen
Thema-instellingen zijn algemene instellingen. Ze gelden voor elke pagina van je winkel. Op deze pagina lees je wat elke groep in Thema-instellingen doet, in de volgorde waarin je ze in de thema-editor ziet.
Zo open je de thema-instellingen:
- Ga naar Onlinewinkel → Thema's.
- Selecteer op de themakaart van Tenora Aanpassen.
- Selecteer in de thema-editor Thema-instellingen (het tandwielpictogram).
De aanbevolen waarden hieronder zijn de standaardwaarden van de preset Tenora, tenzij de tekst iets anders zegt.
Logo en favicon
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Logo | De logoafbeelding in de koptekst en op de wachtwoordpagina. Zonder logo toont de koptekst je winkelnaam als tekst. | Een transparante .png of .svg |
| Breedte logo | De breedte van het logo, van 40 tot 300px. | 120px |
| Favicon-afbeelding | Het kleine pictogram in het browsertabblad. | Een .png van 32 x 32px |
Tips
- Het logo is in de koptekst nooit hoger dan 56px. Een hoog logo blijft compact, dus een breed logo ziet er meestal het best uit.
- Het logo gebruikt de alt-tekst van de afbeelding. Heeft de afbeelding geen alt-tekst, dan wordt de winkelnaam gebruikt. Voeg alt-tekst aan het logo toe via Content → Bestanden (Files).
- Winkelnamen zonder logo die langer zijn dan 18 tekens worden in een kleinere tekstgrootte getoond. Bij een lange winkelnaam raden we aan een logo te uploaden.
- Wil je een lichte versie van je logo over de afbeeldingsbanner? Gebruik dan de instelling Logo transparante koptekst in de sectie Koptekst.
Kleuren
Kleurschema's
Een kleurschema is een set kleuren die je op een sectie toepast. Tenora heeft 5 kleurschema's. De meeste secties hebben een instelling Kleurschema, zodat je voor elke sectie een ander schema kunt kiezen.
Elk kleurschema bevat deze kleuren:
| Kleur | Waar deze wordt gebruikt |
|---|---|
| Achtergrond | De achtergrond van de sectie |
| Tekst | Koppen, hoofdtekst en pictogrammen |
| Accent | Links, actieve statussen en de details van de maatlijnen |
| Knopachtergrond | De achtergrond van gevulde knoppen |
| Knoplabel | De tekst op gevulde knoppen |
| Label knop met omlijning | De tekst en rand van knoppen met omlijning |
Een kleurschema bewerken:
- Ga naar Thema-instellingen → Kleuren.
- Selecteer het kleurschema dat je wilt wijzigen.
- Wijzig de kleuren. Het voorbeeld wordt direct bijgewerkt.
- Selecteer Opslaan.
Aanbevelingen
- Houd een contrastverhouding van minimaal 4,5:1 aan tussen Tekst en Achtergrond, en tussen Knoplabel en Knopachtergrond. Alle kleurparen in de drie presets voldoen aan dit niveau (WCAG AA).
- Gebruik één licht schema voor de meeste pagina's en één donker schema voor de voettekst, zoals in de presets.
- Fout- en succesmeldingen gebruiken de tekstkleur van het schema met een gekleurd pictogram. Zo blijven ze in elk schema leesbaar.
Oppervlakken
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Korreltextuur weergeven | Voegt een subtiele papierachtige textuur toe aan achtergronden. | Aan voor lichte, natuurlijke stijlen (Tenora, Terrace). Uit voor donkere stijlen (Lantern). |
Typografie
Koppen
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Lettertype | Het lettertype voor koppen. Kies uit de lettertypebibliotheek van Shopify. | Cormorant (Tenora), Fraunces (Terrace), Bodoni Moda (Lantern) |
| Schaal kopgrootte | Bepaalt hoeveel groter elk kopniveau is dan de hoofdtekst. Opties: Compact, Gebalanceerd, Expressief. | Gebalanceerd |
| Hoofdlettergebruik | Standaard laat je tekst zoals je die hebt getypt. Hoofdletters toont koppen in hoofdletters. | Standaard |
Hoofdtekst
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Lettertype | Het lettertype voor hoofdtekst, knoppen en labels. | Instrument Sans (Tenora), Work Sans (Terrace), Manrope (Lantern) |
| Lettergrootte | De basisgrootte van de tekst, van 14 tot 20px. | 16px |
Tip: kies lettertypen die de tekens van al je winkeltalen bevatten. Niet elk lettertype ondersteunt elk alfabet. Ontbreekt er een teken, dan toont de browser daarvoor een vervangend lettertype.
Opmaak
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Paginabreedte | De maximale breedte van de content. Opties: Smal (1200px), Standaard (1440px), Breed (1680px). | Standaard |
| Paginamarge | De ruimte links en rechts van de pagina, van 16 tot 80px. Wordt automatisch kleiner op kleine schermen. | 48px |
| Sectieruimte | Schaalt de opvulling boven en onder van elke sectie. Opties: Compact, Standaard, Ruim. | Standaard |
| Tussenruimte raster | De ruimte tussen items in rasters, zoals productkaarten, van 8 tot 48px. | 24px |
Knoppen
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Hoekradius | Rondt de hoeken van knoppen af, van 0 tot 40px. Met 0 krijg je vierkante hoeken. | 0px (Tenora, Lantern), 24px (Terrace) |
| Randdikte | De randbreedte van knoppen met omlijning, van 1 tot 3px. | 1px |
| Hoofdlettergebruik | Knoplabels in Standaard of Hoofdletters. | Hoofdletters (Tenora, Lantern), Standaard (Terrace) |
Merkbetaalknoppen, zoals Shop Pay, houden hun eigen kleuren en stijl. Het thema verandert ze niet.
Invoervelden
Deze instellingen gelden voor formuliervelden, zoals de hoeveelheidskiezer, het veld voor de aanmelding voor e-mail, de velden van "Past het?" en de velden van het contactformulier.
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Hoekradius | Rondt de hoeken van velden af, van 0 tot 24px. | Stem af op je knopstijl: 0px bij vierkante knoppen, ongeveer 8px bij afgeronde knoppen |
| Randdikte | De randbreedte van velden, van 1 tot 3px. | 1px |
Product- en collectiekaarten
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Stijl | Het uiterlijk van productkaarten. Standaard toont alleen de afbeelding en tekst. Met kader plaatst de kaart op een licht oppervlak met opvulling. Staal voegt een tabje met een materiaalstaal toe aan de kaartafbeelding. | Staal (Tenora), Standaard (Terrace), Met kader (Lantern) |
| Beeldverhouding | De vorm van kaartafbeeldingen. Opties: Aanpassen aan afbeelding, Staand, Vierkant, Liggend. | Staand voor meubelfoto's, Vierkant voor verlichting en kleine items |
| Hoekradius | Rondt de hoeken van kaarten af, van 0 tot 24px. | 0px, of 8px bij afgeronde knoppen |
Tip: met Aanpassen aan afbeelding krijgt elke kaart de vorm van de eigen productafbeelding. Gebruik dit alleen als al je productafbeeldingen dezelfde vorm hebben. Anders ziet het raster er onrustig uit.
Valutanotatie
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Valutacodes weergeven | Toont prijzen met de valutacode, bijvoorbeeld "$12.00 USD" in plaats van "$12.00", op productpagina's, productkaarten, de winkelwagen en de winkelwagenlade. | Aan als je in meerdere valuta met hetzelfde symbool verkoopt, zoals USD, CAD en AUD. Anders uit. |
Het geschatte totaal in de winkelwagen toont altijd de valutacode. Meer informatie vind je in Wereldwijd verkopen.
Winkelwagen
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Type winkelwagen | Lade opent de winkelwagen als zijpaneel wanneer een klant een product toevoegt of het winkelwagenpictogram selecteert. Pagina stuurt de klant naar de winkelwagenpagina. | Lade |
| Opmerking bij bestelling weergeven | Toont een veld "Opmerking bij bestelling toevoegen" in de winkelwagenlade en op de winkelwagenpagina. Klanten kunnen het gebruiken voor bezorginstructies. | Aan |
De winkelwagenlade heeft eigen instellingen. Open de thema-editor, selecteer de sectie Winkelwagenlade en wijzig Kleurschema of Dynamische checkout-knoppen weergeven.
Zoeken
| Instelling | Wat het doet | Aanbevolen waarde |
|---|---|---|
| Voorspellend zoeken inschakelen | Toont producten, suggesties, collecties, pagina's en artikelen terwijl de klant in het zoekpaneel typt. Staat dit uit, dan werkt het zoekpaneel nog steeds en opent het de pagina met zoekresultaten. | Aan |
| Productprijs weergeven | Toont de prijs naast producten bij voorspellend zoeken. Deze instelling is alleen zichtbaar als voorspellend zoeken aanstaat. | Aan |
Social media
Vul het volledige adres van elk social media-account in, bijvoorbeeld https://www.instagram.com/yourstore. Laat een veld leeg om dat pictogram te verbergen.
De beschikbare accounts zijn: Facebook, Instagram, Pinterest, TikTok, X (Twitter), YouTube, Vimeo, Tumblr en Snapchat.
De pictogrammen verschijnen:
- in het blok Social media-pictogrammen van de sectie Voettekst
- in de menulade op telefoons en tablets
Als er geen account is ingevuld, worden er geen pictogrammen getoond.