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
Thesettings.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}}
{{#settings.home_elements}}
<section class="home-element" data-type="{{#is_slider}}slider{{/is_slider}}{{#is_title}}title{{/is_title}}{{#is_title_2}}subtitle{{/is_title_2}}{{#is_page}}page{{/is_page}}">
<div class="container">
{{#element}}
<div class="element-content">
{{#title}}
<header class="element-header">
{{#is_title}}<h1>{{title}}</h1>{{/is_title}}
{{#is_title_2}}<h2>{{title}}</h2>{{/is_title_2}}
{{#is_slider}}<h2>{{title}}</h2>{{/is_slider}}
{{#is_page}}<h3>{{title}}</h3>{{/is_page}}
</header>
{{/title}}
<div class="element-media">
{{#image1_link}}
<div class="primary-image">
<img src="{{#img}}{{image1_link}}_1200x600{{/img}}"
alt="{{title}}"
loading="lazy">
</div>
{{/image1_link}}
{{#use_image2}}
{{#image2_link}}
<div class="secondary-image">
<img src="{{#img}}{{image2_link}}_600x400{{/img}}"
alt="{{title}}"
loading="lazy">
</div>
{{/image2_link}}
{{/use_image2}}
</div>
{{#page.content}}
<div class="element-text">
{{&page.content}}
</div>
{{/page.content}}
</div>
{{/element}}
</div>
</section>
{{/settings.home_elements}}
Available Properties
Home Elements Structure
| Property | Type | Description |
|---|---|---|
settings.home_elements | Array | Dynamic elements for homepage customization |
Element Type Conditionals
Within thesettings.home_elements loop:
| Property | Type | Description |
|---|---|---|
is_slider | Boolean | Check if element/section is a slider |
is_title | Boolean | Check if element/section is a title |
is_title_2 | Boolean | Check if element/section is a subtitle |
is_page | Boolean | Check if element/section is a page |
Element Properties
Withinsettings.home_elements.element:
| Property | Type | Description |
|---|---|---|
title | String | Element title |
image1_link | String | Image 1 link content |
use_image2 | Boolean | Should image 2 be used |
image2_link | String | Image 2 link content |
page.content | String | 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
<!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 typesResponsive 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