Components
Components used, listed in order! 📋
Accordion component
The accordion component is largely based on the accordion component from the Horizon theme. When the accordion contains the text 'kenmerken' or 'Kenmerken', icons are added after the title within the accordion.
Description
Our goal is for every customer to be completely satisfied with their purchase. If this is not the case, please let us know. We will do our best to reach a suitable solution with you.
Ingredients
We will ship your order as soon as possible. Once your order has been shipped, you will receive an email with more information. Delivery times depend on your location.
Nutritional values
Our products are manufactured both locally and globally. We carefully select our production partners to ensure our products are of high quality and fairly priced.
Features
Our products are manufactured both locally and globally. We carefully select our production partners to ensure our products are of high quality and fairly priced.
Button component
You can add a button to the section using a button block and customize it as desired.
Available button settings
- Label & Link: customize the button's text and link. Optionally, you can open the link in a new tab.
- Style: choose one of the five available styles: Primary, Secondary, Ghost, Icon, or Link.
- Size: enable "Make button small" to use the small button variant. The padding is proportionally reduced by a ratio of 1.5.
- Colors: use "Overwrite button colors" to override the default colors from the color scheme and set your own colors for each button.
- Icon: enable "Add icon" to add an icon. This displays two additional fields: the icon name (based on Google Material Icons) and the icon's position within the button.
- Width: set the width separately for desktop and mobile. By default, this is set to "fit", but it can be customized.
Theme Settings
Additional options for the Ghost and Icon button variants have been added to the settings of each color scheme. In addition, separate settings for these two variants are also available under the general Buttons settings.
Badge component
By loading the 'badge.liquid' snippet, a badge can be added.
The badge customizations are based as much as possible on the standard Badges theme settings. Under Theme Settings -> Badges, the following settings are available:
- Corner radius: determines the radius of the badges
- Paddings: inline and block padding can be set separately below
- Typography: under this setting, you can specify which font type to use and whether it should be displayed in uppercase or not
- Standard badge colors: set the colors of the standard badges
- Disabled badge colors: set the colors of the sold out/disabled badges
- Highlight badge colors: set the colors of the highlighted badges
The following props can be passed to the component:
- Text
- Color
- Background color
Price component
Under Theme settings, new settings have been added under Prices that give you the option to show or hide the currency symbol.
In addition, extra settings have been added to the Price block:
- Reviews information: shows reviews on desktop
- Display: determines whether the price is displayed vertically or horizontally
- Main price color: determines the color of the main price
- Preset: determines the font size of the main price
Product card
Various settings can be adjusted under the Product card settings.
- Vertical gap: determines the vertical space between the elements in the product card
- Inherit color scheme: determines whether the card inherits the color scheme.
- Badge position: aligns the badges to the left or right
- Style: determines whether the product card contains a border
- Corner radius: determines the number of pixels for the border radius
- Padding (top, bottom, left and right): set the padding
A Floating group block can also be added to the product card. This block also contains several settings:
- Alignment & Position: position of the element within the block
- Padding (top, bottom, left and right): set the padding
- Show group only on hover: shows the block only on hover
Popular right now
A selection of the most sought-after products
Popular right now
A selection of the most searched products
Popular right now
A selection of the most searched products
