> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Settings Object

> Access theme-specific customizable settings and configuration

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.

<Info>
  **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.
</Info>

## Theme Dependency

<Warning>
  **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.
</Warning>

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

<CodeGroup>
  ```mustache Home Page Elements Loop theme={null}
  {{#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}}
  ```

  ```mustache Flexible Home Elements theme={null}
  {{#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}}
  ```
</CodeGroup>

## Available Properties

### Home Elements Structure

| Property                 | Type  | Description                                 |
| ------------------------ | ----- | ------------------------------------------- |
| `settings.home_elements` | Array | Dynamic elements for homepage customization |

### Element Type Conditionals

Within the `settings.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

Within `settings.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

<CodeGroup>
  ```mustache Slider Implementation theme={null}
  {{#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}}
  ```
</CodeGroup>

### Title Elements

<CodeGroup>
  ```mustache Title Sections theme={null}
  {{#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}}
  ```
</CodeGroup>

### Page Elements

<CodeGroup>
  ```mustache Page Content Sections theme={null}
  {{#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}}
  ```
</CodeGroup>

## Complete Homepage Example

<CodeGroup>
  ```mustache Full Homepage Implementation theme={null}
  <!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>
  ```
</CodeGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Content Management" icon="edit">
    Use home elements to give store owners flexible content control without code changes
  </Card>

  <Card title="Image Optimization" icon="image">
    Always use the `{{#img}}` wrapper with appropriate dimensions for different element types
  </Card>

  <Card title="Responsive Design" icon="mobile">
    Design elements to work well across all device sizes
  </Card>

  <Card title="Performance" icon="gauge">
    Use lazy loading for images and optimize element rendering
  </Card>
</CardGroup>

## Common Implementation Patterns

### Conditional Element Display

<CodeGroup>
  ```mustache Element Type Detection theme={null}
  {{#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}}
  ```
</CodeGroup>

### Image Fallbacks

<CodeGroup>
  ```mustache Image with Fallbacks theme={null}
  {{#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}}
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="SEO Object" icon="search" href="/theme-development/global/seo">
    Learn about SEO meta tags and structured data
  </Card>

  <Card title="Shop Object" icon="store" href="/theme-development/global/shop">
    Explore store-wide settings and information
  </Card>

  <Card title="Navigation Object" icon="bars" href="/theme-development/global/navigation">
    Build dynamic navigation menus and breadcrumbs
  </Card>

  <Card title="Best Practices" icon="star" href="/theme-development/advanced/best-practices">
    Learn about theme development best practices
  </Card>
</CardGroup>