Key Feature is a section designed to highlight the main benefits or important statistics of your brand or products. You can use it to showcase key numbers, features, or services in a clear and visually engaging way.
Click the section name to see the section settings on the right-hand sidebar.
Customize the overall appearance and behavior of the section.
Reveal on scroll: Enable animation when the section becomes visible while scrolling.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Layout style: Choose how the feature boxes are displayed. Available styles include Standard and Layered.
Desktop shrink on scroll: Enable the shrink-on-scroll effect on desktop devices.
Use these settings to control how feature boxes are displayed on mobile devices.
Carousel on mobile: Display feature boxes as a swipeable carousel on mobile.
Number of columns on mobile: Choose between 1 column or 2 columns when displaying feature boxes on mobile.
Show button: Enable or disable the call-to-action button displayed below the feature boxes.
Add optional images to complement the feature content.
Image: Select an image for desktop.
Mobile image: Select a separate image optimized for mobile devices.
Space between image and info: Adjust the spacing between the image and the section content.
Use the Feature box settings to customize the general appearance of feature cards in the section.
Use these settings to adjust the spacing around the section and maintain a balanced layout across different screen sizes.
Available options:
Top padding
Bottom padding
Mobile top padding
Mobile bottom padding
The Section header container allows you to add introductory content above the feature boxes.
Custom width: Enable this option to set a custom maximum width for the section header.
Maximum width: Adjust the maximum width of the header content when Custom width is enabled.
Click Add block under Section header to add content.
The available child blocks include:
Heading: Add the main heading of the section. You can customize the heading size, heading tag, and uppercase style.
Text: Add supporting text or a short description below the heading.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Note: These child blocks must be added under the Section header container.
Click Add block below the Section header container to add a Feature box.
Each Feature box represents one key benefit, feature, or statistic displayed in the section.
The available options include:
Style: Choose how the main feature information is displayed. Available styles include Icon and Counter.
Icon: Select a predefined icon when using the Icon style.
Custom SVG icon: Add your own SVG icon instead of using a predefined icon.
Icon height: Adjust the displayed size of the icon.
Title: Enter the main title of the feature box, such as Quality Focused.
Description: Add optional supporting information below the feature title.
When Counter is selected, the feature box can be used to highlight numerical information or achievements, such as customer numbers, years of experience, or other statistics.
The Button block adds a call-to-action below the feature boxes, such as Explore More.
Use this block to direct customers to a relevant collection, product, page, or other destination.
Note: The button is displayed when Show button is enabled in the section settings.
