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 PanelTheme 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: 
{{#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

PropertyTypeDescription
settings.home_elementsArrayDynamic elements for homepage customization

​
Element Type Conditionals

Within the settings.home_elements loop:
PropertyTypeDescription
is_sliderBooleanCheck if element/section is a slider
is_titleBooleanCheck if element/section is a title
is_title_2BooleanCheck if element/section is a subtitle
is_pageBooleanCheck if element/section is a page

​
Element Properties

Within settings.home_elements.element:
PropertyTypeDescription
titleStringElement title
image1_linkStringImage 1 link content
use_image2BooleanShould image 2 be used
image2_linkStringImage 2 link content
page.contentStringPage 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

<!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

SEO Object

Learn about SEO meta tags and structured data

Shop Object

Explore store-wide settings and information

Navigation Object

Build dynamic navigation menus and breadcrumbs

Best Practices

Learn about theme development best practices