Ga naar hoofdinhoud

Thema instellingen

Inspire biedt tal van instellingen aan waarmee je het thema helemaal naar wens kunt inrichten. Vooral als je het thema voor het eerst instelt is het belangrijk om al deze instellingen langs te lopen. Dit bepaald voor een groot deel hoe jouw webshop eruit komt te zien. Hier vindt je informatie over het aanpassen van de algemene thema-instellingen van Inspire.

  1. Ga in de Shopify Admin naar Webshop > Thema's
  2. Klik onder 'Inspire' op de knop 'Thema aanpassen'
  3. Klik bovenin op het tandwieltje om de thema instellingen te openen.

De thema instellingen zijn opgedeeld in verschillende secties. Hieronder staan alle secties en bijbehorende instellingen uitgelegd.

Hier kun je je logo uploaden. Deze logo's worden op meerdere plekken gebruikt, waaronder de header.

  • Logo: Upload hier je logo. SVG of PNG (transparent) is aanbevolen.
  • Logo breedte: kies hoe breed (pixels) je je logo wilt weergeven in o.a. de header.
  • Favicon: Upload hier je gewenste favicon (het kleine icoontje in het tabblad van je browser).

Kleuren​

Hier kun je bepalen welke kleuren jij in je thema wilt gebruiken. Inspire werkt met "Kleurenschema's". Je bepaald op een plek welke kleuren je wilt gebruiken, waarna je deze kleurenschema's in alle pagina's en secties kunt hergebruiken. Dit voorkomt dat je in elke sectie weer apart jouw kleuren moet invullen, terwijl je wel volledige vrijheid hebt.

Kleurenschema's instellen​

Voor meer informatie over het gebruiken van kleurenschema's verwijzen we je door naar de documentatie van Shopify: https://help.shopify.com/nl/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#colors

Overige kleurinstellingen​

Er zijn een aantal kleur-instellingen die we gebruiken om op terug te vallen als een kleurenschema niet beschikbaar is, of voor specifieke meldingen. Kies hiervoor kleuren die het beste passen bij jouw merk en goed leesbaar zijn op alle soorten schermen en apparaten:

  • Lichaamskleur & Achtergrondkleur (Body & Bg color): De algemene tekst- en achtergrondkleur van de pagina.
  • Link kleur: De standaardkleur voor klikbare links.
  • Rand kleur (Border color): De standaardkleur voor scheidingslijnen en randen.
  • Statuskleuren (Danger, Warning, Success, Info): Kleuren die worden gebruikt voor specifieke meldingen zoals foutmeldingen (rood), waarschuwingen (geel/oranje), succesmeldingen (groen) en informatieve meldingen (blauw).

Typografie​

In deze sectie beheer je de lettertypen, lettergroottes en uitlijning voor je hele webshop.

  • Lettertypen (Fonts): Kies hier het lettertype voor je Koppen (Heading font) en je Reguliere tekst (Body font).
  • Lettergroottes Desktop & Mobiel: Je kunt voor elk type tekst (H1 t/m H6, Display 1 & 2, en de standaard tekst) exact instellen hoe groot deze moet zijn in pixels. Dit kun je apart instellen voor desktop schermen en mobiele schermen, zodat je webshop altijd perfect leesbaar is.
  • Spatiëring en Regelhoogte: Bepaal de ruimte tussen individuele letters (Letter spacing) en de hoogte van de regels (Line height) voor zowel koppen als platte tekst.

Layout & Styling​

Hier bepaal je de algemene vormgeving, breedtes en afrondingen van je webshop.

  • Container breedte: Bepaal de maximale breedte van de inhoud op grote schermen (instelbaar van 1100px tot 1800px).
  • Afrondingen (Border Radius): Je kunt de hoeken afronden voor verschillende elementen om de webshop een zachtere of juist strakkere uitstraling te geven:
    • Secties: Bepaal de afronding en kies of dit aan de bovenkant, onderkant of beide kanten moet gebeuren.
    • Kaarten (Cards): Bepaal de afronding voor product- en informatiekaarten.
    • Knoppen (Buttons): Maak knoppen hoekig, licht afgerond of volledig pil-vormig.
  • Kaart Schaduw: Voeg een schaduw toe aan kaarten. Kies of je deze altijd wilt tonen, nooit, of alleen wanneer je er met de muis overheen gaat (hover).
  • Entree Animaties: Schakel in of elementen met een soepele animatie in beeld moeten verschijnen zodra je naar beneden scrollt.

Specifieke instellingen voor de bovenkant van je website (de navigatiebalk).

  • Transparante header: Vink dit aan als je wilt dat de header transparant over de eerste sectie (zoals een grote hero afbeelding) valt.
  • Tekstkleur & Logo transparante header: Als de transparante header is ingeschakeld, kun je hier een afwijkende tekstkleur en een speciaal (bijv. wit) logo instellen zodat deze goed leesbaar blijft op een donkere achtergrondafbeelding.

Secties​

Beheer hier de standaard witruimte (spacing) in je webshop om te zorgen voor een rustige, overzichtelijke lay-out.

  • Ruimte op Desktop: Stel de afstand binnenin secties (padding) en de afstand tussen verschillende secties (margin) in.
  • Ruimte op Mobiel: Stel dezelfde soort afstanden specifiek in voor mobiele weergaven, aangezien je daar vaak minder witruimte wilt gebruiken.
  • Afwijkende afstanden Homepagina: Er zijn aparte instellingen om de afstanden tussen secties specifiek voor de homepagina te finetunen (zowel voor desktop als mobiel).

Productkaarten​

Hier beheer je de weergave van producten in overzichten (zoals collectiepagina's en product sliders).

Vormgeving & Inhoud​

  • Kleurenschema & Rand: Kies welk kleurenschema standaard voor productkaarten geldt en of deze een rand (border) moeten hebben.
  • Tekstuitlijning: Lijn de tekst in de kaart links, in het midden of rechts uit.
  • Informatie tonen: Vink aan of je het merk/verkoper (vendor), de titel, de prijs en de valuta-aanduiding wilt weergeven.

Knoppen & Acties​

  • Knop Type: Kies wat de hoofdknop op de productkaart doet: Geen knop tonen, 'Bekijk product' of direct 'In winkelwagen' plaatsen. Je kunt ook het label en een optioneel icoon voor de bekijk-knop instellen.
  • Aantallen & Varianten: Bepaal of klanten direct een aantal (number input) kunnen kiezen. Ook kun je instellen of en hoe productvarianten (zoals kleur of maat) direct op de kaart getoond of gefilterd moeten worden (altijd, nooit, of alleen op mobiel).

Afbeeldingen & Weergave​

  • Afbeelding Verhouding (Ratio): Kies het formaat van de productafbeeldingen (bijv. 1:1 vierkant, 3:4 portret, 16:9 landschap).
  • Afbeelding Pasvorm (Fit): Kies of de afbeelding moet worden bijgesneden (crop) of volledig moet passen met eventuele witruimte (pad).
  • Hover Effecten: Schakel in of de afbeelding moet inzoomen bij hover, of er een alternatieve afbeelding getoond moet worden (hover effect), en of de winkelwagen-knop pas bij hover zichtbaar wordt.

Typografie op de kaart​

  • Bepaal exact de lettergrootte (H1 t/m H6 of body) en letterdikte (normaal of dikgedrukt) voor zowel de producttitel als de prijs.
  • Titel weergave: Kies of de titel op één lijn of twee lijnen wordt geforceerd, en of lange titels moeten worden afgekapt (truncate) of volledig getoond.

Badges (Labels)​

  • Vormgeving: Kies of de labels rechte of ronde hoeken moeten hebben.
  • 'Nieuw' Badge: Schakel in om producten die recent zijn toegevoegd automatisch een label te geven. Stel het aantal dagen in dat een product als 'nieuw' wordt gezien en pas de kleuren, tekst en iconen aan.
  • 'Sale' Badge: Schakel in voor afgeprijsde artikelen. Kies of je tekst (bijv. "Aanbieding") of een percentage (bijv. "-20%") wilt tonen.
  • Custom Badge: Stel aangepaste labels in via Shopify Metafields en bepaal de kleuren en het icoon.

Collectie- & Merkkaarten​

Instellingen voor de weergave van collecties of merken in grid-overzichten.

  • Weergave: Kies of de naam van de collectie en een rand rondom de kaart getoond moet worden.
  • Afbeeldingen: Net als bij productkaarten kun je hier de verhouding (1:1, 3:4, etc.) en de pasvorm (crop/pad) instellen.
  • Hover: Schakel het inzoom-effect in wanneer een bezoeker met de muis over de collectiekaart gaat.

Hero Kaarten​

Specifieke kaarten die vaak bovenaan pagina's of als grote uitgelichte blokken worden gebruikt.

  • Titel uitlijning: Bepaal waar de titel in de hero kaart staat (bijvoorbeeld strak onderaan uitgelijnd via 'flex-end' of verdeeld via 'space-between').
  • Vormgeving: Kies of deze kaarten een rand (border) moeten hebben en of de afbeelding moet inzoomen bij hover.

Artikelkaarten​

Instellingen voor de weergave van blogartikelen in overzichten.

  • Titel & Tekst: Bepaal of de blogtitel moet worden afgekapt na 2 regels of volledig getoond mag worden. Kies ook of er een korte samenvatting (excerpt) van het artikel op de kaart getoond moet worden.
  • Afbeeldingen: Kies de verhouding van de blogafbeeldingen (standaard 4:3) en of deze bijgesneden (crop) of passend (pad) gemaakt moeten worden.

Social Media​

Voeg hier de links (URL's) toe naar jouw social media profielen. Als je een link invult, zal het bijbehorende icoontje automatisch verschijnen op de plekken in het thema waar social media iconen worden getoond (zoals in de footer).

Ondersteunde platformen:

  • X (voorheen Twitter)
  • Facebook
  • Pinterest
  • Instagram
  • TikTok
  • Snapchat
  • YouTube
  • LinkedIn