The Ingredient Slider section is designed to showcase key product ingredients in an interactive carousel format. Each ingredient is represented with an image and a popup-style description, allowing users to explore product benefits in a visually engaging way.
Section Settings #
Color scheme #
Choose the color scheme that matches your site design. This affects text and button colors over the section.
Section width #
Choose how wide the section appears on the page:
- Page – keeps the video within page content width.
- Full – expands the video to full browser width.
Heading #
Add a main heading for the section.
Heading size #
Select heading size from theme-defined options such as h1, h2, h3, h4, h5, h6.
Text #
Add a descriptive paragraph supporting the main heading. HTML tags like <br> are supported for line breaks.
Text Size #
Choose the size (e.g., H1, H2, H3, H4, H5, H6) for the description text to ensure balance with your text.
Button label #
Enter the call-to-action text for the button.
Button link #
Choose the link destination for the button (e.g., All Products collection or a custom URL).
Button Style #
Determines the design of the button.
- Primary button
- Secondary button
- Full button
- Link button
- Button with icon
Text Align #
Controls the alignment of the section heading and text.
- Left
- Center
- Right
Top Padding / Bottom Padding #
Adjusts vertical spacing above and below the section.
Block Settings #
Each block represents an ingredient item in the slider. You can add, remove, or reorder ingredient blocks as needed.
Image #
Upload an image representing the ingredient.
Heading #
The name of the ingredient displayed on the slide.
Description #
Text that appears in the ingredient detail popup when the ingredient is clicked.
