Components
Componenten die worden gebruikt op een rijtje geplaatst! 📋
Accordion component
Het accordion component is grotendeels overgenomen van het accordion component van theme Horizon. Op het moment dat de accordion de tekst 'kenmerken' of 'Kenmerken' bevat, worden er icoontjes toegevoegd achter de titel binnen de accordion.
Omschrijving
Ons doel is dat elke klant volledig tevreden is met zijn aankoop. Als dit niet het geval is, laat het ons dan weten. We doen ons best om samen met jou tot een goede oplossing te komen.
Ingredienten
We zullen je bestelling zo snel mogelijk verzenden. Zodra je bestelling is verzonden, ontvang je een e-mail met meer informatie. De levertijden zijn afhankelijk van je locatie.
Voedingswaarden
Onze producten worden zowel lokaal als wereldwijd geproduceerd. We selecteren onze productiepartners zorgvuldig om ervoor te zorgen dat onze producten van hoge kwaliteit zijn en een eerlijke prijs hebben.
Kenmerken
Onze producten worden zowel lokaal als wereldwijd geproduceerd. We selecteren onze productiepartners zorgvuldig om ervoor te zorgen dat onze producten van hoge kwaliteit zijn en een eerlijke prijs hebben.
Button component
Via een button-block kun je een knop aan de sectie toevoegen en deze naar wens instellen.
Beschikbare instellingen per button
- Label & Link: pas de tekst en de link van de button aan. Optioneel kun je de link in een nieuw tabblad openen.
- Style: kies één van de vijf beschikbare stijlen: Primary, Secondary, Ghost, Icon of Link.
- Formaat: Met "Make button small" activeer je de kleine variant van de button. De padding wordt daarbij proportioneel verkleind met een ratio van 1,5.
- Kleuren: via "Overwrite button colors" overschrijf je de standaardkleuren uit het color scheme en stel je eigen kleuren in per button.
- Icoon: schakel "Add icon" in om een icoon toe te voegen. Dit toont twee extra velden: de icoon-naam (op basis van Google Material Icons) en de positie van het icoon binnen de button.
- Breedte: stel de breedte apart in voor desktop en mobiel. Standaard staat deze op "fit", maar kan worden aangepast.
Theme Settings
Binnen de instellingen van elk color scheme zijn extra opties toegevoegd voor de Ghost- en Icon-buttonvarianten. Daarnaast zijn er ook aparte instellingen voor deze twee varianten beschikbaar onder de algemene Buttons-instellingen.
Badge component
Door de snippet 'badge.liquid' in te laden kan er een badge worden toegevoegd.
Aanpassingen voor de badges zijn zo veel mogelijk gebaseerd op de standaard Badges thema instellingen. Onder Theme Settings -> Badges zijn de volgende instellingen beschikbaar:
- Corner radius: bepaalt de radius van de badges
- Paddings: hieronder kunnen de padding-inline en padding-block los van elkaar worden ingesteld
- Typography: onder deze instelling kan worden ingesteld welk type font moet worden gebruikt en of deze in uppercase moet worden weergegeven of niet
- Standard badge colors:stel de kleuren in van de standaard badges
- Disabled badge colors: stel de kleuren in van de uitverkochte/disabled badges
- Highlight badge colors: stel de kleuren in van de highlighted badges
Aan het component kunnen de volgende props worden meegegeven:
- Text
- Color
- Background color
Price component
Onder de Theme settings zijn onder Prices nieuwe instellingen toegevoegd die die optie geven om het valuta symbool wel of niet te tonen.
Verder zijn er aan het block Price nog extra instellingen toegevoegd:
- Reviews information: toont de reviews op desktop
- Display: bepaalt of de prijs verticaal of horizontaal wordt getoond
- Main price color: bepaalt de kleur van de main price
- Preset: bepaalt de font-size van de main price
Productcard
Onder de Product card instellingen kunnen verschillende instellingen worden aangepast.
- Vertical gap: bepaalt de verticale ruimte tussen de elementen in de product card
- Inherit color scheme: bepaalt of de card het kleurschema erft.
- Badge position: lijnt de badges uit, links of rechts
- Style: bepaalt of de product card een border bevat
- Corner radius: bepaalt het aantal pixels voor de border radius
- Padding (top, bottom, left and right): stel de padding in
Aan de product card kan ook een Floating group block worden toegevoegd. Dit block bevat ook een aantal instellingen:
- Alignment & Position: positie van het element binnen het block
- Padding (top, bottom, left and right): stel de padding in
- Show group only on hover: toont het block alleen bij hover
Populair op dit moment
Een selectie van de meest gezochte producten
Populair op dit moment
Een selectie van de meest gezochte producten
Populair op dit moment
Een selectie van de meest gezochte producten
