The settings object contains theme-specific configuration options that you can customize through your Control Panel. Currently, the primary use of settings is for configurable home page elements.
Usage : Available globally - use to access theme customization settings configured in the Control Panel
Theme Dependency : The settings object is fully dependent on the theme settings available for your specific theme. Different themes may have different settings configurations.
Theme Dependency Important : The settings object and its available properties are entirely dependent on your theme’s configuration. The settings shown in this documentation represent the standard Quickbutik theme settings structure. Your specific theme may have different settings available, or may not use the settings object at all.
Always check your theme’s documentation or Control Panel to see what settings are actually available for your theme.
Home Page Elements The settings.home_elements object allows you to create dynamic, customizable content sections for your homepage that can be managed through the admin interface:
Home Page Elements Loop
Flexible Home Elements
{{#settings.home_elements}} {{#is_slider}} <div class="home-slider"> {{#element}} <div class="slider-item"> {{#title}} <h2 class="slider-title">{{title}}</h2> {{/title}} {{#image1_link}} <div class="slider-image"> <img src="{{#img}}{{image1_link}}_1200x600{{/img}}" alt="{{title}}"> </div> {{/image1_link}} {{#use_image2}} {{#image2_link}} <div class="slider-image-secondary"> <img src="{{#img}}{{image2_link}}_600x400{{/img}}" alt="{{title}}"> </div> {{/image2_link}} {{/use_image2}} {{#page.content}} <div class="slider-content"> {{&page.content}} </div> {{/page.content}} </div> {{/element}} </div> {{/is_slider}} {{#is_title}} <div class="home-title-section"> {{#element}} {{#title}} <h1 class="main-title">{{title}}</h1> {{/title}} {{#page.content}} <div class="title-content"> {{&page.content}} </div> {{/page.content}} {{/element}} </div> {{/is_title}} {{#is_title_2}} <div class="home-subtitle-section"> {{#element}} {{#title}} <h2 class="subtitle">{{title}}</h2> {{/title}} {{#page.content}} <div class="subtitle-content"> {{&page.content}} </div> {{/page.content}} {{/element}} </div> {{/is_title_2}} {{#is_page}} <div class="home-page-section"> {{#element}} {{#title}} <h3 class="page-section-title">{{title}}</h3> {{/title}} {{#image1_link}} <div class="page-section-image"> <img src="{{#img}}{{image1_link}}_800x400{{/img}}" alt="{{title}}"> </div> {{/image1_link}} {{#page.content}} <div class="page-section-content"> {{&page.content}} </div> {{/page.content}} {{/element}} </div> {{/is_page}} {{/settings.home_elements}}
Available Properties Home Elements Structure Property Type Description settings.home_elementsArray Dynamic elements for homepage customization
Element Type Conditionals Within the settings.home_elements loop:
Property Type Description is_sliderBoolean Check if element/section is a slider is_titleBoolean Check if element/section is a title is_title_2Boolean Check if element/section is a subtitle is_pageBoolean Check if element/section is a page
Element Properties Within settings.home_elements.element:
Property Type Description titleString Element title image1_linkString Image 1 link content use_image2Boolean Should image 2 be used image2_linkString Image 2 link content page.contentString Page content for page element
Element Type Examples Slider Elements {{#settings.home_elements}} {{#is_slider}} <div class="hero-slider"> <div class="slider-container"> {{#element}} <div class="slide"> <div class="slide-background"> {{#image1_link}} <img src="{{#img}}{{image1_link}}_1920x800{{/img}}" alt="{{title}}"> {{/image1_link}} </div> <div class="slide-content"> {{#title}} <h1 class="slide-title">{{title}}</h1> {{/title}} {{#page.content}} <div class="slide-description"> {{&page.content}} </div> {{/page.content}} {{#use_image2}} {{#image2_link}} <div class="slide-secondary-image"> <img src="{{#img}}{{image2_link}}_400x300{{/img}}" alt="{{title}}"> </div> {{/image2_link}} {{/use_image2}} </div> </div> {{/element}} </div> </div> {{/is_slider}} {{/settings.home_elements}} Title Elements {{#settings.home_elements}} {{#is_title}} <section class="hero-title"> <div class="container"> {{#element}} {{#title}} <h1 class="hero-heading">{{title}}</h1> {{/title}} {{#page.content}} <div class="hero-content"> {{&page.content}} </div> {{/page.content}} {{#image1_link}} <div class="hero-image"> <img src="{{#img}}{{image1_link}}_1200x600{{/img}}" alt="{{title}}"> </div> {{/image1_link}} {{/element}} </div> </section> {{/is_title}} {{#is_title_2}} <section class="section-subtitle"> <div class="container"> {{#element}} {{#title}} <h2 class="section-heading">{{title}}</h2> {{/title}} {{#page.content}} <div class="section-content"> {{&page.content}} </div> {{/page.content}} {{/element}} </div> </section> {{/is_title_2}} {{/settings.home_elements}} Page Elements {{#settings.home_elements}} {{#is_page}} <section class="content-section"> <div class="container"> {{#element}} <div class="content-block"> {{#title}} <header class="content-header"> <h3>{{title}}</h3> </header> {{/title}} <div class="content-body"> {{#image1_link}} <div class="content-image"> <img src="{{#img}}{{image1_link}}_800x500{{/img}}" alt="{{title}}"> </div> {{/image1_link}} {{#page.content}} <div class="content-text"> {{&page.content}} </div> {{/page.content}} {{#use_image2}} {{#image2_link}} <div class="content-secondary-image"> <img src="{{#img}}{{image2_link}}_400x300{{/img}}" alt="{{title}}"> </div> {{/image2_link}} {{/use_image2}} </div> </div> {{/element}} </div> </section> {{/is_page}} {{/settings.home_elements}} Complete Homepage Example Full Homepage Implementation
<!DOCTYPE html> <html> <head> <title>{{seo.title}}</title> <meta name="description" content="{{seo.description}}"> </head> <body> <header class="site-header"> <!-- Navigation and header content --> </header> <main class="homepage"> {{#settings.home_elements}} <section class="home-section home-section--{{#is_slider}}slider{{/is_slider}}{{#is_title}}title{{/is_title}}{{#is_title_2}}subtitle{{/is_title_2}}{{#is_page}}page{{/is_page}}"> {{#is_slider}} <div class="slider-wrapper"> {{#element}} <div class="slider-slide"> {{#image1_link}} <div class="slide-bg" style="background-image: url('{{#img}}{{image1_link}}_1920x800{{/img}}');"> {{/image1_link}} {{^image1_link}} <div class="slide-bg"> {{/image1_link}} <div class="slide-overlay"> <div class="container"> {{#title}} <h1 class="slide-title">{{title}}</h1> {{/title}} {{#page.content}} <div class="slide-content"> {{&page.content}} </div> {{/page.content}} {{#use_image2}} {{#image2_link}} <div class="slide-feature-image"> <img src="{{#img}}{{image2_link}}_500x400{{/img}}" alt="{{title}}"> </div> {{/image2_link}} {{/use_image2}} </div> </div> </div> </div> {{/element}} </div> {{/is_slider}} {{#is_title}} <div class="title-section"> <div class="container"> {{#element}} {{#title}} <h1 class="page-title">{{title}}</h1> {{/title}} {{#page.content}} <div class="title-description"> {{&page.content}} </div> {{/page.content}} {{#image1_link}} <div class="title-image"> <img src="{{#img}}{{image1_link}}_1200x600{{/img}}" alt="{{title}}"> </div> {{/image1_link}} {{/element}} </div> </div> {{/is_title}} {{#is_title_2}} <div class="subtitle-section"> <div class="container"> {{#element}} {{#title}} <h2 class="section-subtitle">{{title}}</h2> {{/title}} {{#page.content}} <div class="subtitle-description"> {{&page.content}} </div> {{/page.content}} {{/element}} </div> </div> {{/is_title_2}} {{#is_page}} <div class="page-section"> <div class="container"> {{#element}} <div class="page-content-block"> {{#title}} <h3 class="block-title">{{title}}</h3> {{/title}} <div class="block-layout"> {{#image1_link}} <div class="block-image"> <img src="{{#img}}{{image1_link}}_800x500{{/img}}" alt="{{title}}"> </div> {{/image1_link}} <div class="block-content"> {{#page.content}} {{&page.content}} {{/page.content}} {{#use_image2}} {{#image2_link}} <div class="block-secondary-image"> <img src="{{#img}}{{image2_link}}_400x300{{/img}}" alt="{{title}}"> </div> {{/image2_link}} {{/use_image2}} </div> </div> </div> {{/element}} </div> </div> {{/is_page}} </section> {{/settings.home_elements}} </main> <footer class="site-footer"> <!-- Footer content --> </footer> </body> </html> Best Practices
Content Management Use home elements to give store owners flexible content control without code changes
Image Optimization Always use the {{#img}} wrapper with appropriate dimensions for different element types
Responsive Design Design elements to work well across all device sizes
Performance Use lazy loading for images and optimize element rendering
Common Implementation Patterns Conditional Element Display {{#settings.home_elements}} <div class="home-element" data-slider="{{#is_slider}}true{{/is_slider}}" data-title="{{#is_title}}true{{/is_title}}" data-subtitle="{{#is_title_2}}true{{/is_title_2}}" data-page="{{#is_page}}true{{/is_page}}"> {{#element}} <!-- Element content based on type --> {{/element}} </div> {{/settings.home_elements}} Image Fallbacks {{#element}} {{#image1_link}} <img src="{{#img}}{{image1_link}}_800x400{{/img}}" alt="{{title}}"> {{/image1_link}} {{^image1_link}} <div class="placeholder-image"> <i class="icon-image"></i> <span>{{#lang}}No image available{{/lang}}</span> </div> {{/image1_link}} {{/element}} Next Steps 