# Primavera Theme Docs

Thank you for choosing Primavera for your Shopify store! We're excited to help you create a stunning and high-performing online store.

This documentation will guide you through setting up, customizing, and optimizing your theme to make the most of its powerful features. Whether you're a beginner or an experienced Shopify user, we’ve got you covered.

If you ever need assistance, don’t hesitate to reach out to our support team—we’re here to help! Visit our [Support Page](https://ultramarinastudios.com/support/) to get in touch.

{% hint style="info" %}
Our docs include handy code snippets and recommendations to help you customize your Shopify store. However, every store is unique, so some tweaks might not work exactly as expected. We always recommend working off a duplicated version of your theme and consulting a Shopify developer if you're unsure. If you have any questions, don't hesitate to [contact us](https://ultramarinastudios.com/support/)!
{% endhint %}

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Quick Start</strong></td><td>Check out our Quick Start guide for tips on how to set up Primavera.</td><td><a href="/files/9uL9Fen7XnwetrzLt5iL">/files/9uL9Fen7XnwetrzLt5iL</a></td><td></td><td><a href="/pages/ffMzZMts1LUpmdnCmrHd">/pages/ffMzZMts1LUpmdnCmrHd</a></td></tr><tr><td><strong>Theme Settings</strong></td><td>Customize the global appearance of your theme, including fonts and color palettes.</td><td><a href="/files/omcYJKAu6IjYJmMD828h">/files/omcYJKAu6IjYJmMD828h</a></td><td></td><td><a href="/pages/yu2lkIaNDbpqdzzEyVsx">/pages/yu2lkIaNDbpqdzzEyVsx</a></td></tr><tr><td><strong>Sections</strong> </td><td>A deep dive into Primavera's 30+ sections.</td><td><a href="/files/34Oiy6PXVuI5oLC7sdJi">/files/34Oiy6PXVuI5oLC7sdJi</a></td><td></td><td><a href="/pages/wuOIRxXY5x03LvJqH8Sm">/pages/wuOIRxXY5x03LvJqH8Sm</a></td></tr><tr><td><strong>Theme Blocks</strong></td><td>Learn more about these reusable blocks that enable you to create endless rich content layouts.</td><td><a href="/files/7dlNVGhyGj0tnsATv1DA">/files/7dlNVGhyGj0tnsATv1DA</a></td><td></td><td><a href="/pages/MM4eYy0syF51gQsdO2Bg">/pages/MM4eYy0syF51gQsdO2Bg</a></td></tr><tr><td><strong>FAQs</strong></td><td>Step-by-step guides for common customizations, from accessibility to custom product badges.</td><td><a href="/files/h604FSgCCbOTcjhfSRy2">/files/h604FSgCCbOTcjhfSRy2</a></td><td></td><td><a href="/pages/rWeUEUgWYph1kRyhgCSJ">/pages/rWeUEUgWYph1kRyhgCSJ</a></td></tr></tbody></table>


# Guides


# Quick start

### 1. Duplicate your new theme

That way, you always have a clean copy of Primavera to go back to.

### 2. Choose a theme style as a starting point

In the Customizer, under **Theme settings > Theme style**, choose from one of our **5 preset styles**:

1. [**Primavera**](https://themes.shopify.com/themes/primavera/presets/primavera) for an airy grid, light cream tones and sharp edges. This style is great for products that don't vary too much in color, e.g. jewelry.
2. [**Savoir**](https://themes.shopify.com/themes/primavera/presets/savoir) for a tight grid, monochrome color palette and sharp edges. Great for products that vary in color, as the monochrome colors won't clash.
3. [**Gloss**](https://themes.shopify.com/themes/primavera/presets/gloss) for a medium grid with modern fonts and rounded edges. Great for beauty/wellness brands or any products that have little color variation and uniform branding.
4. [Gaia](https://themes.shopify.com/themes/primavera/presets/gaia) for an airy grid with a natural color palette and serif typography. Great for classic brands wishing to convey authenticity, warmth and an organic, earthy style.
5. [**Composition**](https://themes.shopify.com/themes/primavera/presets/composition) for a bold look with sections framed with borders. Great for brands with bright colors, modern aesthetic.

### 3. Tweak your theme settings

Here are some of the most common customizations merchants make:

* Under **Theme settings > Logo**, upload your **logo** and **favicon**
* Tweak your color palettes under **Theme settings > Colors**
* Tweak your fonts under **Theme settings > Typography**
* If you're offering free shipping over X amount, head over to **Theme settings > Cart > Free shipping message** to enable the message and specify the threshold (remember to create the discount itself in the Shopify admin)
* Add your social media profiles under **Theme settings > Social media**

### 4. Build out your key pages&#x20;

Build out the structure of your key pages. Usually these will be the homepage, product, collection and about pages, however it does depend on the brand.

{% hint style="info" %}
If you're migrating from an existing theme, it's typically good practice to replicate existing pages and content in order to safeguard your SEO efforts. If in doubt, we recommend consulting an expert.
{% endhint %}

* **Consider the role and goal of each page:**
  * The **homepage** might provide an overview of your brand so customers can learn who you are, what products you sell, how those products help them and how they can find them.
  * The **product page** might educate customers about your product, providing product-specific information such as ingredients but also preempting questions about shipping and returns. You can leverage different types of sections and metafields on product pages to provide an information-rich experience that answers every question a customer might have, for example FAQs, inspiration, ingredient benefits, craftsmanship.
  * For the **collection page,** it's usually about helping customers find what they're looking for, fast.&#x20;
    * Consider creating collection submenus for your larger collections (e.g. Shop All) to help customers build a mental picture of your categories
    * Implement collection filters using Shopify's Search & Discovery app
* **Consider your assets:**
  * **If you have strong visual assets**, such as high quality video and images, leverage the following sections/blocks: image banner, video banner, shoppable banner, banner grid, media grid, before/after image (when relevant).
  * **If you don't have strong visual assets** and are mostly relying on copy and product images, you can leverage the following sections/blocks: featured collection, rich text, rich text columns, multicolumn, newsletter, collapsible content. Play with background colors and color scheme transition to create visual interest and dynamism in the absence of imagery.&#x20;
* Get creative with styling to **create visual interest**:&#x20;
  * Alternate between different sections/blocks
  * Use the super flexible [split banner](/sections/split-banner) and [split card](/sections/split-card) sections to mix and match different blocks
  * Use the right section for the right asset: for example, if you want text alongside images but don't want to crop the image/video (e.g. a founder image/video, a product diagram), use [Image with text](/sections/image-with-text) as it won't crop any part of the asset
* When uploading images and video, make sure you compress them first so performance is not impacted
* Review our [accessibility guide](/guides/accessibility)

### 5. Check everything carefully

Go through all the templates available in the Customizer and check both desktop and mobile layouts. We always recommend placing a test order before going live to make sure everything's configured correctly.

{% hint style="info" %}
This quick start guide is intended to provide a basic overview of setting up and using our Shopify theme. It is not a comprehensive guide to Shopify’s platform or best practices. For detailed information, please refer to [Shopify’s official documentation](https://help.shopify.com/) or consult a Shopify expert for personalized guidance.
{% endhint %}


# Accessibility

A complete guide to configuring Primavera in the most accessible way possible.

Thank you for taking an interest in the accessibility of the Primavera theme! This page serves as a configuration guide to ensure maximum accessibility across your store. If you are looking for our approach on accessibility, visit our [accessibility statement](https://ultramarinastudios.com/accessibility-statement/).

We have set up one store preset, Gaia, to model best practices for accessibility across the theme. We recommend either choosing this preset or looking to this preset as inspiration if accessibility is a priority for you. &#x20;

### Key principles

We have developed Primavera in order to allow merchants to fully comply with accessibility guidelines such as [WCAG 2.2](https://www.w3.org/TR/WCAG22/), but there are several parts of the content that individual merchants are responsible for.

#### Autoplay

Users may wish to avoid autoplaying or movement for a variety of reasons. It can be difficult for some users to focus on reading text when there are animated elements on the screen, or certain types of motion may trigger motion sickness.

Where there is motion in the theme, users should have the ability to stop the motion to compy with [2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html). If this is especially of concern to you, we recommend **disabling autoplay** globally across all sections as well as ensuring the pause button visibility is set to **always.**

The theme detects for users who have opted for reduced motion at a browser level in order and shows animations and moving elements with a paused state by default.

#### Color contrast

Color schemes need to comply with [1.4.3 Contrast (minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) and [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast).  Below is a list of contrast requirements for setting up your color schemes.

* **Text** needs to have a contrast ratio of 5:1 with the **background.** The WCAG criteria states this must be a 4.5:1 contrast ratio, but the theme uses a semi-transparent version of the text color in some places as a decorative accent so a greater level of contrast is required.
* **Text secondary** needs to have a contrast ratio of 4.5:1 with the background.
* **Exception accent** needs to have a contrast ratio of 4.5:1 with the background.
* For **buttons,** either the **border** or the **background** should have a contrast ratio of 3:1 with the section **background** color. If the button contains **text,** the **button text color** needs a 4.5:1 ratio with the **button or page background.**

Text on top of images can have poor visibility, especially as the image or text may appear differently at different screen sizes. Consider using the '**Enable overlay**' setting in imagery sections or enabling '**Stack content on mobile'** to guarantee proper visibility for all screen sizes.  For buttons, consider using the **primary** or **secondary** styles as opposed to text to increase visibility of the buttons in situations where the background image may not have enough contrast with the controls.

#### Text alternatives for imagery

All images and videos should have suitable alt text in order to communicate the purpose of the image for non-sighted users.  This is especially important for content within interactive controls such as links or buttons, so that the user has a sense of what the control is doing. This is an issue that is easily detectable by automatic linters and is high priority to resolve.

While we have included alt text across the theme for all user interface controls, merchants are responsible for writing alt text for their own content. Visit [this guide on how to draft effective alt text ](https://axesslab.com/alt-texts/)for your images.&#x20;

#### Descriptive link text

Link text should describe the the content that they link to. Try to avoid generic link text as 'Shop now' or 'Read more', as this also has negative implications for SEO. Screen reader users have the ability to list all links, and multiple links with the same text and different destinations is a [WCAG violation](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context). Where there are links such as 'Read more' or 'Shop now' in the theme, these have been coded to incorporate additional context from things like the product, collection or blog post title automatically.&#x20;

#### Third party apps and content

Third party apps often create blocking accessibiltiy barriers. For example, an inaccessible popup modal can render a site completely unusable for disabled users, and opens up your site to litigation. Primavera cannot control the content or accessibility of third-party apps, including sections from third-party vendors or code customizations. Ask your app vendors about their accessibility before purchasing.&#x20;

Primavera cannot control the accessibility of third-party apps. It is easy for a single app to create a breaking experience for disabled users, and opens up your site to potential litigation. This includes third-party sections available for purchase, and any other customer-facing code that is installed to your storefront.  We recommend you ask vendors about their accessibility practices before purchasing services. Feel free to reach out to support if you have any questions.

### Global settings

1. **Appearance > Label style:** We recommend setting this value to 'Always on top'. While not an explicit WCAG violation, having floating labels can cause some users to think that the input is already filled.
2. **Appearance > Input style:** Some users may be confused about whether or not an input is an input unless it is fully contained. We suggest using the 'box' value.
3. **Optimizations > Accessibility > Show focus outlines on text inputs:** When this option is disabled, the theme will load the what-input JavaScript library to compensate for some Safari related focus ring bugs, and it will hide focus rings on text inputs. For better performance and a more clear user experience when working with forms, we suggest enabling this option, but it is not required to meet WCAG.
4. **Optimizations > Accessibility > Shows a video description button when video alt text is created:** Providing text alternatives for video content is required to comply with WCAG. Enabling this button will generate a transcript button with the alt text assigned to the video. We recognize that some stores may have used the alt text for alternative purposes so we have provided the option to disable this functionality, but bear in mind that this is a WCAG violation.  &#x20;

### Section Guide

This guide will mention accessibility tips and caveats for certain sections on the theme.

1. Sidebar menu and Header:
   1. Promotion blocks should contain a visible label for greatest accessibilty. If you choose use an image without a label, the image alt text must include a description of the link destination.&#x20;
2. Announcement bar
   1. Disable autoplay or consider limiting this section to use one single announcement.
3. Banner grid:
   1. Reading order between desktop and mobile should be consistent. The first mobile banner should be the first desktop banner and etc.
4. Footer
   1. In footer image or logo blocks, you may add a link to the the image, but you should also add a label for the link purpose so that screen reader users understand where the link is pointing to.
5. Logo list
   1. Use the **stack** layout instead of the automatic logo list to reduce motion.&#x20;
6. Scrolling content
   1. Use a **rich text section** with customized padding in order to create a small banner without motion.
7. Slideshow
   1. **Hover arrows** may not provide a strong enough signal to users that this section is a slidehsow. We recommend using arrows that are persistently visible, either the **overlay** or **below** option.
   2. Consider disabling autoplay to avoid users experiencing content changing unexpectedly as they are reading it.
8. Video banner
   1. Consider disabling autoplay as this can make it difficult for certain users to read the text on top of it.
9. Blog posts, Collection list, Featured collection, Multicolumn, Testimonials
   1. Choosing the **grid layout option** to keep content persistently visible provides a stronger affordance that there is additional content over the slideshow option.


# SEO

### Why we use multiple H1 tags

Some SEO tools and scanners may occasionally flag that there are multiple `<h1>` tags in Primavera. This is based on outdated guidelines, as modern search engines are equipped to handle multiple  `<h1>` tags on a single page.

Primavera uses multiple `<h1>` tags by choice: the use of `<dialog>` for elements such as product descriptions with rich text content ensures the intended heading hierarchy is preserved. Otherwise, the modal content would have an incorrect heading hierarchy and further confuse the search engine crawlers and screen reader users.

In addition, we've exposed a [Set as page title](/common-settings#set-as-page-title) setting in dynamic sections that enable you to specify the heading as an `<h1>` , providing added flexibility and SEO benefits.

Therefore, if your SEO checker flags this, it's probably okay to ignore it. And if you have any questions, don't hesitate to [get in touch](https://ultramarinastudios.com/support/).


# Theme Licensing

Theme licensing is managed directly by Shopify, in accordance with their  Terms of Service. If a theme is purchased on the wrong store, we're unfortunately unable to issue a refund or transfer the license ourselves – you’ll need to reach out to Shopify Support for assistance. To help avoid this, we always recommend making full use of the unlimited free trial period to ensure the theme is a good fit before completing your purchase.

Once you’ve purchased Primavera, you’re welcome to use it on multiple development stores, provided they remain password-protected. If you plan to use the theme on multiple live (public) stores, you’ll need to purchase a separate license for each one. Otherwise, Shopify's automated theme piracy detection system may flag the stores, which could result in delisting. Please note that this process is entirely handled by Shopify, and we don’t have the ability to override their enforcement policies.

### Custom development

If you're doing custom development, we suggest doing development on the final store that will be open to the public wherever possible, while using an **unpublished** theme. This will keep your changes hidden to public while you develop, and removes the need to migrate media content and products.

If you need to have a separate development store, we recommend following this process to ensure a seamless migration. In this example, we're assuming that there is a main store with a paid Shopify plan, and a development store that is password protected.

1. Utilize the unlimited free trial to see if Primavera is the right fit for your store
2. Purchase Primavera on the store you would like to publish the theme on
3. Download the code from your live store and upload it to your development store/repository
4. When you are finished modifying the code, push it back up to the live store
   1. If your changes are minimal, you may want to push it directly to the version of the theme associated with your purchase (or a duplicate of that theme), so that you are not locked out of the automatic upgrade flow
   2. If your changes are extensive, you may need to manage upgrades manually
5. Please note, you will need to migrate any file assets over to your live store. This can be handled by the use of third-party migration apps.


# How to set up the same homepage sections as the demo stores

Just getting started with Primavera and want to replicate the layout of one of our demo stores? We are happy to provide the template structure for the homepage so you can import them into your own store with ease.

These instructions only copy the same settings for the homepage, without any imagery or text. The exact look and feel of the homepage will depend on the style of the preset you've chosen. Following this  guide will completely override all your customizations for the homepage, so only follow these instructions if you are wiling to start from scratch!

{% hint style="warning" %}
Below are code snippets you may use to replicate the homepages of our demo stores. However, every store is unique, so some tweaks might not work exactly as expected. We always recommend working off a duplicated version of your theme and consulting a Shopify developer if you're unsure. If you have any questions, don't hesitate to [contact us](https://ultramarinastudios.com/support/)!
{% endhint %}

{% hint style="info" %}
Please note, you will only be able to follow this guide if you have already purchased the theme, as it requires having edit access for the theme code. Because all theme sales are non refundable, we suggest being certain you wish to move ahead with Primavera before purchasing.
{% endhint %}

### Instructions

1. Open your copy of Primavera in the customizer. Click the three dot icon and press the **Edit Code** button.\
   &#x20;![](/files/lG3vUUHxnQGG40rN1b8k)
2. Navigate to the **index.json** template under the **templates** subfolder.\
   ![](/files/ABrWyLhNsJoUoiZ2XVxL)
3. Copy and paste any of the following demo store templates into this file and **save** your changes.&#x20;

<details>

<summary>Primavera</summary>

```
{
  "sections": {
    "split_banner_CVxBth": {
      "type": "split-banner",
      "blocks": {
        "image_banner_yh3kTA": {
          "type": "_image-banner",
          "settings": {
            "height": "medium",
            "mobile_height": "large",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "left",
            "vertical_alignment": "bottom",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-1",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "heading_group_nAHUCz": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "subheading_T4fYra": {
                  "type": "_subheading",
                  "blocks": {}
                },
                "heading_z46Cnd": {
                  "type": "_heading",
                  "settings": {
                    "heading_size": "h2"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "subheading_T4fYra",
                "heading_z46Cnd"
              ]
            },
            "button_group_TTykKG": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button_bbfkqk": {
                  "type": "_button",
                  "settings": {
                    "button_style": "primary"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "button_bbfkqk"
              ]
            }
          },
          "block_order": [
            "heading_group_nAHUCz",
            "button_group_TTykKG"
          ]
        },
        "video_banner_aNLHfq": {
          "type": "_video-banner",
          "settings": {
            "enable_autoplay": true,
            "play_button_display": "hover_focus",
            "button_style": "text",
            "button_alignment": "middle-center",
            "height": "medium",
            "mobile_height": "large",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {}
        }
      },
      "block_order": [
        "image_banner_yh3kTA",
        "video_banner_aNLHfq"
      ],
      "settings": {
        "show_top_border": false,
        "show_bottom_border": false,
        "enable_transparent_header": true
      }
    },
    "rich_text_columns_tPGXHG": {
      "type": "rich-text-columns",
      "blocks": {
        "rich_text_column_Njrq39": {
          "type": "_rich-text-column",
          "settings": {
            "horizontal_alignment": "left"
          },
          "blocks": {
            "heading_group_97XitQ": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "heading_KCNxDg": {
                  "type": "_heading",
                  "settings": {
                    "heading_size": "h3"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "heading_KCNxDg"
              ]
            },
            "button_group_VpKyrH": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button_4gnYnL": {
                  "type": "_button",
                  "settings": {
                    "button_style": "text"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "button_4gnYnL"
              ]
            }
          },
          "block_order": [
            "heading_group_97XitQ",
            "button_group_VpKyrH"
          ]
        },
        "rich_text_column_wPB8XL": {
          "type": "_rich-text-column",
          "settings": {
            "horizontal_alignment": "left"
          },
          "blocks": {
            "text_9ntmTd": {
              "type": "text",
              "settings": {
                "font_style": "body"
              },
              "blocks": {}
            }
          },
          "block_order": [
            "text_9ntmTd"
          ]
        }
      },
      "block_order": [
        "rich_text_column_Njrq39",
        "rich_text_column_wPB8XL"
      ],
      "settings": {
        "vertical_alignment": "top",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "featured_collection_jkiWhg": {
      "type": "featured-collection",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "Subheading",
            "heading": "Heading",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>This is an optional description. Use this text to provide context and guidance for the content below. For example, you could briefly describe features, inspiration or relevant promotions. Leave the text blank if you prefer to remove it.</p>",
            "button_label": "Button label",
            "button_link": ""
          },
          "blocks": {}
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {}
        }
      },
      "settings": {
        "product_list": [],
        "columns_desktop": "4",
        "columns_mobile": "2",
        "layout_desktop": "slideshow",
        "container_type": "max",
        "product_limit": 25,
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "var(--space-xl)",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "banner_grid_7qUywi": {
      "type": "banner-grid",
      "blocks": {
        "banner_grid_item_t7MQjG": {
          "type": "_banner-grid-item",
          "settings": {
            "column_desktop": 2,
            "row_desktop": 2,
            "column_mobile": "2",
            "row_mobile": "1"
          },
          "blocks": {
            "grid_image_banner_CP6Ei9": {
              "type": "_grid-image-banner",
              "settings": {
                "spacing": "0px",
                "media_content_padding": "default",
                "horizontal_alignment": "center",
                "vertical_alignment": "middle",
                "enable_overlay": false,
                "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
                "color_scheme": "scheme-1",
                "enable_color_scheme_transition": false,
                "color_scheme_transition": ""
              },
              "blocks": {
                "button_group_YRJ6Xm": {
                  "type": "button-group",
                  "settings": {
                    "horizontal_alignment": "inherit"
                  },
                  "blocks": {
                    "button_TjyBxn": {
                      "type": "_button",
                      "settings": {
                        "button_style": "primary"
                      },
                      "blocks": {}
                    }
                  },
                  "block_order": [
                    "button_TjyBxn"
                  ]
                }
              },
              "block_order": [
                "button_group_YRJ6Xm"
              ]
            }
          },
          "block_order": [
            "grid_image_banner_CP6Ei9"
          ]
        },
        "banner_grid_item_XTaLUJ": {
          "type": "_banner-grid-item",
          "settings": {
            "column_desktop": 2,
            "row_desktop": 1,
            "column_mobile": "2",
            "row_mobile": "1"
          },
          "blocks": {
            "grid_image_banner_j4yhVj": {
              "type": "_grid-image-banner",
              "settings": {
                "spacing": "0px",
                "media_content_padding": "default",
                "horizontal_alignment": "center",
                "vertical_alignment": "middle",
                "enable_overlay": false,
                "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
                "color_scheme": "scheme-1",
                "enable_color_scheme_transition": false,
                "color_scheme_transition": ""
              },
              "blocks": {
                "button_group_7FwQEh": {
                  "type": "button-group",
                  "settings": {
                    "horizontal_alignment": "inherit"
                  },
                  "blocks": {
                    "button_MEtqUe": {
                      "type": "_button",
                      "settings": {
                        "button_style": "primary"
                      },
                      "blocks": {}
                    }
                  },
                  "block_order": [
                    "button_MEtqUe"
                  ]
                }
              },
              "block_order": [
                "button_group_7FwQEh"
              ]
            }
          },
          "block_order": [
            "grid_image_banner_j4yhVj"
          ]
        },
        "banner_grid_item_tBgWqa": {
          "type": "_banner-grid-item",
          "settings": {
            "column_desktop": 1,
            "row_desktop": 1,
            "column_mobile": "2",
            "row_mobile": "1"
          },
          "blocks": {
            "grid_image_banner_p3Dzmi": {
              "type": "_grid-image-banner",
              "settings": {
                "spacing": "0px",
                "media_content_padding": "default",
                "horizontal_alignment": "center",
                "vertical_alignment": "middle",
                "enable_overlay": false,
                "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
                "color_scheme": "scheme-1",
                "enable_color_scheme_transition": false,
                "color_scheme_transition": ""
              },
              "blocks": {
                "button_group_yTcCPn": {
                  "type": "button-group",
                  "settings": {
                    "horizontal_alignment": "inherit"
                  },
                  "blocks": {
                    "button_LiAB7E": {
                      "type": "_button",
                      "settings": {
                        "button_style": "primary"
                      },
                      "blocks": {}
                    }
                  },
                  "block_order": [
                    "button_LiAB7E"
                  ]
                }
              },
              "block_order": [
                "button_group_yTcCPn"
              ]
            }
          },
          "block_order": [
            "grid_image_banner_p3Dzmi"
          ]
        },
        "banner_grid_item_r3Ckdd": {
          "type": "_banner-grid-item",
          "settings": {
            "column_desktop": 1,
            "row_desktop": 1,
            "column_mobile": "2",
            "row_mobile": "1"
          },
          "blocks": {
            "grid_image_banner_PzqUyf": {
              "type": "_grid-image-banner",
              "settings": {
                "spacing": "0px",
                "media_content_padding": "default",
                "horizontal_alignment": "center",
                "vertical_alignment": "middle",
                "enable_overlay": false,
                "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
                "color_scheme": "scheme-1",
                "enable_color_scheme_transition": false,
                "color_scheme_transition": ""
              },
              "blocks": {
                "button_group_H6cNzg": {
                  "type": "button-group",
                  "settings": {
                    "horizontal_alignment": "inherit"
                  },
                  "blocks": {
                    "button_epgiUa": {
                      "type": "_button",
                      "settings": {
                        "button_style": "primary"
                      },
                      "blocks": {}
                    }
                  },
                  "block_order": [
                    "button_epgiUa"
                  ]
                }
              },
              "block_order": [
                "button_group_H6cNzg"
              ]
            }
          },
          "block_order": [
            "grid_image_banner_PzqUyf"
          ]
        },
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "",
            "heading": "",
            "page_title": false,
            "heading_size": "h2",
            "text": "",
            "button_label": "",
            "button_link": ""
          },
          "blocks": {}
        }
      },
      "block_order": [
        "banner_grid_item_t7MQjG",
        "banner_grid_item_XTaLUJ",
        "banner_grid_item_tBgWqa",
        "banner_grid_item_r3Ckdd"
      ],
      "settings": {
        "container_type": "full",
        "height": "small",
        "grid_gap_vertical": "var(--space-3xs)",
        "grid_gap_horizontal": "var(--space-3xs)",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "0px",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "logo_list_tw3gKe": {
      "type": "logo-list",
      "blocks": {
        "logo_CJhjUa": {
          "type": "_logo",
          "settings": {
            "link": ""
          },
          "blocks": {}
        },
        "logo_cAzpTn": {
          "type": "_logo",
          "settings": {
            "link": ""
          },
          "blocks": {}
        },
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "Subheading",
            "heading": "Logo list",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>This is an optional description. Use this text to provide context and guidance for the content below. For example, you could briefly describe features, inspiration or relevant promotions. Leave the text blank if you prefer to remove it.</p>",
            "button_label": "Button label",
            "button_link": ""
          },
          "blocks": {}
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "center"
          },
          "blocks": {
            "button_dRMhTY": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "",
                "button_link": ""
              },
              "blocks": {}
            }
          },
          "block_order": [
            "button_dRMhTY"
          ]
        }
      },
      "block_order": [
        "logo_CJhjUa",
        "logo_cAzpTn"
      ],
      "settings": {
        "layout": "autoscroll",
        "speed": 1,
        "scroll_direction": "right",
        "size": 72,
        "spacing": "var(--space-xl)",
        "horizontal_alignment": "center",
        "container_type": "max",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "shoppable_banner_cj9aKg": {
      "type": "shoppable-banner",
      "blocks": {
        "mini_product_gVNhVn": {
          "type": "mini-product",
          "settings": {
            "style": "card",
            "color_scheme": ""
          },
          "blocks": {}
        }
      },
      "block_order": [
        "mini_product_gVNhVn"
      ],
      "settings": {
        "enable_autoplay": true,
        "play_button_display": "hover_focus",
        "button_style": "text",
        "button_alignment": "top-left",
        "height": "medium",
        "mobile_height": "large",
        "stack": "none",
        "spacing": "0px",
        "media_content_padding": "default",
        "container_type": "full",
        "horizontal_alignment": "left",
        "vertical_alignment": "bottom",
        "enable_overlay": false,
        "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
        "color_scheme": "scheme-2",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "0px",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "split_card_ipD3Vc": {
      "type": "split-card",
      "blocks": {
        "image_banner_zpg7ya": {
          "type": "_image-banner",
          "settings": {
            "height": "large",
            "mobile_height": "large",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {}
        },
        "block_rich_text_te8hG4": {
          "type": "_block-rich-text",
          "settings": {
            "vertical_alignment": "middle",
            "horizontal_alignment": "center",
            "container_width": "md",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": true,
            "color_scheme_transition": "scheme-3",
            "padding_top": "default",
            "padding_bottom": "default"
          },
          "blocks": {
            "heading_group_F9QLVf": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "subheading_xBifkP": {
                  "type": "_subheading",
                  "settings": {
                  },
                  "blocks": {}
                },
                "heading_XELXzt": {
                  "type": "_heading",
                  "settings": {
                    "heading_size": "h2"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "subheading_xBifkP",
                "heading_XELXzt"
              ]
            },
            "text_Af8YfR": {
              "type": "text",
              "settings": {
                "font_style": "body"
              },
              "blocks": {}
            },
            "button_group_A4EEdP": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button_pAEnCx": {
                  "type": "_button",
                  "settings": {
                    "button_style": "primary"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "button_pAEnCx"
              ]
            }
          },
          "block_order": [
            "heading_group_F9QLVf",
            "text_Af8YfR",
            "button_group_A4EEdP"
          ]
        }
      },
      "block_order": [
        "image_banner_zpg7ya",
        "block_rich_text_te8hG4"
      ],
      "settings": {
        "container_type": "max",
        "border_radius": "section",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false,
        "show_borders": false
      }
    },
    "scrolling_content_dWTbWa": {
      "type": "scrolling-content",
      "blocks": {
        "text_kMCcPB": {
          "type": "text",
          "settings": {
          }
        },
        "image_8fDHyi": {
          "type": "image",
          "settings": {
            "max_width": 36,
            "link": ""
          }
        }
      },
      "block_order": [
        "text_kMCcPB",
        "image_8fDHyi"
      ],
      "settings": {
        "speed": 2,
        "scroll_direction": "left",
        "horizontal_gap": 10,
        "font_type": "heading",
        "font_size": 24,
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "var(--space-xs)",
        "padding_bottom": "var(--space-xs)",
        "show_top_border": true,
        "show_bottom_border": false
      }
    },
    "countdown_Gdt3WA": {
      "type": "countdown",
      "blocks": {
        "heading_group_zB7rgX": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "subheading_ntwdfR": {
              "type": "_subheading",
              "settings": {
              },
              "blocks": {}
            },
            "heading_JVwHVV": {
              "type": "_heading",
              "settings": {
                "heading_size": "h1"
              },
              "blocks": {}
            }
          },
          "block_order": [
            "subheading_ntwdfR",
            "heading_JVwHVV"
          ]
        },
        "text_JxFU7J": {
          "type": "text",
          "settings": {
            "font_style": "body"
          },
          "blocks": {}
        },
        "button_group_z6hYWy": {
          "type": "button-group",
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {
            "button_h4yqUW": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "RSVP"
              },
              "blocks": {}
            }
          },
          "block_order": [
            "button_h4yqUW"
          ]
        },
        "countdown": {
          "type": "_countdown",
          "static": true,
          "settings": {
            "date": "2025-07-04",
            "hide_section": true,
            "font_style": "heading h1",
            "color_scheme": "scheme-2",
            "opacity": 10,
            "enable_blur": true,
            "accessibility_description": "Countdown timer"
          },
          "blocks": {}
        }
      },
      "block_order": [
        "heading_group_zB7rgX",
        "text_JxFU7J",
        "button_group_z6hYWy"
      ],
      "settings": {
        "desktop_layout": "split",
        "horizontal_alignment": "center",
        "vertical_alignment": "middle",
        "enable_autoplay": false,
        "play_button_display": "always",
        "button_style": "text",
        "button_alignment": "top-left",
        "height": "medium",
        "mobile_height": "large",
        "stack": "none",
        "spacing": "0px",
        "media_content_padding": "default",
        "container_type": "full",
        "enable_overlay": false,
        "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "featured_product_KUPB34": {
      "type": "featured-product",
      "blocks": {
        "pdp-product-information": {
          "type": "_pdp-product-information",
          "static": true,
          "settings": {
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "container_width": "xxs",
            "padding_top": "default",
            "padding_bottom": "default"
          },
          "blocks": {
            "pdp_badges_Na7j3g": {
              "type": "_pdp-badges",
              "settings": {
                "button_style": "text"
              },
              "blocks": {}
            },
            "pdp_title_wbNcRr": {
              "type": "_pdp-title",
              "settings": {
                "heading_size": "h1",
                "enable_share": false,
                "share_color_scheme": ""
              },
              "blocks": {}
            },
            "pdp_price_YxGBf6": {
              "type": "_pdp-price",
              "settings": {
                "font_style": "caption"
              },
              "blocks": {}
            },
            "pdp_description_6mL4yx": {
              "type": "_pdp-description",
              "settings": {
                "text": "<p>{{ closest.product.description }}</p>",
                "enable_truncation": false,
                "word_limit": 40,
                "title": "Description"
              },
              "blocks": {}
            },
            "pdp_variant_picker_CpNFrf": {
              "type": "_pdp-variant-picker",
              "settings": {
                "variant_picker_style": "buttons",
                "swatch_style": "default",
                "option_1": "",
                "option_1_page": "",
                "option_1_label": "icon",
                "option_2": "",
                "option_2_page": "",
                "option_2_label": "icon",
                "option_3": "",
                "option_3_page": "",
                "option_3_label": "icon"
              },
              "blocks": {}
            },
            "pdp_line_item_tGfzab": {
              "type": "_pdp-line-item",
              "settings": {
                "type": "text",
                "field_label": "Engraving",
                "required": false,
                "text_type": "text",
                "checkbox_checked": "Yes",
                "checkbox_unchecked": "No",
                "options": "Option 1, Option 2"
              },
              "blocks": {}
            },
            "pdp_buy_buttons_cTRr8X": {
              "type": "_pdp-buy-buttons",
              "settings": {
                "show_dynamic_checkout": false,
                "show_quantity_selector": false,
                "show_gift_card_recipient": true
              },
              "blocks": {}
            },
            "pdp_icon_with_text_6LJW6T": {
              "type": "_pdp-icon-with-text",
              "settings": {
                "icon": "heart",
                "icon_size": "icon--s",
                "max_width": 16,
                "font_style": "body text-s",
                "layout": "row",
                "horizontal_alignment": "left",
                "vertical_alignment": "middle",
                "padding": "var(--space-2xs)",
                "gap": "var(--space-2xs)",
                "color_scheme": "scheme-5"
              },
              "blocks": {}
            },
            "pdp_collapsible_eKYYeE": {
              "type": "_pdp-collapsible",
              "settings": {
                "heading": "Details",
                "font_style": "body"
              },
              "blocks": {}
            },
            "pdp_collapsible_VGKLNV": {
              "type": "_pdp-collapsible",
              "settings": {
                "font_style": "body"
              },
              "blocks": {}
            }
          },
          "block_order": [
            "pdp_badges_Na7j3g",
            "pdp_title_wbNcRr",
            "pdp_price_YxGBf6",
            "pdp_description_6mL4yx",
            "pdp_variant_picker_CpNFrf",
            "pdp_line_item_tGfzab",
            "pdp_buy_buttons_cTRr8X",
            "pdp_icon_with_text_6LJW6T",
            "pdp_collapsible_eKYYeE",
            "pdp_collapsible_VGKLNV"
          ]
        }
      },
      "settings": {
        "media_style": "thumbnails",
        "enable_zoom": false,
        "enable_autoplay": true,
        "media_color_scheme": "",
        "spacing": "var(--space-2xl)",
        "button_style": "primary",
        "image_aspect_ratio": "adapt",
        "animation_style": "fade",
        "counter_style": "hidden",
        "enable_looping": true,
        "color_scheme": "",
        "show_top_border": false,
        "show_bottom_border": false,
        "enable_transparent_header": false
      }
    },
    "split_banner_JG9Hg8": {
      "type": "split-banner",
      "blocks": {
        "image_banner_tB8qN9": {
          "type": "_image-banner",
          "settings": {
            "height": "medium",
            "mobile_height": "large",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "image_VtMXpz": {
              "type": "image",
              "settings": {
                "image_ratio": "default",
                "max_width": 280,
                "horizontal_alignment": "inherit",
                "product": ""
              },
              "blocks": {}
            }
          },
          "block_order": [
            "image_VtMXpz"
          ]
        },
        "product_banner_gLJk4e": {
          "type": "_product-banner",
          "settings": {
            "spacing": "var(--space-2xl)",
            "horizontal_alignment": "center",
            "color_scheme": "scheme-1",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {}
        }
      },
      "block_order": [
        "image_banner_tB8qN9",
        "product_banner_gLJk4e"
      ],
      "settings": {
        "show_top_border": false,
        "show_bottom_border": false,
        "enable_transparent_header": false
      }
    },
    "testimonials_hkYUgX": {
      "type": "testimonials",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "Subheading",
            "heading": "Heading",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>This is an optional description. Use this text to provide context and guidance for the content below. For example, you could briefly describe features, inspiration or relevant promotions. Leave the text blank if you prefer to remove it.</p>",
            "button_label": "Button label",
            "button_link": ""
          },
          "blocks": {}
        }
      },
      "disabled": true,
      "settings": {
        "columns_desktop": "3",
        "columns_mobile": "1",
        "column_behavior": "slideshow",
        "container_type": "max",
        "alignment_columns": "center",
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "blog_posts_fHpym9": {
      "type": "blog-posts",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "center",
            "page_title": false,
            "heading_size": "h2",
            "text": "",
            "button_label": "",
            "button_link": ""
          },
          "blocks": {}
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "center"
          },
          "blocks": {
            "button_c8a9DE": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "View All",
                "button_link": "shopify://blogs/news"
              },
              "blocks": {}
            }
          },
          "block_order": [
            "button_c8a9DE"
          ]
        }
      },
      "settings": {
        "blog": "news",
        "product_limit": 4,
        "columns_desktop": "3",
        "columns_mobile": "1",
        "layout_desktop": "slideshow",
        "container_type": "max",
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "scheme-3",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "stacked_images_with_text_FwmqFy": {
      "type": "stacked-images-with-text",
      "blocks": {
        "heading_group_TpLDFH": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "subheading_78HKX3": {
              "type": "_subheading",
              "settings": {
              },
              "blocks": {}
            },
            "heading_iHL6ej": {
              "type": "_heading",
              "settings": {
                "heading_size": "h2"
              },
              "blocks": {}
            }
          },
          "block_order": [
            "subheading_78HKX3",
            "heading_iHL6ej"
          ]
        },
        "text_TVG6Vx": {
          "type": "text",
          "settings": {
            "font_style": "body"
          },
          "blocks": {}
        },
        "button_group_VTxAWC": {
          "type": "button-group",
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {
            "button_EGwcDF": {
              "type": "_button",
              "settings": {
                "button_style": "secondary"
              },
              "blocks": {}
            }
          },
          "block_order": [
            "button_EGwcDF"
          ]
        },
        "stacked-images": {
          "type": "_stacked-images",
          "static": true,
          "settings": {},
          "blocks": {
            "stacked_image_3ATrYn": {
              "type": "_stacked-image",
              "settings": {
                "image_ratio": "2 / 3",
                "max_width": 80,
                "link": "",
                "link_label": ""
              },
              "blocks": {}
            },
            "stacked_image_E8RWWH": {
              "type": "_stacked-image",
              "settings": {
                "image_ratio": "3 / 2",
                "max_width": 100,
                "link": "",
                "link_label": ""
              },
              "blocks": {}
            }
          },
          "block_order": [
            "stacked_image_3ATrYn",
            "stacked_image_E8RWWH"
          ]
        }
      },
      "block_order": [
        "heading_group_TpLDFH",
        "text_TVG6Vx",
        "button_group_VTxAWC"
      ],
      "settings": {
        "horizontal_alignment": "center",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "media_grid_BHDbN3": {
      "type": "media-grid",
      "blocks": {
        "media_grid_image_dbzjLq": {
          "type": "_media-grid-image",
          "settings": {
            "image_ratio": "2 / 3",
            "link": "",
            "link_label": ""
          },
          "blocks": {}
        },
        "media_grid_text_xgbKmr": {
          "type": "_media-grid-text",
          "settings": {
            "vertical_alignment": "middle",
            "horizontal_alignment": "center",
            "color_scheme": "",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "heading_group_immFUc": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "subheading_WLFjdU": {
                  "type": "_subheading",
                  "settings": {
                  },
                  "blocks": {}
                },
                "heading_3RG37z": {
                  "type": "_heading",
                  "settings": {
                    "heading_size": "h2"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "subheading_WLFjdU",
                "heading_3RG37z"
              ]
            },
            "button_group_mWXnf9": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button_Dgw9TM": {
                  "type": "_button",
                  "settings": {
                    "button_style": "text",
                    "button_label": "Follow Us",
                    "button_link": "https://www.instagram.com/shopify/"
                  },
                  "blocks": {}
                }
              },
              "block_order": [
                "button_Dgw9TM"
              ]
            }
          },
          "block_order": [
            "heading_group_immFUc",
            "button_group_mWXnf9"
          ]
        },
        "media_grid_image_PV3r4Q": {
          "type": "_media-grid-image",
          "settings": {
            "image_ratio": "2 / 3",
            "link": "",
            "link_label": ""
          },
          "blocks": {}
        },
        "media_grid_image_eFpbDt": {
          "type": "_media-grid-image",
          "settings": {
            "image_ratio": "2 / 3",
            "link": "",
            "link_label": ""
          },
          "blocks": {}
        },
        "media_grid_image_ic7cPK": {
          "type": "_media-grid-image",
          "settings": {
            "image_ratio": "2 / 3",
            "link": "",
            "link_label": ""
          },
          "blocks": {}
        },
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "",
            "heading": "",
            "page_title": false,
            "heading_size": "h2",
            "text": "",
            "button_label": "",
            "button_link": ""
          },
          "blocks": {}
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {}
        }
      },
      "block_order": [
        "media_grid_image_dbzjLq",
        "media_grid_text_xgbKmr",
        "media_grid_image_PV3r4Q",
        "media_grid_image_eFpbDt",
        "media_grid_image_ic7cPK"
      ],
      "settings": {
        "columns_desktop": "4",
        "columns_mobile": "2",
        "column_behavior": "slideshow",
        "container_type": "full",
        "grid_gap_vertical": "var(--space-3xs)",
        "grid_gap_horizontal": "var(--space-3xs)",
        "arrow_position": "overlay",
        "counter_style": "hidden",
        "button_style": "primary",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    }
  },
  "order": [
    "split_banner_CVxBth",
    "rich_text_columns_tPGXHG",
    "featured_collection_jkiWhg",
    "banner_grid_7qUywi",
    "logo_list_tw3gKe",
    "shoppable_banner_cj9aKg",
    "split_card_ipD3Vc",
    "scrolling_content_dWTbWa",
    "countdown_Gdt3WA",
    "featured_product_KUPB34",
    "split_banner_JG9Hg8",
    "testimonials_hkYUgX",
    "blog_posts_fHpym9",
    "stacked_images_with_text_FwmqFy",
    "media_grid_BHDbN3"
  ]
}

```

</details>

<details>

<summary>Gaia</summary>

```
{
  "sections": {
    "split_banner_jWmCq9": {
      "type": "split-banner",
      "blocks": {
        "image_banner_fUDMTn": {
          "type": "_image-banner",
          "settings": {
            "image": "",
            "height": "medium",
            "mobile_height": "medium",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "xxs",
            "horizontal_alignment": "left",
            "vertical_alignment": "middle",
            "enable_banner_click": false,
            "enable_overlay": true,
            "overlay": "linear-gradient(180deg, rgba(77, 44, 44, 0.4), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "heading_group_9nJWxx": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "heading_UC9aUa": {
                  "type": "_heading",
                  "settings": {
                    "heading": "Handmade ceramics",
                    "heading_size": "h2"
                  }
                }
              },
              "block_order": [
                "heading_UC9aUa"
              ]
            },
            "text_8zpFnb": {
              "type": "text",
              "settings": {
                "text": "<p>Each one of our hand-crafted pieces bring a unique warmth and charm to every home.</p>",
                "font_style": "body"
              }
            },
            "button_group_iX7B9G": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button_6kVcyE": {
                  "type": "_button",
                  "settings": {
                    "button_style": "primary",
                    "button_label": "Shop all products",
                    "button_link": "shopify://collections/all"
                  }
                }
              },
              "block_order": [
                "button_6kVcyE"
              ]
            }
          },
          "block_order": [
            "heading_group_9nJWxx",
            "text_8zpFnb",
            "button_group_iX7B9G"
          ]
        },
        "image_banner_K7RAVc": {
          "type": "_image-banner",
          "settings": {
            "image": "",
            "height": "medium",
            "mobile_height": "medium",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          }
        }
      },
      "block_order": [
        "image_banner_fUDMTn",
        "image_banner_K7RAVc"
      ],
      "settings": {
        "show_top_border": false,
        "show_bottom_border": false,
        "enable_transparent_header": false
      }
    },
    "rich_text_3T4bi8": {
      "type": "rich-text",
      "blocks": {
        "heading_group_qeddfV": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "subheading_tcQQiY": {
              "type": "_subheading",
              "settings": {
                "subheading": "our essence"
              }
            },
            "heading_qgiQyn": {
              "type": "_heading",
              "settings": {
                "heading": "“Ceramics that blend tradition with contemporary design, bringing warmth, beauty, and meaning into any space.”",
                "heading_size": "h2"
              }
            }
          },
          "block_order": [
            "subheading_tcQQiY",
            "heading_qgiQyn"
          ]
        },
        "button_group_b7i8f6": {
          "type": "button-group",
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {
            "button_JYPmLB": {
              "type": "_button",
              "settings": {
                "button_style": "text",
                "button_label": "About us",
                "button_link": ""
              }
            }
          },
          "block_order": [
            "button_JYPmLB"
          ]
        }
      },
      "block_order": [
        "heading_group_qeddfV",
        "button_group_b7i8f6"
      ],
      "settings": {
        "horizontal_alignment": "center",
        "container_width": "md",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "banner_grid_CrXWPX": {
      "type": "banner-grid",
      "blocks": {
        "banner_grid_item_4Mq6nA": {
          "type": "_banner-grid-item",
          "settings": {
            "column_desktop": 2,
            "row_desktop": 1,
            "column_mobile": "2",
            "row_mobile": "1"
          },
          "blocks": {
            "grid_image_banner_9AHhxC": {
              "type": "_grid-image-banner",
              "settings": {
                "image": "",
                "spacing": "0px",
                "media_content_padding": "default",
                "horizontal_alignment": "left",
                "vertical_alignment": "top",
                "enable_overlay": false,
                "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
                "color_scheme": "",
                "enable_color_scheme_transition": false,
                "color_scheme_transition": ""
              },
              "blocks": {
                "heading_group_yBryeN": {
                  "type": "heading-group",
                  "settings": {
                    "page_title": false
                  },
                  "blocks": {
                    "heading_A9ri9A": {
                      "type": "_heading",
                      "settings": {
                        "heading": "Our Newest Collection",
                        "heading_size": "h6"
                      }
                    }
                  },
                  "block_order": [
                    "heading_A9ri9A"
                  ]
                },
                "button_group_i6d6Hp": {
                  "type": "button-group",
                  "settings": {
                    "horizontal_alignment": "inherit"
                  },
                  "blocks": {
                    "button_Ypy3aJ": {
                      "type": "_button",
                      "settings": {
                        "button_style": "text",
                        "button_label": "Shop Drinkware",
                        "button_link": ""
                      }
                    }
                  },
                  "block_order": [
                    "button_Ypy3aJ"
                  ]
                }
              },
              "block_order": [
                "heading_group_yBryeN",
                "button_group_i6d6Hp"
              ]
            }
          },
          "block_order": [
            "grid_image_banner_9AHhxC"
          ]
        },
        "banner_grid_item_RicdxV": {
          "type": "_banner-grid-item",
          "settings": {
            "column_desktop": 2,
            "row_desktop": 2,
            "column_mobile": "2",
            "row_mobile": "2"
          },
          "blocks": {
            "grid_image_banner_jaTqrL": {
              "type": "_grid-image-banner",
              "settings": {
                "image": "",
                "spacing": "0px",
                "media_content_padding": "default",
                "horizontal_alignment": "left",
                "vertical_alignment": "top",
                "enable_overlay": false,
                "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
                "color_scheme": "",
                "enable_color_scheme_transition": false,
                "color_scheme_transition": ""
              },
              "blocks": {
                "heading_group_mphX7P": {
                  "type": "heading-group",
                  "settings": {
                    "page_title": false
                  },
                  "blocks": {
                    "heading_iKprTP": {
                      "type": "_heading",
                      "settings": {
                        "heading": "Home & Decor",
                        "heading_size": "h6"
                      }
                    }
                  },
                  "block_order": [
                    "heading_iKprTP"
                  ]
                },
                "button_group_8nPknF": {
                  "type": "button-group",
                  "settings": {
                    "horizontal_alignment": "inherit"
                  },
                  "blocks": {
                    "button_9GfgrU": {
                      "type": "_button",
                      "settings": {
                        "button_style": "text",
                        "button_label": "Shop Home Decor",
                        "button_link": ""
                      }
                    }
                  },
                  "block_order": [
                    "button_9GfgrU"
                  ]
                }
              },
              "block_order": [
                "heading_group_mphX7P",
                "button_group_8nPknF"
              ]
            }
          },
          "block_order": [
            "grid_image_banner_jaTqrL"
          ]
        },
        "banner_grid_item_npwdhi": {
          "type": "_banner-grid-item",
          "settings": {
            "column_desktop": 2,
            "row_desktop": 1,
            "column_mobile": "2",
            "row_mobile": "1"
          },
          "blocks": {
            "grid_image_banner_XMVxP9": {
              "type": "_grid-image-banner",
              "settings": {
                "image": "",
                "spacing": "0px",
                "media_content_padding": "default",
                "horizontal_alignment": "left",
                "vertical_alignment": "top",
                "enable_overlay": false,
                "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
                "color_scheme": "",
                "enable_color_scheme_transition": false,
                "color_scheme_transition": ""
              },
              "blocks": {
                "heading_group_QFhhPR": {
                  "type": "heading-group",
                  "settings": {
                    "page_title": false
                  },
                  "blocks": {
                    "heading_nLiCTe": {
                      "type": "_heading",
                      "settings": {
                        "heading": "Our unique process",
                        "heading_size": "h6"
                      }
                    }
                  },
                  "block_order": [
                    "heading_nLiCTe"
                  ]
                },
                "button_group_P87iRX": {
                  "type": "button-group",
                  "settings": {
                    "horizontal_alignment": "inherit"
                  },
                  "blocks": {
                    "button_eW3kic": {
                      "type": "_button",
                      "settings": {
                        "button_style": "text",
                        "button_label": "About Us",
                        "button_link": ""
                      }
                    }
                  },
                  "block_order": [
                    "button_eW3kic"
                  ]
                }
              },
              "block_order": [
                "heading_group_QFhhPR",
                "button_group_P87iRX"
              ]
            }
          },
          "block_order": [
            "grid_image_banner_XMVxP9"
          ]
        },
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "Subheading",
            "heading": "Heading",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>This is an optional description. Use this text to provide context and guidance for the content below. For example, you could briefly describe features, inspiration or relevant promotions. Leave the text blank if you prefer to remove it.</p>",
            "button_label": "Button label",
            "button_link": ""
          }
        }
      },
      "block_order": [
        "banner_grid_item_4Mq6nA",
        "banner_grid_item_RicdxV",
        "banner_grid_item_npwdhi"
      ],
      "settings": {
        "container_type": "full",
        "height": "small",
        "grid_gap_vertical": "0px",
        "grid_gap_horizontal": "0px",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "0px",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "rich_text_Jw3DHm": {
      "type": "rich-text",
      "blocks": {
        "video_XBYx4A": {
          "type": "_video",
          "settings": {
            "video": "",
            "external_video": "",
            "enable_autoplay": false,
            "description": "",
            "button_style": "primary"
          }
        },
        "heading_group_G7j4de": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "subheading_HjCAAe": {
              "type": "_subheading",
              "disabled": true,
              "settings": {
                "subheading": "Subheading"
              }
            },
            "heading_GfaDen": {
              "type": "_heading",
              "settings": {
                "heading": "Our Brand Philosphy",
                "heading_size": "h3"
              }
            }
          },
          "block_order": [
            "subheading_HjCAAe",
            "heading_GfaDen"
          ]
        },
        "text_TLT7tc": {
          "type": "text",
          "settings": {
            "text": "<p>Each piece is lovingly hand-crafted and made to order. Here at Primavera, we search for the beauty in handmade imperfection.</p>",
            "font_style": "body"
          }
        },
        "button_group_nnCxej": {
          "type": "button-group",
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {
            "button_YyM7tR": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "About Us",
                "button_link": ""
              }
            }
          },
          "block_order": [
            "button_YyM7tR"
          ]
        }
      },
      "block_order": [
        "video_XBYx4A",
        "heading_group_G7j4de",
        "text_TLT7tc",
        "button_group_nnCxej"
      ],
      "settings": {
        "horizontal_alignment": "center",
        "container_width": "md",
        "color_scheme": "scheme-5",
        "enable_color_scheme_transition": true,
        "color_scheme_transition": "scheme-3",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "countdown_G49GUw": {
      "type": "countdown",
      "blocks": {
        "heading_group_pK33bR": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "heading_ygAq79": {
              "type": "_heading",
              "settings": {
                "heading": "Find Your Perfect Set",
                "heading_size": "h2"
              }
            }
          },
          "block_order": [
            "heading_ygAq79"
          ]
        },
        "text_kRE8p4": {
          "type": "text",
          "settings": {
            "text": "<p>For a limited time only, get 10% on all tableware sets.</p>",
            "font_style": "body"
          }
        },
        "button_group_zQ8nKb": {
          "type": "button-group",
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {
            "button_8jLPf9": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "Shop sets",
                "button_link": ""
              }
            }
          },
          "block_order": [
            "button_8jLPf9"
          ]
        },
        "countdown": {
          "type": "_countdown",
          "static": true,
          "settings": {
            "date": "2025-07-01 00:00",
            "hide_section": false,
            "font_style": "heading h4",
            "color_scheme": "",
            "opacity": 45,
            "enable_blur": true,
            "accessibility_description": "Countdown timer"
          }
        }
      },
      "block_order": [
        "heading_group_pK33bR",
        "text_kRE8p4",
        "button_group_zQ8nKb"
      ],
      "settings": {
        "desktop_layout": "split",
        "horizontal_alignment": "center",
        "vertical_alignment": "middle",
        "image": "",
        "enable_autoplay": false,
        "play_button_display": "always",
        "button_style": "text",
        "button_alignment": "top-left",
        "height": "small",
        "mobile_height": "adapt",
        "stack": "none",
        "spacing": "0px",
        "media_content_padding": "default",
        "container_type": "full",
        "enable_overlay": true,
        "overlay": "linear-gradient(180deg, rgba(255, 251, 236, 0.8) 34%, rgba(255, 251, 236, 0.5) 100%)",
        "color_scheme": "scheme-3",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "scheme-3",
        "show_top_border": false,
        "show_bottom_border": false,
        "padding_top": "0px",
        "padding_bottom": "0px"
      }
    },
    "featured_collection_TCixG3": {
      "type": "featured-collection",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "center",
            "subheading": "Explore our",
            "heading": "Drinkware",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>Our latest collection represents a return to our roots with hand-crafted, artisanal pieces that embrace the Japanese philosophy of wabi-sabi.</p>",
            "button_label": "Shop Drinkware",
            "button_link": ""
          }
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "inherit"
          }
        }
      },
      "settings": {
        "collection": "drinkware",
        "product_list": [],
        "columns_desktop": "4",
        "columns_mobile": "2",
        "layout_desktop": "slideshow",
        "container_type": "full",
        "product_limit": 7,
        "arrow_position": "below",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "scheme-3",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "scheme-1",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "image_banner_3pDJYc": {
      "type": "image-banner",
      "blocks": {
        "image_iNxXha": {
          "type": "image",
          "settings": {
            "image": "",
            "image_ratio": "1",
            "max_width": 400,
            "horizontal_alignment": "inherit",
            "link": "",
            "link_label": "",
            "product": "poetry-mug"
          }
        }
      },
      "block_order": [
        "image_iNxXha"
      ],
      "settings": {
        "image": "",
        "height": "medium",
        "mobile_height": "large",
        "stack": "none",
        "spacing": "0px",
        "media_content_padding": "var(--space-3xl)",
        "container_type": "full",
        "container_width": "md",
        "horizontal_alignment": "center",
        "vertical_alignment": "middle",
        "enable_banner_click": false,
        "enable_overlay": true,
        "overlay": "linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 100%)",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "0px",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "testimonials_zEktdw": {
      "type": "testimonials",
      "blocks": {
        "testimonial_gDLXAd": {
          "type": "_testimonial",
          "settings": {},
          "blocks": {
            "image": {
              "type": "image",
              "static": true,
              "settings": {
                "image": "",
                "image_ratio": "default",
                "max_width": 1400,
                "horizontal_alignment": "left",
                "link": "",
                "link_label": "",
                "product": ""
              }
            },
            "rating": {
              "type": "_rating",
              "static": true,
              "settings": {
                "rating": 5
              }
            },
            "single-heading": {
              "type": "_single-heading",
              "static": true,
              "settings": {
                "heading": "\"My kitchen finally looks complete with my new tableware!\"",
                "heading_size": "h6"
              }
            },
            "author": {
              "type": "text",
              "static": true,
              "settings": {
                "text": "<p>Adrienne</p>",
                "font_style": "caption"
              }
            },
            "author-secondary": {
              "type": "text",
              "disabled": true,
              "static": true,
              "settings": {
                "text": "<p>Author title</p>",
                "font_style": "caption"
              }
            }
          },
          "block_order": []
        },
        "testimonial_MiT8jM": {
          "type": "_testimonial",
          "settings": {},
          "blocks": {
            "image": {
              "type": "image",
              "static": true,
              "settings": {
                "image": "",
                "image_ratio": "default",
                "max_width": 1400,
                "horizontal_alignment": "left",
                "link": "",
                "link_label": "",
                "product": "custom-engraved-mugs"
              }
            },
            "rating": {
              "type": "_rating",
              "static": true,
              "settings": {
                "rating": 5
              }
            },
            "single-heading": {
              "type": "_single-heading",
              "static": true,
              "settings": {
                "heading": "“I love my new mug, and I'm proud to support a great cause too.\"",
                "heading_size": "h6"
              }
            },
            "author": {
              "type": "text",
              "static": true,
              "settings": {
                "text": "<p>Alyssa</p>",
                "font_style": "caption"
              }
            },
            "author-secondary": {
              "type": "text",
              "disabled": true,
              "static": true,
              "settings": {
                "text": "<p>Author title</p>",
                "font_style": "caption"
              }
            }
          },
          "block_order": []
        },
        "testimonial_hAicTh": {
          "type": "_testimonial",
          "settings": {},
          "blocks": {
            "image": {
              "type": "image",
              "static": true,
              "settings": {
                "image": "",
                "image_ratio": "2 / 3",
                "max_width": 1400,
                "horizontal_alignment": "left",
                "link": "",
                "link_label": "",
                "product": ""
              }
            },
            "rating": {
              "type": "_rating",
              "static": true,
              "settings": {
                "rating": 5
              }
            },
            "single-heading": {
              "type": "_single-heading",
              "static": true,
              "settings": {
                "heading": "“Each piece is truly a unique work of art!\"",
                "heading_size": "h6"
              }
            },
            "author": {
              "type": "text",
              "static": true,
              "settings": {
                "text": "<p>Grace</p>",
                "font_style": "caption"
              }
            },
            "author-secondary": {
              "type": "text",
              "disabled": true,
              "static": true,
              "settings": {
                "text": "<p>Author title</p>",
                "font_style": "caption"
              }
            }
          },
          "block_order": []
        },
        "testimonial_36HpqW": {
          "type": "_testimonial",
          "settings": {},
          "blocks": {
            "image": {
              "type": "image",
              "static": true,
              "settings": {
                "image": "",
                "image_ratio": "1",
                "max_width": 1400,
                "horizontal_alignment": "left",
                "link": "",
                "link_label": "",
                "product": "lake-set"
              }
            },
            "rating": {
              "type": "_rating",
              "static": true,
              "settings": {
                "rating": 5
              }
            },
            "single-heading": {
              "type": "_single-heading",
              "static": true,
              "settings": {
                "heading": "\"My guests all loved my new tableware set!\"",
                "heading_size": "h6"
              }
            },
            "author": {
              "type": "text",
              "static": true,
              "settings": {
                "text": "<p>Janice</p>",
                "font_style": "caption"
              }
            },
            "author-secondary": {
              "type": "text",
              "disabled": true,
              "static": true,
              "settings": {
                "text": "<p>Author title</p>",
                "font_style": "caption"
              }
            }
          },
          "block_order": []
        },
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "",
            "heading": "What Our Customers Say",
            "page_title": false,
            "heading_size": "h3",
            "text": "",
            "button_label": "",
            "button_link": ""
          }
        }
      },
      "block_order": [
        "testimonial_gDLXAd",
        "testimonial_MiT8jM",
        "testimonial_hAicTh",
        "testimonial_36HpqW"
      ],
      "settings": {
        "columns_desktop": "4",
        "columns_mobile": "1",
        "column_behavior": "slideshow",
        "container_type": "max",
        "alignment_columns": "center",
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "split_card_3iGggU": {
      "type": "split-card",
      "blocks": {
        "block_rich_text_gyzm9Q": {
          "type": "_block-rich-text",
          "settings": {
            "vertical_alignment": "middle",
            "horizontal_alignment": "left",
            "container_width": "xxs",
            "color_scheme": "scheme-6",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": "",
            "padding_top": "default",
            "padding_bottom": "default"
          },
          "blocks": {
            "heading_group_cAQxPJ": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "subheading_MJmmkE": {
                  "type": "_subheading",
                  "settings": {
                    "subheading": "Find out how we are"
                  }
                },
                "heading_GjejAV": {
                  "type": "_heading",
                  "settings": {
                    "heading": "Giving Back to the Community",
                    "heading_size": "h3"
                  }
                }
              },
              "block_order": [
                "subheading_MJmmkE",
                "heading_GjejAV"
              ]
            },
            "text_yqBqrT": {
              "type": "text",
              "settings": {
                "text": "<p>An additional 10% of the proceeds from our best-selling Poetry Mug go to charities that supp</p>",
                "font_style": "body"
              }
            },
            "button_group_BNMP6i": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button_E6VD4U": {
                  "type": "_button",
                  "settings": {
                    "button_style": "primary",
                    "button_label": "Our Giving Program",
                    "button_link": ""
                  }
                }
              },
              "block_order": [
                "button_E6VD4U"
              ]
            }
          },
          "block_order": [
            "heading_group_cAQxPJ",
            "text_yqBqrT",
            "button_group_BNMP6i"
          ]
        },
        "shoppable_banner_CgEDyN": {
          "type": "_shoppable-banner",
          "settings": {
            "image": "",
            "enable_autoplay": false,
            "play_button_display": "always",
            "button_style": "text",
            "button_alignment": "top-left",
            "height": "adapt",
            "mobile_height": "adapt",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "horizontal_alignment": "left",
            "vertical_alignment": "bottom",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "mini_product_WxE8fK": {
              "type": "mini-product",
              "settings": {
                "product": "poetry-mug",
                "style": "card",
                "color_scheme": ""
              }
            }
          },
          "block_order": [
            "mini_product_WxE8fK"
          ]
        }
      },
      "block_order": [
        "block_rich_text_gyzm9Q",
        "shoppable_banner_CgEDyN"
      ],
      "settings": {
        "container_type": "max",
        "border_radius": "blocks",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false,
        "show_borders": false
      }
    },
    "featured_collection_8TeADq": {
      "type": "featured-collection",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "center",
            "subheading": "Discover our",
            "heading": "Dinnerware",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>Each piece in our dinneware collection is a testament to the artistry and craftsmanship that goes into creating unique, one-of-a-kind dinnerware. With its organic shapes and subtle imperfections, this collection brings a touch of nature and authenticity to every meal.</p>",
            "button_label": "Shop Dinnerware",
            "button_link": ""
          }
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "inherit"
          }
        }
      },
      "settings": {
        "collection": "dinnerware",
        "product_list": [],
        "columns_desktop": "4",
        "columns_mobile": "2",
        "layout_desktop": "slideshow",
        "container_type": "full",
        "product_limit": 4,
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "scheme-3",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "split_banner_bjWpqR": {
      "type": "split-banner",
      "blocks": {
        "image_banner_Wj7NtT": {
          "type": "_image-banner",
          "settings": {
            "image": "",
            "height": "adapt",
            "mobile_height": "adapt",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          }
        },
        "image_banner_6NBKHN": {
          "type": "_image-banner",
          "settings": {
            "image": "",
            "height": "adapt",
            "mobile_height": "adapt",
            "stack": "always",
            "spacing": "var(--space-xl)",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "text_XT6K63": {
              "type": "text",
              "settings": {
                "text": "<p>Featuring our <a href=\"/products/marine-set\" title=\"Marine Set\">Marine Set</a></p>",
                "font_style": "body"
              }
            }
          },
          "block_order": [
            "text_XT6K63"
          ]
        }
      },
      "block_order": [
        "image_banner_Wj7NtT",
        "image_banner_6NBKHN"
      ],
      "settings": {
        "show_top_border": false,
        "show_bottom_border": false,
        "enable_transparent_header": false
      }
    },
    "blog_posts_YJxLGW": {
      "type": "blog-posts",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "Follow our",
            "heading": "Recent Journal Entries",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>Get sneak previews of our newest products and tips on how to cultivate your own creative practice in our journal.</p>",
            "button_label": "View Journal",
            "button_link": ""
          }
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "inherit"
          }
        }
      },
      "settings": {
        "blog": "journal",
        "product_limit": 3,
        "columns_desktop": "3",
        "columns_mobile": "1",
        "layout_desktop": "slideshow",
        "container_type": "max",
        "arrow_position": "below",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    }
  },
  "order": [
    "split_banner_jWmCq9",
    "rich_text_3T4bi8",
    "banner_grid_CrXWPX",
    "rich_text_Jw3DHm",
    "countdown_G49GUw",
    "featured_collection_TCixG3",
    "image_banner_3pDJYc",
    "testimonials_zEktdw",
    "split_card_3iGggU",
    "featured_collection_8TeADq",
    "split_banner_bjWpqR",
    "blog_posts_YJxLGW"
  ]
}
```

</details>

<details>

<summary>Gloss</summary>

```
{
  "sections": {
    "split-card": {
      "type": "split-card",
      "blocks": {
        "image-banner": {
          "type": "_image-banner",
          "settings": {
            "height": "medium",
            "mobile_height": "large",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "var(--space-l)",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "bottom",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-1",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "rating": {
              "type": "rating",
              "name": "t:rating",
              "settings": {
                "rating": 5,
                "text": "<p>10,000+ happy customers</p>",
                "font_style": "caption-xs"
              }
            },
            "heading-group": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "subheading": {
                  "type": "_subheading",
                  "disabled": true,
                  "settings": {
                    "subheading": "New Collection"
                  }
                },
                "heading": {
                  "type": "_heading",
                  "settings": {
                    "heading": "Beauty Essentials",
                    "heading_size": "h3"
                  }
                }
              },
              "block_order": [
                "subheading",
                "heading"
              ]
            },
            "mini-product": {
              "type": "mini-product",
              "name": "t:mini-product",
              "disabled": true,
              "settings": {
                "style": "card",
                "color_scheme": ""
              }
            },
            "button-group": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button": {
                  "type": "_button",
                  "settings": {
                    "button_style": "primary",
                    "button_label": "Shop All"
                  }
                }
              },
              "block_order": [
                "button"
              ]
            }
          },
          "block_order": [
            "rating",
            "heading-group",
            "mini-product",
            "button-group"
          ]
        },
        "video-banner": {
          "type": "_video-banner",
          "settings": {
            "enable_autoplay": true,
            "play_button_display": "hover_focus",
            "button_style": "text",
            "button_alignment": "middle-center",
            "height": "medium",
            "mobile_height": "medium",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "default",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "middle",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          }
        }
      },
      "block_order": [
        "image-banner",
        "video-banner"
      ],
      "settings": {
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "0px",
        "show_top_border": false,
        "show_bottom_border": false,
        "show_borders": false
      }
    },
    "rich-text": {
      "type": "rich-text",
      "blocks": {
        "heading-group": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "subheading": {
              "type": "_subheading",
              "settings": {
                "subheading": "Our Philosophy"
              }
            },
            "heading": {
              "type": "_heading",
              "settings": {
                "heading": "Expertly-crafted formulas that blend high-performance natural ingredients with indulgent textures.",
                "heading_size": "h3"
              }
            }
          },
          "block_order": [
            "subheading",
            "heading"
          ]
        }
      },
      "block_order": [
        "heading-group"
      ],
      "settings": {
        "horizontal_alignment": "center",
        "container_width": "md",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "var(--space-xs)",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "featured-collection": {
      "type": "featured-collection",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "",
            "heading": "Daily Essentials",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>Your go-to elixirs for daily radiance. Combining skin-loving essentials that nourish, hydrate, and protect, these must-haves are packed with powerful yet gentle ingredients, ensuring your skin stays fresh, healthy, and naturally glowing from morning to night.</p>",
            "button_label": "Shop Now"
          }
        },
        "button-group": {
          "type": "button-group",
          "disabled": true,
          "static": true,
          "settings": {
            "horizontal_alignment": "center"
          },
          "blocks": {
            "button": {
              "type": "_button",
              "name": "t:button",
              "settings": {
                "button_style": "primary",
                "button_label": "Shop Bestsellers"
              }
            }
          },
          "block_order": [
            "button"
          ]
        }
      },
      "settings": {
        "columns_desktop": "4",
        "columns_mobile": "2",
        "layout_desktop": "slideshow",
        "container_type": "max",
        "product_limit": 25,
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "var(--space-m)",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      },
      "block_order": []
    },
    "scrolling-content": {
      "type": "scrolling-content",
      "blocks": {
        "text": {
          "type": "text",
          "settings": {
            "text": "<p>Upcycled Ingredients</p>"
          }
        },
        "image": {
          "type": "image",
          "settings": {
            "max_width": 24,
            "link": ""
          }
        },
        "text-2": {
          "type": "text",
          "settings": {
            "text": "<p>Vegan & Cruelty-Free</p>"
          }
        },
        "image-2": {
          "type": "image",
          "settings": {
            "max_width": 24,
            "link": ""
          }
        },
        "text-3": {
          "type": "text",
          "settings": {
            "text": "<p>Recycled Packaging</p>"
          }
        },
        "image-3": {
          "type": "image",
          "settings": {
            "max_width": 24,
            "link": ""
          }
        }
      },
      "block_order": [
        "text",
        "image",
        "text-2",
        "image-2",
        "text-3",
        "image-3"
      ],
      "settings": {
        "speed": 3,
        "scroll_direction": "left",
        "horizontal_gap": 10,
        "font_size": 16,
        "color_scheme": "scheme-3",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "scheme-3",
        "padding_top": "var(--space-2xs)",
        "padding_bottom": "var(--space-2xs)",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "split-banner-1": {
      "type": "split-banner",
      "blocks": {
        "image-banner": {
          "type": "_image-banner",
          "name": "t:image-banner",
          "settings": {
            "height": "medium",
            "mobile_height": "adapt",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "var(--space-l)",
            "container_width": "xxs",
            "horizontal_alignment": "left",
            "vertical_alignment": "bottom",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-2",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "image": {
              "type": "image",
              "name": "t:image",
              "disabled": true,
              "settings": {
                "image_ratio": "default",
                "max_width": 140,
                "horizontal_alignment": "inherit",
                "link_label": "Curl & Volume Mascara"
              }
            },
            "text": {
              "type": "text",
              "settings": {
                "font_style": "body"
              }
            }
          },
          "block_order": [
            "image",
            "text"
          ]
        },
        "image-banner-2": {
          "type": "_image-banner",
          "name": "t:image-banner",
          "settings": {
            "height": "medium",
            "mobile_height": "adapt",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "var(--space-l)",
            "container_width": "md",
            "horizontal_alignment": "center",
            "vertical_alignment": "bottom",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-1",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "heading-group": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "subheading": {
                  "type": "_subheading",
                  "settings": {
                    "subheading": "Online Exclusive"
                  }
                },
                "heading": {
                  "type": "_heading",
                  "settings": {
                    "heading": "Take 15% Off All Makeup",
                    "heading_size": "h3"
                  }
                }
              },
              "block_order": [
                "subheading",
                "heading"
              ]
            },
            "discount-code": {
              "type": "discount-code",
              "name": "t:discount-code",
              "settings": {
                "discount_code": "MAKEUP15"
              }
            }
          },
          "block_order": [
            "heading-group",
            "discount-code"
          ]
        }
      },
      "block_order": [
        "image-banner",
        "image-banner-2"
      ],
      "name": "t:split-banner",
      "settings": {
        "show_top_border": false,
        "show_bottom_border": false,
        "show_block_borders": false,
        "enable_transparent_header": false
      }
    },
    "collection-list": {
      "type": "collection-list",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "Subheading",
            "heading": "Collection list",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>This is an optional description. Use this text to provide context and guidance for the content below. For example, you could briefly describe features, inspiration or relevant promotions. Leave the text blank if you prefer to remove it.</p>",
            "button_label": "Button label",
            "button_link": ""
          }
        },
        "button-group": {
          "type": "button-group",
          "disabled": true,
          "static": true,
          "settings": {
            "horizontal_alignment": "center"
          },
          "blocks": {
            "button": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "Button label",
                "button_link": ""
              }
            }
          },
          "block_order": [
            "button"
          ]
        }
      },
      "name": "t:collection-list",
      "settings": {
        "columns_desktop": "4",
        "columns_mobile": "2",
        "layout_desktop": "slideshow",
        "container_type": "max",
        "horizontal_alignment": "center",
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      },
      "block_order": []
    },
    "logo-list": {
      "type": "logo-list",
      "blocks": {
        "logo": {
          "type": "_logo",
          "name": "t:logo",
          "settings": {
            "link": ""
          }
        },
        "logo-2": {
          "type": "_logo",
          "name": "t:logo",
          "settings": {
            "link": ""
          }
        },
        "logo-3": {
          "type": "_logo",
          "name": "t:logo",
          "settings": {
            "link": ""
          }
        },
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "center",
            "subheading": "",
            "heading": "As Seen In",
            "page_title": false,
            "heading_size": "h2",
            "text": "",
            "button_label": "",
            "button_link": ""
          }
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "center"
          },
          "blocks": {
            "button": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "",
                "button_link": ""
              }
            }
          },
          "block_order": [
            "button"
          ]
        }
      },
      "block_order": [
        "logo",
        "logo-2",
        "logo-3"
      ],
      "settings": {
        "layout": "autoscroll",
        "speed": 2,
        "scroll_direction": "right",
        "size": 52,
        "spacing": "var(--space-xl)",
        "horizontal_alignment": "center",
        "container_type": "max",
        "color_scheme": "scheme-5",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "featured-product": {
      "type": "featured-product",
      "blocks": {
        "pdp-product-information": {
          "type": "_pdp-product-information",
          "static": true,
          "settings": {
            "horizontal_alignment": "left",
            "vertical_alignment": "top",
            "container_width": "sm",
            "padding_top": "var(--space-xl)",
            "padding_bottom": "var(--space-xl)"
          },
          "blocks": {
            "pdp-badges": {
              "type": "_pdp-badges",
              "settings": {
                "button_style": "primary"
              }
            },
            "pdp-title": {
              "type": "_pdp-title",
              "settings": {
                "heading_size": "h2",
                "enable_share": false,
                "share_color_scheme": ""
              }
            },
            "pdp-subtitle": {
              "type": "_pdp-subtitle",
              "settings": {
                "text": "{{ closest.product.metafields.descriptors.subtitle.value }}",
                "font_style": "caption"
              }
            },
            "pdp-price": {
              "type": "_pdp-price",
              "settings": {
                "font_style": "caption"
              }
            },
            "pdp-description": {
              "type": "_pdp-description",
              "settings": {
                "text": "{{ closest.product.description }}",
                "enable_truncation": true,
                "word_limit": 24,
                "title": "{{ closest.product.title }}"
              }
            },
            "pdp-variant-picker": {
              "type": "_pdp-variant-picker",
              "settings": {
                "variant_picker_style": "buttons",
                "swatch_style": "default",
                "variant_images": "",
                "option_1": "",
                "option_1_page": "",
                "option_1_label": "icon",
                "option_2": "",
                "option_2_page": "",
                "option_2_label": "icon",
                "option_3": "",
                "option_3_page": "",
                "option_3_label": "icon"
              }
            },
            "pdp-line-item": {
              "type": "_pdp-line-item",
              "name": "t:line-item-property",
              "settings": {
                "type": "checkbox",
                "field_label": "Use recycled packaging",
                "text_type": "text",
                "enable_character_limit": false,
                "character_limit": 40,
                "checkbox_checked": "Yes",
                "checkbox_unchecked": "No",
                "options": "Option 1, Option 2",
                "required": false
              }
            },
            "pdp-buy-buttons": {
              "type": "_pdp-buy-buttons",
              "settings": {
                "show_dynamic_checkout": false,
                "show_quantity_selector": true,
                "show_gift_card_recipient": true
              }
            },
            "pdp-icon-with-text": {
              "type": "_pdp-icon-with-text",
              "settings": {
                "icon": "check",
                "icon_size": "icon--m",
                "max_width": 16,
                "text": "<p>Suitable for all skin types</p>",
                "font_style": "caption",
                "layout": "row",
                "horizontal_alignment": "left",
                "vertical_alignment": "middle",
                "padding": "0px",
                "gap": "var(--space-2xs)",
                "show_borders": false,
                "color_scheme": ""
              }
            },
            "pdp-icon-with-text-2": {
              "type": "_pdp-icon-with-text",
              "settings": {
                "icon": "heart",
                "icon_size": "icon--m",
                "max_width": 16,
                "text": "<p>100% Vegan</p>",
                "font_style": "caption",
                "layout": "row",
                "horizontal_alignment": "left",
                "vertical_alignment": "middle",
                "padding": "0px",
                "gap": "var(--space-2xs)",
                "show_borders": false,
                "color_scheme": ""
              }
            },
            "pdp-icon-with-text-3": {
              "type": "_pdp-icon-with-text",
              "settings": {
                "icon": "globe",
                "icon_size": "icon--m",
                "max_width": 16,
                "text": "<p>Sustainably Developed</p>",
                "font_style": "caption",
                "layout": "row",
                "horizontal_alignment": "left",
                "vertical_alignment": "middle",
                "padding": "0px",
                "gap": "var(--space-2xs)",
                "show_borders": false,
                "color_scheme": ""
              }
            },
            "pdp-collapsible": {
              "type": "_pdp-collapsible",
              "settings": {
                "heading": "How to Use",
                "font_style": "caption",
                "page": "",
                "open_by_default": false
              }
            },
            "pdp-collapsible-2": {
              "type": "_pdp-collapsible",
              "settings": {
                "heading": "Ingredients",
                "font_style": "caption",
                "page": "",
                "open_by_default": false
              }
            },
            "pdp-icon-with-text-4": {
              "type": "_pdp-icon-with-text",
              "settings": {
                "icon": "none",
                "icon_size": "icon--s",
                "max_width": 32,
                "text": "<p>1% of all sales goes to the <a href=\"#\" title=\"About\">Primavera Impact fund</a></p>",
                "font_style": "body text-s",
                "layout": "row",
                "horizontal_alignment": "left",
                "vertical_alignment": "middle",
                "padding": "var(--space-2xs)",
                "gap": "var(--space-2xs)",
                "show_borders": false,
                "color_scheme": "scheme-5"
              }
            }
          },
          "block_order": [
            "pdp-badges",
            "pdp-title",
            "pdp-subtitle",
            "pdp-price",
            "pdp-description",
            "pdp-variant-picker",
            "pdp-line-item",
            "pdp-buy-buttons",
            "pdp-icon-with-text",
            "pdp-icon-with-text-2",
            "pdp-icon-with-text-3",
            "pdp-collapsible",
            "pdp-collapsible-2",
            "pdp-icon-with-text-4"
          ]
        }
      },
      "settings": {
        "mobile_max_width": "100%",
        "enable_zoom": false,
        "enable_autoplay": true,
        "media_color_scheme": "",
        "spacing": "var(--space-xl)",
        "button_style": "primary",
        "image_aspect_ratio": "adapt",
        "animation_style": "fade",
        "counter_style": "hidden",
        "enable_looping": true,
        "autoselect_first_variant": true,
        "color_scheme": "",
        "show_top_border": false,
        "show_bottom_border": false,
        "show_block_borders": false,
        "enable_transparent_header": false
      },
      "block_order": []
    },
    "video-reels": {
      "type": "video-reels",
      "blocks": {
        "video-reels-video": {
          "type": "_video-reels-video",
          "settings": {
            "creator_name": "@sandyb92",
            "creator_link": "#",
            "video_ratio": "9 / 16",
            "color_scheme": "scheme-2",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)"
          },
          "blocks": {
            "product": {
              "type": "mini-product",
              "static": true,
              "settings": {
                "style": "card",
                "color_scheme": ""
              }
            }
          },
          "block_order": []
        },
        "video-reels-video-2": {
          "type": "_video-reels-video",
          "settings": {
            "creator_name": "@dewydiary",
            "creator_link": "",
            "video_ratio": "9 / 16",
            "color_scheme": "scheme-2",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)"
          },
          "blocks": {
            "product": {
              "type": "mini-product",
              "static": true,
              "settings": {
                "style": "card",
                "color_scheme": ""
              }
            }
          },
          "block_order": []
        },
        "video-reels-video-3": {
          "type": "_video-reels-video",
          "settings": {
            "creator_name": "@beautybylou",
            "creator_link": "",
            "video_ratio": "9 / 16",
            "color_scheme": "scheme-2",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)"
          },
          "blocks": {
            "product": {
              "type": "mini-product",
              "static": true,
              "settings": {
                "style": "card",
                "color_scheme": ""
              }
            }
          },
          "block_order": []
        },
        "video-reels-video-4": {
          "type": "_video-reels-video",
          "settings": {
            "creator_name": "@opal.and.olive",
            "creator_link": "",
            "video_ratio": "9 / 16",
            "color_scheme": "scheme-2",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)"
          },
          "blocks": {
            "product": {
              "type": "mini-product",
              "static": true,
              "settings": {
                "style": "card",
                "color_scheme": ""
              }
            }
          },
          "block_order": []
        },
        "video-reels-video-5": {
          "type": "_video-reels-video",
          "settings": {
            "creator_name": "@sheersunday",
            "creator_link": "",
            "video_ratio": "9 / 16",
            "color_scheme": "scheme-2",
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)"
          },
          "blocks": {
            "product": {
              "type": "mini-product",
              "static": true,
              "settings": {
                "style": "card",
                "color_scheme": ""
              }
            }
          },
          "block_order": []
        },
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "center",
            "subheading": "Subheading",
            "heading": "Video reels",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>This is an optional description. Use this text to provide context and guidance for the content below. For example, you could briefly describe features, inspiration or relevant promotions. Leave the text blank if you prefer to remove it.</p>",
            "button_label": "Button label",
            "button_link": ""
          }
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "inherit"
          }
        }
      },
      "block_order": [
        "video-reels-video",
        "video-reels-video-2",
        "video-reels-video-3",
        "video-reels-video-4",
        "video-reels-video-5"
      ],
      "name": "t:video-reels",
      "settings": {
        "enable_autoplay": true,
        "container_type": "max",
        "grid_gap_horizontal": "default",
        "arrow_position": "overlay",
        "counter_style": "hidden",
        "button_style": "primary",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": true,
        "show_bottom_border": false
      }
    },
    "split-banner-2": {
      "type": "split-banner",
      "blocks": {
        "image-banner": {
          "type": "_image-banner",
          "settings": {
            "height": "large",
            "mobile_height": "large",
            "stack": "none",
            "spacing": "0px",
            "media_content_padding": "var(--space-m)",
            "container_width": "xxs",
            "horizontal_alignment": "left",
            "vertical_alignment": "bottom",
            "enable_banner_click": false,
            "enable_overlay": false,
            "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
            "color_scheme": "scheme-1",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": ""
          },
          "blocks": {
            "text": {
              "type": "text",
              "settings": {
                "text": "<p>Isa Kim, Celebrity MUA <br/><a href=\"#\" title=\"#\">@isaglobal</a></p>",
                "font_style": "body text-s"
              }
            },
            "mini-product": {
              "type": "mini-product",
              "disabled": true,
              "settings": {
                "style": "card",
                "color_scheme": ""
              }
            }
          },
          "block_order": [
            "text",
            "mini-product"
          ]
        },
        "block-rich-text": {
          "type": "_block-rich-text",
          "settings": {
            "vertical_alignment": "middle",
            "horizontal_alignment": "center",
            "container_width": "md",
            "color_scheme": "scheme-5",
            "enable_color_scheme_transition": false,
            "color_scheme_transition": "",
            "padding_top": "default",
            "padding_bottom": "default"
          },
          "blocks": {
            "badges": {
              "type": "badges",
              "name": "t:badges",
              "settings": {
                "badges_style": "secondary",
                "badges": "Education"
              }
            },
            "heading-group": {
              "type": "heading-group",
              "settings": {
                "page_title": false
              },
              "blocks": {
                "heading": {
                  "type": "_heading",
                  "settings": {
                    "heading": "Beauty Masterclass",
                    "heading_size": "h2"
                  }
                }
              },
              "block_order": [
                "heading"
              ]
            },
            "text-2": {
              "type": "text",
              "settings": {
                "text": "<p>Join Isa Kim and Primavera Founder, Ani Johnson, on November 6 2026 at <a href=\"#\" title=\"About\">Primavera Beverly Hills</a> for a live Beauty Masterclass. Intermediate to advanced.</p>",
                "font_style": "body"
              }
            },
            "countdown": {
              "type": "_countdown",
              "settings": {
                "date": "2026-02-26",
                "hide_section": true,
                "font_style": "heading h3",
                "color_scheme": "scheme-1",
                "opacity": 0,
                "enable_blur": true,
                "accessibility_description": "Countdown timer"
              }
            },
            "button-group": {
              "type": "button-group",
              "settings": {
                "horizontal_alignment": "inherit"
              },
              "blocks": {
                "button": {
                  "type": "_button",
                  "settings": {
                    "button_style": "primary",
                    "button_label": "Register Now"
                  }
                }
              },
              "block_order": [
                "button"
              ]
            }
          },
          "block_order": [
            "badges",
            "heading-group",
            "text-2",
            "countdown",
            "button-group"
          ]
        }
      },
      "block_order": [
        "image-banner",
        "block-rich-text"
      ],
      "settings": {
        "show_top_border": false,
        "show_bottom_border": false,
        "show_block_borders": false,
        "enable_transparent_header": false
      }
    },
    "section-header": {
      "type": "section-header",
      "settings": {
        "layout_header": "center",
        "subheading": "Product Spotlight: Gloss Moisturizer",
        "heading": "“97% of customers saw results after just 3 weeks.”",
        "page_title": false,
        "heading_size": "h1",
        "count": "",
        "text": "",
        "button_label": "",
        "button_link": "",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "before-after": {
      "type": "before-after",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "disabled": true,
          "static": true,
          "settings": {
            "layout_header": "left",
            "subheading": "Subheading",
            "heading": "Heading",
            "page_title": false,
            "heading_size": "h2",
            "text": "<p>This is an optional description. Use this text to provide context and guidance for the content below. For example, you could briefly describe features, inspiration or relevant promotions. Leave the text blank if you prefer to remove it.</p>",
            "button_label": "Button label",
            "button_link": ""
          }
        },
        "before": {
          "type": "_before",
          "static": true,
          "settings": {
            "label": "Before"
          }
        },
        "after": {
          "type": "_after",
          "static": true,
          "settings": {
            "label": "After"
          }
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "inherit"
          }
        }
      },
      "settings": {
        "badges_style": "text",
        "container_type": "max",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      },
      "block_order": []
    },
    "rich-text-columns": {
      "type": "rich-text-columns",
      "blocks": {
        "rich-text-column": {
          "type": "_rich-text-column",
          "settings": {
            "horizontal_alignment": "left"
          },
          "blocks": {
            "text": {
              "type": "text",
              "settings": {
                "text": "<p>At Primavera, we believe in blending nature with science for skincare that’s both effective and gentle. Our <a href=\"#\" title=\"Gloss Moisturizer\">Gloss Moisturizer</a> combines squalane (from vegetable sources), hyaluronic acid (vegan), and niacinamide (Vitamin B3) to deliver immediate hydration and nourishment. The lightweight gel-cream formula absorbs quickly, ensuring your skin feels soft, smooth, and replenished without any greasy residue. Whether used in the morning or at night, Gloss Moisturizer locks in moisture that lasts all day.<br/><br/>Formulated with powerful ingredients like hibiscus extract and peach blossom extract, this moisturizer is designed to revitalize and soothe the skin. The addition of sea kelp extract helps protect and maintain a healthy skin barrier, while ascorbyl palmitate (a stable form of Vitamin C) promotes a bright, glowing complexion. Together, these ingredients work to plump, smooth, and visibly reduce fine lines, keeping your skin radiant and healthy.</p>",
                "font_style": "body"
              }
            },
            "mini-product": {
              "type": "mini-product",
              "disabled": true,
              "settings": {
                "style": "card",
                "color_scheme": "scheme-5"
              }
            }
          },
          "block_order": [
            "text",
            "mini-product"
          ]
        },
        "rich-text-column-2": {
          "type": "_rich-text-column",
          "settings": {
            "horizontal_alignment": "left"
          },
          "blocks": {
            "text-2": {
              "type": "text",
              "settings": {
                "text": "<p>With a commitment to being mindful, Gloss Moisturizer is crafted using vegan, plant-derived, and upcycled ingredients. It’s dermatologist-tested and free from harsh chemicals, making it ideal for even the most sensitive skin. Vegetable glycerin and xanthan gum enhance moisture retention, while tocopherol (Vitamin E) provides antioxidant protection, leaving your skin calm and balanced.<br/><br/>In a clinical study, 97% of users saw visible results after just three weeks, with smoother, more hydrated skin. Backed by science and formulated with natural, plant-derived ingredients, Gloss Moisturizer is your new go-to for healthy, hydrated skin—day and night.</p>",
                "font_style": "body"
              }
            },
            "text-3": {
              "type": "text",
              "settings": {
                "text": "<p>Shop now:</p>",
                "font_style": "caption"
              }
            },
            "mini-product-2": {
              "type": "mini-product",
              "settings": {
                "style": "card",
                "color_scheme": "scheme-5"
              }
            }
          },
          "block_order": [
            "text-2",
            "text-3",
            "mini-product-2"
          ]
        }
      },
      "block_order": [
        "rich-text-column",
        "rich-text-column-2"
      ],
      "settings": {
        "vertical_alignment": "top",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "image-hotspot": {
      "type": "image-hotspot",
      "blocks": {
        "heading-group": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "subheading": {
              "type": "_subheading",
              "name": "t:subheading",
              "settings": {
                "subheading": "Key Ingredients"
              }
            },
            "heading": {
              "type": "_heading",
              "settings": {
                "heading": "Gloss Moisturizer: Blending Nature With Science ",
                "heading_size": "h4"
              }
            }
          },
          "block_order": [
            "subheading",
            "heading"
          ]
        },
        "mini-product": {
          "type": "mini-product",
          "name": "t:mini-product",
          "disabled": true,
          "settings": {
            "style": "card",
            "color_scheme": "scheme-1"
          }
        },
        "hotspots": {
          "type": "_hotspots",
          "static": true,
          "blocks": {
            "hotspot-content": {
              "type": "_hotspot-content",
              "settings": {
                "label": "Hibiscus",
                "link": "",
                "horizontal_position": 37,
                "vertical_position": 22,
                "mobile_horizontal_position": 42,
                "mobile_vertical_position": 63
              }
            },
            "hotspot-content-2": {
              "type": "_hotspot-content",
              "settings": {
                "label": "Hyaluronic acid",
                "link": "",
                "horizontal_position": 66,
                "vertical_position": 30,
                "mobile_horizontal_position": 53,
                "mobile_vertical_position": 33
              }
            },
            "hotspot-content-3": {
              "type": "_hotspot-content",
              "name": "t:content-hotspot",
              "settings": {
                "label": "Niacinamide",
                "link": "",
                "horizontal_position": 29,
                "vertical_position": 50,
                "mobile_horizontal_position": 70,
                "mobile_vertical_position": 48
              }
            },
            "hotspot-content-4": {
              "type": "_hotspot-content",
              "name": "t:content-hotspot",
              "settings": {
                "label": "Peach Blossom",
                "link": "",
                "horizontal_position": 52,
                "vertical_position": 70,
                "mobile_horizontal_position": 38,
                "mobile_vertical_position": 12
              }
            },
            "hotspot-content-5": {
              "type": "_hotspot-content",
              "name": "t:content-hotspot",
              "settings": {
                "label": "Kelp",
                "link": "",
                "horizontal_position": 76,
                "vertical_position": 85,
                "mobile_horizontal_position": 54,
                "mobile_vertical_position": 80
              }
            }
          },
          "block_order": [
            "hotspot-content",
            "hotspot-content-2",
            "hotspot-content-3",
            "hotspot-content-4",
            "hotspot-content-5"
          ]
        }
      },
      "block_order": [
        "heading-group",
        "mini-product"
      ],
      "name": "t:image-hotspot",
      "settings": {
        "stack": "mobile",
        "spacing": "0px",
        "media_content_padding": "var(--space-m)",
        "container_type": "max",
        "container_width": "md",
        "horizontal_alignment": "left",
        "vertical_alignment": "bottom",
        "enable_overlay": false,
        "overlay": "linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0) 100%)",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "padding_top": "0px",
        "padding_bottom": "0px",
        "show_top_border": false,
        "show_bottom_border": false
      }
    },
    "blog-posts": {
      "type": "blog-posts",
      "blocks": {
        "section-header": {
          "type": "_section-header",
          "static": true,
          "settings": {
            "layout_header": "center",
            "subheading": "From the",
            "heading": "Primavera Journal",
            "page_title": false,
            "heading_size": "h2",
            "text": "",
            "button_label": "",
            "button_link": ""
          }
        },
        "button-group": {
          "type": "button-group",
          "static": true,
          "settings": {
            "horizontal_alignment": "center"
          },
          "blocks": {
            "button": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "View All"
              }
            }
          },
          "block_order": [
            "button"
          ]
        }
      },
      "settings": {
        "blog": "news",
        "product_limit": 4,
        "columns_desktop": "3",
        "columns_mobile": "1",
        "layout_desktop": "slideshow",
        "container_type": "max",
        "arrow_position": "overlay",
        "counter_style": "progress",
        "button_style": "primary",
        "color_scheme": "scheme-1",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "scheme-2",
        "padding_top": "default",
        "padding_bottom": "default",
        "show_top_border": false,
        "show_bottom_border": false
      },
      "block_order": []
    },
    "stacked-images-with-text": {
      "type": "stacked-images-with-text",
      "blocks": {
        "heading-group": {
          "type": "heading-group",
          "settings": {
            "page_title": false
          },
          "blocks": {
            "subheading": {
              "type": "_subheading",
              "settings": {
                "subheading": "About Primavera"
              }
            },
            "heading": {
              "type": "_heading",
              "settings": {
                "heading": "Setting the Standards for Clean, Conscious Beauty",
                "heading_size": "h2"
              }
            }
          },
          "block_order": [
            "subheading",
            "heading"
          ]
        },
        "text": {
          "type": "text",
          "settings": {
            "text": "<p>Primavera was founded in 2018 by Ani Johnson, an LA-based makeup artist who cut her teeth on Hollywood sets before going on to launch her own empire. Since then, she has redefined luxury skincare and cosmetics by blending high-performance formulas, ethically sourced ingredients, and an effortlessly chic aesthetic. With a deep passion for skin health and innovation, Ani and her team continue to push boundaries, ensuring that luxury and responsibility go hand in hand.</p>",
            "font_style": "body"
          }
        },
        "button-group": {
          "type": "button-group",
          "settings": {
            "horizontal_alignment": "inherit"
          },
          "blocks": {
            "button": {
              "type": "_button",
              "settings": {
                "button_style": "primary",
                "button_label": "About Primavera"
              }
            }
          },
          "block_order": [
            "button"
          ]
        },
        "stacked-images": {
          "type": "_stacked-images",
          "static": true,
          "blocks": {
            "stacked-image": {
              "type": "_stacked-image",
              "settings": {
                "image_ratio": "1",
                "max_width": 90,
                "link": "",
                "link_label": ""
              }
            },
            "stacked-image-2": {
              "type": "_stacked-image",
              "settings": {
                "image_ratio": "2 / 3",
                "max_width": 80,
                "link": "",
                "link_label": ""
              }
            }
          },
          "block_order": [
            "stacked-image",
            "stacked-image-2"
          ]
        }
      },
      "block_order": [
        "heading-group",
        "text",
        "button-group"
      ],
      "settings": {
        "horizontal_alignment": "center",
        "color_scheme": "",
        "enable_color_scheme_transition": false,
        "color_scheme_transition": "",
        "show_top_border": false,
        "show_bottom_border": false
      }
    }
  },
  "order": [
    "split-card",
    "rich-text",
    "featured-collection",
    "scrolling-content",
    "split-banner-1",
    "collection-list",
    "logo-list",
    "featured-product",
    "video-reels",
    "split-banner-2",
    "section-header",
    "before-after",
    "rich-text-columns",
    "image-hotspot",
    "blog-posts",
    "stacked-images-with-text"
  ]
}
```

</details>


# How to add a mega menu

This page guides you through adding a mega menu on desktop. If you're looking for sidebar menu promotion blocks (mobile), read our guide for [sidebar menu promotion blocks](/guides/how-to-add-a-sidebar-menu-promotion).

A mega menu is a way to display dropdown links in a more visually engaging way. Use mega menu blocks when you wish to create hierarchy or draw attention to certain links on your site with imagery in addition to text.

{% columns fullWidth="false" %}
{% column %}

<figure><img src="/files/uKgGcjmebJGcDdK5sGlW" alt=""><figcaption><p>Mega menu with the horizontal header layout (<a href="https://primavera-precision.myshopify.com/">Primavera</a>)</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/UmSbaF1RyjG1PHItUS5t" alt=""><figcaption><p>Mega menu with the vertical header layout (<a href="https://primavera-distinction.myshopify.com/">Savoir</a>)</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

Follow these steps to convert a regular dropdown to a mega menu and achieve the same look as the above screenshots:

* Under **Admin > Content > Menus**, create a menu that has three levels. For example, to achieve the **Shop** mega menu for Savoir (top right), we have the following menu structure:

<figure><img src="/files/GbNECleTsagphpv6azIi" alt="The menu structure needed to achieve the mega menu on the Primavera Savoir demo store."><figcaption></figcaption></figure>

*Three-tier menu structure for the* [*Savoir demo store*](https://primavera-distinction.myshopify.com/)<br>

* In the **Customizer**, add a new **mega menu block** under **Header**:

<figure><img src="/files/Y6GbHB4LIXq8vhmmSdYL" alt="" width="291"><figcaption><p>Add a new mega menu block</p></figcaption></figure>

* Type the name of the menu item you wish to be a mega menu in the **menu item** field, e.g. "Shop". This must match exactly, including whitespace and casing. The dropdown items for this link will be used to populate the mega menu.<br>

  <figure><img src="/files/jC0WLGsr5SNhLsESmZDT" alt="A mega menu block associated with the &#x22;Shop&#x22; menu item on the Savoir demo store."><figcaption></figcaption></figure>

  \
  *Here, we're telling the Mega menu block to appear under the "Shop" menu item on the* [*Savoir demo store*](https://primavera-distinction.myshopify.com)<br>
* Choose a color scheme
* There are two different layout options for the mega menu, which only apply if an additional color scheme is used.  When the **fade** layout is selected, the mega menu will fade to match the new color scheme. When the **split** layout is applied, the mega menu will be split in half, with one half using the original color scheme and the other using the new color scheme.
* When using the **vertical** header and the **fade** mega menu, there is a chance that you may have color contrast issues with your original logo. In that case, upload a logo with a different color scheme under **Settings > Logo > Alternate logo** and enable the **use alternate logo** checkbox to switch logos when the mega menu is active.
* Add up to 3 promotion blocks. For each promotion:
  1. Image
  2. Image ratio
  3. Label
  4. Link

### Megamenu layout options

#### Megamenu with nested submenus and promo blocks

<figure><img src="/files/aoKrD9dezTZ8EDWFbb21" alt="Megamenu with nested submenus and promo blocks"><figcaption></figcaption></figure>

Choose which images, labels and text you want for your promo blocks. You can add up to three promo blocks per mega menu on desktop.

<figure><img src="/files/ZboK7RwiTRhddcSDJKSx" alt="" width="296"><figcaption><p>Settings for promo block 1</p></figcaption></figure>

#### Megamenu with nested submenus (available in v1.5.0+)

<figure><img src="/files/Ym3J0NeBbWWCCw5Pd5LR" alt="Megamenu with nested submenus"><figcaption></figcaption></figure>

If you don't add any promo blocks submenu items will be spread across several columns. Second level menu items will be the headings, and third level menu items will be grouped under the second level items.

#### Megamenu with single level menu (available in v1.5.0+)

<figure><img src="/files/rWPHa2JgswvVCzxLZS1m" alt="Megamenu with single level menu"><figcaption></figcaption></figure>

If you don't add any third level menu items, menu items will be spread across the menu. This is great for a menu with a single hierarchy of items, such as a long list of brands.


# How to add a sidebar menu promotion

This page guides you through adding a sidebar menu promotion on mobile. If you're looking for desktop mega menu blocks, read our designated guide for [creating a megamenu.](/guides/how-to-add-a-mega-menu)

<figure><img src="/files/UiM1pzTaGpOdH0Lqop6v" alt="Sidebar menu of the Distinction preset, which features primary navigation links, two image promo blocks, and secondary navigation links."><figcaption><p>Sidebar menu on Primavera Savoir theme demo</p></figcaption></figure>

* Under **Admin > Content > Menus**, create a menu. You can add up to three levels, and Primavera allows you to add promotions at any of those levels.
* In the **Customizer**, add a new **promotion block** under **Sidebar menu**:

<figure><img src="/files/2nwj8658j8NCBwmMlcsS" alt="" width="375"><figcaption></figcaption></figure>

* We now need to tell the theme which menu item this promotion should display under. Under **menu item**, enter the exact name of the link, e.g. **Shop**, or leave blank to show the promotion at the top level.
* Add an **image**, specify an **image ratio (optional)**, enter a **label** and a **link**. You should now see the promotion appear under the specified menu item.


# How to add product swatches

A step-by-step guide to adding native swatches in Primavera.

{% embed url="<https://www.youtube.com/watch?v=qmWNNhN1V4g>" %}

This guide takes you through adding color swatches on the product template, product cards and filters.

* Configure products:
  * Ensure you have selected a **Category**
  * Once selected, you should now have access to category-specific metafields further down the page, including **Color:**\
    \
    ![](/files/xDRWQLiaT9j5zEtmKzAf)<br>
  * In the **Color** metafield, select a color from the default entries.&#x20;
    * Alternatively, if the color you're looking for doesn't exist or you'd like to create a more precise color swatch, click on **Add new entry** and either select a **color** (hex code) or upload an **image** that conveys the correct color/texture/pattern. Choose a **base color** which determines which color group this entry should appear under in filters, when enabled.
  * With all your color entries created, go to **Variants > Add options like size or color**
  * Select **Color** from the recommended options
  * Your color variants should now be automatically created and connected based on your category metafield entries
  * Hit **Save**
* Enable swatches on product cards (these should be enabled by default):
  * Go to **Theme settings > Product cards**
  * Ensure **Variants > Display style** is set to either **Always visible** or **On hover/focus**
  * Ensure **Variants > Color display style** is set to **List**<br>

<figure><img src="/files/yh6RSkRsHYuymKM6Indk" alt="Screenshot of variant display style and color display style" width="307"><figcaption><p>Check your Product card settings in Theme settings</p></figcaption></figure>

{% hint style="info" %}
The theme checks for spellings "color" or "colour".&#x20;

* If you use a different word/spelling for "color" you can add it in [Default theme content](/faqs/how-do-i-edit-the-default-theme-content) to the **Product variants color list**.

* Alternatively, use the [Other display style](/theme-settings/product-card#variants) to add other variant types, e.g. "Metal color".
  {% endhint %}

* [Enable filtering](/templates/collection) in your collection template(s) to ensure color filters appear

* On your product template(s), ensure the **Variant picker block** has been added and that the **Swatch** setting is set to **Default**\
  \
  ![Swatch setting that needs to be set to Default in order for swatches to display on the product template.](/files/ZH96TtIilgOrx45t0HRs)

* *Optional*: Check **Theme settings > Appearance > Forms > Swatch style** to choose a swatch shape: circle, rectangle or square

* Install the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app. Once installed:
  * In the app, go to **Filters > Add filter**
  * Select **Source**: *Color*
  * If you want to display the swatch image instead of the color in filters, click on **Manage values** and check the **Use images when available** option:\
    \
    ![](/files/Vk3TZb1GCQT2YstK1zvW)
  * Hit **Save**

*Optional*: Review your values, e.g. group them together, or opt to create the values manually instead of automatically, or edit the values (by editing the values you can also select an image for your swatch, like we did for eyeshadow palettes on the [Gloss demo store](https://primavera-gloss.myshopify.com/)).

You should now see the swatches appear on product pages and collection pages.

### Troubleshooting

* Ensure the product has a **category** selected
* Ensure the **color variant** is connected to the **color metafield**
* If the swatches aren't displaying, try disconnecting and reconnecting the variant to the **color** category metafield
* Check that your color variant is spelled as expected: "color" or "colour" in English. If not, you can add your spelling in [Default theme content](/faqs/how-do-i-edit-the-default-theme-content) > **Product variants color list**.&#x20;
* Consult Shopify's [documentation](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields)
* Check an updated copy of Shopify's [Dawn](https://themes.shopify.com/themes/dawn/styles/default) theme to see if the swatches are appearing there.
  * If they **are** appearing on Dawn, this may be a Primavera configuration issue so kindly check the above steps or [get in touch with us](https://ultramarinastudios.com/support) so we can guide you.
  * If they're **not** appearing on Dawn, this is likely a Shopify configuration issue, unrelated to Primavera, and we recommend reaching out to [Shopify support](https://help.shopify.com/en).


# How to add a product subtitle/cutline

<figure><img src="/files/KQhSzuDYFxTpb8QbaZwG" alt="Three product grid items with a subtitle underneath the product title."><figcaption><p>Product subtitles on Primavera theme's Gloss demo</p></figcaption></figure>

Product subtitles are a great way of giving quick, succint context about a product. Talk about key features, benefits or ingredients/composition.

* Navigate to **Settings > Custom data > Products**
* Select **Add definition**
* Start typing out **Subtitle** and select the standard **Product subtitle** metafield that is suggested to you (the metafield namespace and key must be the default `descriptors.subtitle`)
* Now go into each product in the Admin to add a subtitle under **Product metafields**:

<figure><img src="/files/Ek4NaJzSvhLr28R8zCs4" alt=""><figcaption></figcaption></figure>

* Ensure your theme is updated to display those subtitles in [Product cards](/theme-settings/product-card) and on the [product template](/templates/product#product-blocks).


# How to add product badges

<figure><img src="/files/4lv4yR4rGRKC4O0tiWDy" alt="A series of product grid items, some of the items have badges such as &#x27;Bestseller&#x27; and &#x27;SPF&#x27; overlaying the product image in the top left corner."><figcaption><p>Custom product badges on the Primavera theme's Gloss demo. Here you can see <strong>Bestseller</strong> and <strong>SPF</strong> as custom badges.</p></figcaption></figure>

### Step 1: Enable custom badges in the global settings

* In the customizer, navigate to global Theme Settings > Product Card
* Enable the **Show custom badges** option

### Step 2: Create a custom metafield for the badge content

* Navigate to **Settings > Custom data > Products**
* Select **Add definition**
* Enter a title, e.g. **Badges**
* Click the 'custom.badges' text to unlock the namespace and key field. Under namespace and key, enter `theme.badges`
* Under Select type, choose Single line text&#x20;
* Select List of values
* *Optional*: You can choose to limit to preset choices, e.g. **New**, **Editor's Choice**, etc. This is useful if you want to prevent typos or keep consistent badges.
* When ready, hit **Save**
* Now, for any product you want to add badge(s) to, navigate to the product in the Admin, scroll down the page and add each badge as a new item:

<figure><img src="/files/h604FSgCCbOTcjhfSRy2" alt="Screenshot of the Shopify admin showing a form field for Badges, a single line text form field. The field value is &#x27;New&#x27;."><figcaption></figcaption></figure>


# How to show product-specific content in collapsible accordions

The [Product](/templates/product) section in your [Default product template](/templates/product) includes a Collapsible row block – the expandable accordion that customers can click to reveal more info (like sizing, materials, shipping details, etc.).

<figure><img src="/files/4Yhcxw0HPrgAKg1VYJ9d" alt=""><figcaption></figcaption></figure>

The problem: If you type directly into the Row content field, that same text will show on every product using that template.

The solution: Instead of typing static text, you can connect the collapsible row to a metafield – a custom field that pulls in unique content for each product. This way, you use one template but display different content per product.

### Example: Adding a "Fit & Sizing" Collapsible Row

#### Part 1: Create the metafield definition

1. In your Shopify admin, go to **Settings → Custom data** (listed under *Metafields & metaobjects* in some versions).
2. Select **Products**.
3. Click **Add definition**.
4. Enter a name – for this example: `Fit & Sizing`.
5. Under **Type**, keep **One** selected and choose **Rich text**. *Rich text lets you format the content with bold, lists, links to your FAQ, etc.*
6. Click **Save**.

#### Part 2: Add content to your products

7. Go to **Products** in your Shopify admin and open a product.
8. Scroll down to the **Metafields** section and find the **Fit & Sizing** field you just created.
9. Enter the product-specific text and click **Save**.
10. Repeat for every product that should display this collapsible.

<figure><img src="/files/ZrUcz63rjoF2ZsXWGx4s" alt="" width="375"><figcaption></figcaption></figure>

#### Part 3: Connect the metafield to the collapsible block in your theme

11. Open the **Theme editor** (Online Store → Themes → Customize).
12. Navigate to your **Default product** template.
13. Under the **Product information** section, click **Add block** and select **Collapsible**.
14. In the **Heading** field, enter: `Fit & Sizing`.
15. In the **Text** field, clear any placeholder text, then click the **Connect dynamic source** icon (the small icon at the top-right corner of the field).
16. In the panel that opens, make sure you're viewing the **Product** source. *(If it says "Nearest > Page", go back and select "Product" instead.)*&#x20;
17. Find and select the **Fit & Sizing** metafield.
18. The **Text** field should now show a dynamic source tag instead of static text (see screenshot below).
19. If you've already filled in the metafield for the product you're previewing, the collapsible should appear in the preview.
20. Click **Save**.

<figure><img src="/files/Oa7ZmDjCWsTBVz9OSpwz" alt="" width="305"><figcaption><p>Once connected, the metafield shows up as a blue badge in the Text field</p></figcaption></figure>

### Tips

* **No content? No collapsible.** If a product doesn't have a value in the metafield, the collapsible block won't appear for that product – so you don't need a separate template for products that shouldn't show it.
* **Reuse this approach** for other collapsibles like "Materials & Care", "Shipping Info", "Ingredients" or "Returns Policy."
* **Rich text formatting** lets you add links, bold text, and lists inside your collapsible content – handy for linking to your FAQ or size chart pages. &#x20;

{% hint style="info" %}
The Collapsible block is also available in the [Featured product](/sections/featured-product) section – a standalone product section that can be added to any page in your theme (like your homepage or landing pages). If you're using a Featured product section, make sure to set up the same collapsible blocks and dynamic source connections there too, as it's configured separately from your product template.
{% endhint %}


# How to add product recommendations

Product recommendations appear as **related products** and **complementary products** on the product template.

<figure><img src="/files/9uL9Fen7XnwetrzLt5iL" alt="Related products section showing a series of product items as a standalone page section that takes up the full width of the page."><figcaption><p>Related products section. By default, these products are auto-generated by Shopify but they can be overridden using the Search &#x26; Discovery app.</p></figcaption></figure>

<figure><img src="/files/eQ609repi1TYsrsIzFgA" alt="Complementary products section, showing a single associated product that is displayed as a small card underneath the product form."><figcaption><p>Here, the Knotted T-Shirt appears as a complementary product.</p></figcaption></figure>

To edit and display these product recommendations:

* Install [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app
* Once the app is installed, navigate to **Recommendations**
* Navigate to a product and edit the **complementary products** and/or **related products** sections
* To add the **Related products** section: in the Customizer, navige to the product template and add the Related products section.
* To add complementary products: in the Customizer, under the **Product** section, add the **Complementary products block**.


# How to add an external video

To add an external video, e.g. YouTube or Vimeo, you can use the [External video](/sections/external-video), [Rich text](/sections/rich-text) or [Rich text columns](/sections/rich-text-columns) sections.

{% hint style="info" %}
Primavera has dedicated sections for external videos as they're a little harder to work with than native videos: you can't force them to a specific aspect ratio without losing access to the controls.
{% endhint %}


# How do I enable right-to-left support

Primavera supports right-to-left (RTL) languages out of the box. No additional work is required for you to set this up, other than what Shopify requires. See Shopify's instructions for more information on [adding a language to your storefront](https://help.shopify.com/en/manual/international/localization-and-translation).

When a right-to-left language is detected, the content will automatically swap over to the other side in order to provide a seamless experience. One key thing to note is that in the customizer, **left** and **right** settings options will be reversed. So if you align something to the "bottom left", when an RTL language is active, it will be aligned to the bottom right. This allows your storefront to seamlessly support both left-to-right languages and right-to-left languages with the same sections, without needing to create duplicate templates.

The following languages are picked up by our automatic right-to-left language detection. If your language is missing, feel free to reach out to [our support team.](https://ultramarinastudios.com/support/)

* Avestan
* Arabic
* Aramaic
* Bakhtiari
* Central Kurdish
* Divehi
* Farsi
* Gilaki
* Hausa
* Hebrew
* Kowhai
* Kashmiri
* Kurdish
* Mazanderani
* N'Ko
* Punjabi (Western)
* Pashto
* Sindhi
* Southern Balochi
* Uyghur
* Urdu
* Yiddish


# How to create a preorder product

Displays a "Preorder" button instead of "Add to cart" for specific products. Optionally, create a preorder product template to display preorder-specific information, e.g. estimated delivery date.

<figure><img src="/files/Pi27rZErW3yAxUCL4RVv" alt="This product has a &#x22;Preorder&#x22; button and has been assigned a preorder-specific product template to display a custom product badge and an estimated delivery date"><figcaption><p>Here, we created a preorder-specific product template to display a custom product badge and an estimated delivery date.</p></figcaption></figure>

{% hint style="success" %}
Available in version 1.4.0 and later
{% endhint %}

To replace the "Add to cart" button with "Preorder" for specific products:

1. Create a new metafield with the name Preorder.
2. Click the custom.preorder button to unlock the 'Namespace and key' field. Change the value to the  the following namespace and key: `theme.preorder`
3. Change the type to be "True or false".
4. For each preorder product, update the metafield value to "True"
5. *Optional*: Assign a "Preorder" product badge ([see guide](https://docs.ultramarinastudios.com/guides/how-to-add-product-badges)) to highlight it in collections
6. *Optional*: Create a new product template to display the product badge and/or add preorder-specific information such as:
   1. [Icon with text](/templates/product/product-blocks#icon-with-text) connected to a product metafield that specifies the estimated delivery date
   2. [Collapsible](/templates/product/product-blocks#collapsible-item) that specifies any terms or information related to availability/payment/delivery

Please note:

* The preorder button will only display if the product is in stock or set to "Continue selling when out of stock".&#x20;
* Dynamic checkout buttons will be hidden.


# Theme settings

This page walks through all the global site settings for Primavera.

&#x20;


# Spacing

When customizing a new theme, we recommend starting with customizing these global spacing settings before you make granular tweaks to individual settings in order to minimize setup work.

#### Spacing scale size

This setting determines the overall spacing size and sizing of elements. This can be a quick way to create looser or tighter spacing across the theme without tweaking individual settings.

#### Vertical and horizontal grid gap

This setting controls the spacing between groups of similiar items, such as within a product grid, testimonials, blog posts, etc. This can be controlled at a desktop and mobile level.

#### Section gap

This setting controls the spacing between elements within a section, such as the distance between a section header and the content. This can be controlled at a desktop and mobile level.

#### Section padding

This setting controls the  spacing at the start and end of each section. Most sections allow you to override this at a section level, so set an appropriate default first before you make any customizations This can be controlled at a desktop and mobile level.

<figure><img src="/files/K3OC8yBATlvohgoKJGlo" alt=""><figcaption><p>Diagram of the grid gap, section gap and section padding settings described above</p></figcaption></figure>


# Appearance

Adjust various appearance-related global settings for your theme.

### Borders

#### Button border radius

Applies a border radius to buttons and similar elements, including form fields and the count down timer. You can choose between **none**, **slightly rounded**, and **rounded**. The exact level of roundedness is automatically determined on a component level.

#### Card border radius

Applies a border radius to centered modal dialogs, images and any card containers.  You can choose between **none**, **slightly rounded**, and **rounded**. The exact level of roundedness is automatically determined on a component level.

#### Border thickness

Select a value between 1px and 3px. The border thickness will be applied globally to all borders, including inputs and buttons.

#### Border opacity

Makes some borders transparent. Select a percentage value from 0% - 100%. This will only apply to decorative borders between elements, not outlines on inputs or buttons.

### Overlays

#### Default color scheme

Defines the default color scheme for overlays and pop-ups. When applicable, can be overridden at the section level.

#### Overlay background

Sets a background color to cover the rest of the page when certain overlays are open.&#x20;

#### Show borders

This setting adds borders around overlays that don't have a background backdrop, such as newsletter pop-ups and error messages. This may be overridden on certain sections, e.g. Newsletter popup.

{% hint style="info" %}
If you don't want a border around a specific overlay, create a color scheme with transparent borders by clearing the "Border" color field and select that color scheme.
{% endhint %}

#### Enable background blur

This setting adds a blur effect to the modal and popup backgrounds. This can help to minimize distractions from moving/animated content in the background, but it may also cover important context.

### Forms

#### Label style

For form fields, labels can either be positioned as placeholder text that moves upwards when the form is filled (**floating**), or be persistently displayed above the form field (**always on top**). For greater accessibility, we recommend displaying labels **always on top**. Find out more about this in our [accessibility guide](/guides/accessibility).

#### **Input style**

For inputs, you can choose between an **underline** or **rectangle** style. Underline displays a single bottom border, whereas rectangle will fully enclose the input with a border. Certain users can have difficulty understanding that underline inputs are actual form fields, so if accessibility is a concern, we recommend using the **rectangle** style.

#### Input padding

Select **small, medium,** or **large** to apply different levels of padding to form inputs.&#x20;

#### Swatch style

Swatches, when configured, can appear on the **Product template**, **Featured product** section and in **Product cards**. This setting allows you determine the shape of swatch inputs globally, **rectangle, circle and square.**  \
\
Check out Shopify's documentation on [how to set up native swatches](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields).&#x20;

### Quick add

#### Button icon

Choose between a bag or plus icon for the quick add button (appears in mini product, product cards and [image block](/blocks/image)).


# Logo

### Logo

Upload the global logo for your site here. For best results, we recommend using an SVG as it ensures your logo will look crisp on all devices. Otherwise, we suggest uploading a transparent PNG at a high resolution (1000x1000px).

You should ensure that your default logo is visible on your header color scheme by default.

#### Alternate logo

If you are using color schemes within your store, it may be possible that your logo is not visible on your alternate color schemes. We suggest uploading an alternate version of your logo here, and in different sections, you can opt into using this alternate version of the logo. The logo should be the exact same as your default logo, but in a different color scheme.

For example, if your logo is black text with a transparent background, your alternate logo could use white text and a transparent background.

#### Logo width

Set a maximum width for your site logo here. This setting affects both the logo and alternate logo. &#x20;

#### Favicon

The favicon shows up in the browser tab next to the page title and potentially is displayed in your search results.


# Colors

Color schemes are a Shopify feature that allow you to color entire sections using a preset scheme.

Primavera utilizes color schemes, Shopify's newest technique for allowing merchants to easily reuse color schemes across the store. This guide will walk you through configuring different color schemes and the contrast requirements for each setting.

### Text

This refers to the color of the primary body text.  Because the theme uses a transparent version of the text color in some locations to serve as the background, this color needs to have a minimum color contrast ratio of **5** with the **background** color.

### Text secondary

This refers to the color of supplementary text in the section, such as input labels, original product prices, etc. This needs to have a minimum color contrast ratio of 4.5:1 with the **background** color.

### Background

This is used to create a solid background color for the section.

### Background gradient

When applied, this uses a gradient for the background instead of a solid color. There may be some instances where a background gradient is unable to be applied, so a component may revert to a solid color instead, so we suggest setting the **background color** to be a color similar to the gradient.

### Exception accent

This color is used for sale prices and errors.

### Border color

The border color sets a border for decorative elements. There is no color contrast requirements for borders as the border color is only used for decorative purposes in this theme.&#x20;

### Buttons

There are three different button styles in Primavera. The **primary** and **secondary** button styles can be configured with color schemes, the plain text style will utilize the **text** color setting.

Border radius settings for the buttons are found under [Settings > ](/theme-settings/appearance)[Appearance > Borders](/theme-settings/appearance).

#### Background

The **background** refers to the button background color. If you aren't using a **border** for the button or the border is the same color as the background, this should have a contrast ratio of 3:1 with the section **background** color.

#### Border

This setting determines the border color. If your color scheme contains filled buttons with outline buttons, we suggest setting the border color to match the background for all filled buttons for equal button sizing.

#### Label

This setting determines the text color within buttons. The text color needs a 4.5:1 color contrast ratio with the **button background.**


# Typography

This page lists out the various typographic styles in a theme, where to find them, and any settings.

Shared settings for each typographic style are listed in a final section at the bottom of the page.

### Headings

Headings refer to to the text that is used to group a document into sections, including product and section titles.&#x20;

* **Enable heading accents:** Heading accents refer to decorative count/number elements that may appear next to certain headings.  This can be enabled or disabled at a global level with this setting.

### Subheadings

Subheadings are typically found above subheadings. Subheadings are also called 'eyebrow text', 'eyebrow headlines'. The subheading size is determined by the font scale of the headings section.

### Body font

Body font refers to the basic fonts on a page that appears as inline paragraph text.

### Buttons

Button text refers to text within buttons. You can also adjust the **button padding** in this section.

### Text buttons

Text buttons are buttons that appear without a border or background, and with an underline. They derive their style from the buttons section. You can choose to show an **arrow** as a form of **decoration** here.

### Captions

Captions are a smaller style of text used to compliment body text. This is used for navigation links, prices, dropdowns, badges, etc.

### Sidebar menu

This refers to the style of text found in the mobile sidebar menu.

### Search

For the search input, you can choose between the heading and body font.

### Icon sizes

Choose between **small, medium** or **large** to control how icons are displayed across the theme.

### Shared Settings

Each type style may contain or more of the following settings. A detailed explanation of each setting is below.

* **Font:** Select a font family from Shopify's custom fonts. Outside of the heading and body fonts, you can choose which font family to reference, **heading** or **body**.&#x20;
* **Font size:** The font size scale allows you control the font sizes relative to other typographical elements. For example, if you want large headings and a small body font, you could increase your heading font size and decrease the body font size here.

{% hint style="info" %}
For a better user experience, headings in pop-ups and small containers are restricted to "Medium" or smaller.
{% endhint %}

* **Line height:** Choose between **None, Extra tight, Tight, Snug, Normal, Relaxed** or **Loose**.
* **Letter casing**: Choose between **Normal, Lowercase** or **Uppercase.**
* **Letter spacing**: Choose a **% value** between -5% for tighter kerning or 20% for looser kerning.


# Product card

The product card settings apply to all product cards across the theme.

Product cards may appear in collections or in sections such as the 'Related products' or 'Featured collection' section.

### General settings

* **Image ratio:** The **Image ratio** allows you to choose between **adapt,** which uses the default aspect ratio of the image, or a **square** or **portrait** aspect ratio.&#x20;
* **Title font:** Select a font style for the **title font.**
* **Price font:** Select a font style for the **price font.**
* **Show zero price as free:** Enabling this option will change the price display of free items from '$0' to 'Free'. If you need to change this text, you can do so in the translation settings for your theme.
* **Enable** **quick add:** this allows customers to quickly add the product to their cart without having to click through to the product page. If the product has variants, a quick add modal will be opened, otherwise, the item will be immediately added to the cart. We don't recommend enabling this option if you have a complex purchase flow and/or need customers to review the full product page before purchasing.
* **Enable collection-aware product links**: when enabled, products within collections or the **Featured collection** section (when a collection is selected instead of individual products) will link to full collection-aware links, e.g. */collections/new-in/products/dress*. This is particularly useful if you plan to add [Breadcrumbs](/templates/product#product-blocks) to your product pages. \
  \
  Be aware that, per Shopify's [documentation](https://shopify.dev/docs/api/liquid/filters/within), because a standard product page and a product page in the context of a collection have the same content on separate URLs, you should consider the SEO implications of using the `within`filter.
* **Show product subtitle:** this will enable the display of product subtitles in the product card. Read our guide on [how to create a product subtitle](/guides/how-to-add-a-product-subtitle-cutline) for more information.
* **Show second image on hover:** When this is enabled, hovering over the product will show the second product image if one is available.
* **Show vendor:** This will display the product's vendor in the card. This is useful for stores that might sell products from many different brands.
* **Show product ratingL D**isplays a star rating if a value exists for the `product.metafields.reviews.rating`, which is conventionally used by most third-party review apps to store rating data.

### Variants

You can choose to display a product's variant options in the product card.

* **Display style:** Options are **None**, **Always visible**, which means that the variant options are always displayed below the product title and price or **On hover/focus**, which places the variant options to the right of the title and only displays them when the product card is hovered. On smaller screens or touch devices, variant options default to **Always visible**.
* **Color display style:** Allows you to display any variant option that matches the option names *Color* or *Colour* (regardless of letter-casing)*.* You can choose between **None**, **Count** (e.g. *2 colors available*) or **List** which either displays the option names (*Red* *Green Blue*) or, if a swatch is available, it displays the swatch itself. \
  \
  **Useful resources:**\
  \- Check out Shopify's documentation on [how to set up native swatches](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields). \
  \- If you wish to change the shape of the swatches globally, this can be edited in [Appearance](/theme-settings/appearance#swatch-style).\
  \- See [below](#how-to-translate-variant-option-names) for how to translate option names for variant display in different languages.
* **Size display style:** Allows you to choose between **None**, **Count** (e.g. *2 sizes available*) or **List**, which displays the option names as a list (*Small Medium Large*).
* **Other display style:** Accounts for other variant options that you may want to display, for example *Metal Color* for jewelry. As with color and size above, you choose **None**, **Count** or **List** for display style. If a swatch is set up for the option, just like *Color* it will display as such when **List** is selected.
* To specify the option names you wish to display, as well as the pluralized text if you choose the **Count** option (e.g. *2 metal colors available*), go to **Online Store > Themes > Edit default theme content**, search for **option\_name** and under **Product variants other**, add the variant option to the comma-separated list with the following syntax: `option:pluralized option name` . Your final field might look like this:\
  `bracelet size:bracelet sizes,metal color:metal colors,option:options`
* **Limit list count:** Allows you to limit the number of options that are listed if you select **List** for any of the variant options. Keep at 0 to disregard setting.

#### How to translate variant option names

If you wish to display variant options in other languages, you will need to use the [Shopify Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app to first translate the option names, then translate the theme strings.&#x20;

For example, for French you would first translate the variant options. In the app, select **Localized content: French** > **Products** and for each product you would edit the **Option name** and **Option values** if necessary.

Then, still in the Translate & Adapt app, select Default theme content and update the relevant fields. For example, to make sure your color variant displays, add a translation in the **Product variants color** field (*Couleur*) and if you chose the **List** display style for color, ensure you add a translation for *{{ count }} colors available*, e.g. *{{ count }} tailles*.

### Badges

Product badges can be used to highlight secondary information about a product. Common product badges include things like 'Limited', 'Sale' or 'New'.&#x20;

* **Display:** The **display** options for product badges include **none, overlay image** or **below image.** Overlay image will place the badges directly over the image. This is not recommended if you have many badges or if your image contains important details near the edge. Below image will place the badges above the title on smaller screens, and to the right of the product title if there is enough space.
* **Style:** You can choose between the **primary, secondary** or **text style** for the badges display.
* **Show sale badge:** Enabling the **sale badge** will automatically display a badge if the product's price is less than the compare-at price.
* **Show sold out badge:** Enabling the **sold out badge** will automatically display a sold out badge if the product's inventory status is unavailable.
* **Show custom badges:** This will display all custom badges for a product, which can be set using metafields. Read our guide on [how to set up product badges](/guides/how-to-add-product-badges).&#x20;


# Mini product

The mini product card is displayed in contexts where there may not be enough space for a full product card.

Mini cards are a [theme bock](broken://pages/WSF8E8s2sEiJqIdxH1ip), reusable across many sections. They also appear in the product templates complementary products and cart upsells, with slightly different settings.

Wherever you use mini products, you can choose between two styles (**card** or **list**) and, if **card** is selected, you can apply a **color scheme** at the block level.

| Option 1: Card style                                                                                                                                                                                                                                                                                   | Option 2: List style                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><img src="/files/TjfaeDLn56Esf405FaIP" alt="" data-size="original"><br></p><ul><li>The product is added to cart on click, unless it has variants in which case the quick add popup opens.</li><li>You can also customize the color scheme to make it stand out from the rest of the page.</li></ul> | <p><img src="/files/5BqDPOisOP2eUowkQFMe" alt="" data-size="original"><br></p><ul><li>The mini product simply links to the product</li><li>The mini product takes on the parent element's color scheme</li></ul> |

The following settings determine the look of each of these styles.

Note that while the following settings are global, some of them may be overriden at a section level in order to give you more flexibility. For example, in the Cart and Cart drawer, mini product cards always inherit the section's **product title font**, **product price font** and **image width** in order to better match cart items.<br>

* **Minimum card width:** allows you to control the width of mini product cards. If your product titles are very long or very short, you can adjust this setting so that they take up the appropriate amount of space. In certain places, e.g. the cart drawer, mini products take up full width.
* **Title font:** Choose a [font style](/common-settings#font-style)
* **Price font:** Choose a [font style](/common-settings#font-style)
* **Card style:**
  * **Image ratio:** The **image ratio** allows you to choose between **adapt,** which uses the default aspect ratio of the image, or a **square** or **portrait** aspect ratio.&#x20;
  * **Maximum image width:** This setting allows you to finetune how much space the image will take up in your cards.
  * **Quick add button style:** Choose between primary, secondary or text
  * **Show borders**: Enabling **show borders** will add an outline around the card and between the image and the text.
  * **Enable blur:** If the background of the color scheme (selected at the block level) has transparency, a blur will be applied.
* **List style:**
  * **Image ratio:** The **image ratio** allows you to choose between **adapt,** which uses the default aspect ratio of the image, or a **square** or **portrait** aspect ratio.&#x20;
  * **Maximum image width:** This setting allows you to finetune how much space the image will take up in your cards.


# Collection card

Collection cards can be found on the collection list template as well as the collection list section.

### General settings

* **Image ratio:** This setting allows you to choose between **adapt,** which uses the default aspect ratio of the image, or a **square,** **portrait**  or **circle** aspect ratio.&#x20;
* **Title font:** Select a font style for the **title font.**


# Blog post card

Blog post cards are displayed wherever there are multiple blog posts, such as in search results, on blog archive pages, and in the blog posts section.

In order to support a wider variety of layouts, the blog post image aspect ratio is fixed to the size of the uploaded image.

### Settings

* **Title font style:** Set this setting depending on the average blog post title length.
* **Show excerpt:** If your blog post has an [excerpt](https://help.shopify.com/en/manual/online-store/blogs/writing-blogs/working-with-blog-posts#display-an-excerpt-from-a-blog-post), you can choose to display it within the product cards.
* **Show read more:** Enable this to display the words 'Read more' within the blog post card. You can edit this text within the stores translations.
* **Tag style:** Choose between **primary, secondary,** or **text** for tag display. This draws from the button settings.
* **Tag position:** You need to have [added tags to your blog posts](https://help.shopify.com/en/manual/online-store/blogs/writing-blogs/working-with-blog-posts#add-tags-to-a-blog-post) before they will display. If you choose the **side** position, the tags will be displayed to the side only if there is enough room, otherwise it will be displayed on top of the post title. Use **above title** to display them above the post tiel consistently.


# Search behavior

### Settings

**Enable search suggestions** to display a list of suggested results as a user types.&#x20;


# Social media

Add a link to each of your social media profiles in order to output the corresponding icon in social media sections. The social media icons can be enabled as a [Footer](/sections/footer) block.

The value for each setting should be the full profile link, eg.  "<https://www.instagram.com/shopify>", not @shopify.&#x20;

The theme supports links to Bluesky, Facebook, Instagram, Youtube, Tiktok, X / Twitter, Snapchat, Pinterest, Threads, Tumblr, Vimeo.


# Currency format

You can enable the display of **currency codes** in this section to provide greater clarity for users. If your store accepts multiple currencies/international orders, we recommend keeping this enabled.


# Cart

These are the global settings for the cart, whether you choose a **cart drawer** or a **cart page**.

* **Cart type:** You can choose between a **cart drawer** or a **cart page**. Using a cart drawer can help to minimize user friction and increase purchases by allowing users to stay on the same page. A cart page can give a better overview of complex products as it has more space.
* **Show vendor:** Enable the **show vendor** option to display the vendor in the cart. This can be useful for department type stores that sell products sourced from various vendors.
* **Show cart note:** Enable the **show cart note** option to allow customers to add a custom note to their order. This can be useful for made-to-order products, customization, etc.
* **Enable cart discounts:** Enable this option to allow customizers to apply discount codes directly to their card.  Note, shipping dicounts can only be applied at checkout.
* **Continue shopping link:** This link shows when the cart is empty, and can help redirect your customers to a desired purchasing flow if they land on an empty cart page.&#x20;

### **Free shipping message**

Allows you to display a dynamic free shipping message at the top of the cart when it is not empty. This setting applies to both the cart drawer and the cart page.

* **Show free shipping message:** Enable the free shipping message by toggling this option.
* **Free shipping threshold:** Set your threshold, for example `150` if your free shipping discount if set to that amount in your store's currency.\
  \
  The theme **automatically converts the presentment currency** using Shopify's currency conversion rate. For example, if a customer adds a product to cart that is the equivalent to $150 based on Shopify's conversion, they will see the free shipping message. Note that there might be small variations in the remaining spend calculation, however the free shipping threshold should reflect what is applied at checkout.
* *Optional*: Modify the message in the theme content editor. Ensure you keep the curly braces around `{{ amount }}`like so: `You are {{ amount }} away from free shipping`

### **Cart count**

The cart count is located in the header, next to the cart button or link.

* **Show cart count at zero:** Disabling this option will hide the current cart count from the header if it is at 0.
* **Style:** You can configure the **badge style** to display the cart count as either plain **text** (with brackets) or as a **badge,** which uses the button styles of the selected color scheme.
* **Badge border radius:** This allows you to control the level of roundedness for the cart badge.

### Checkbox

{% hint style="success" %}
Available in version 1.4.0 and later
{% endhint %}

![Cart footer shows a checkbox to agree to terms and conditions in order to check out.](/files/j7VboK6jJnYNXjQRZmft)

Enabling the cart checkbox will require customers to agree to the checkbox terms before proceeding to checkout. This will also disable the dynamic checkout buttons.

* **Checkbox label**: Text to display that customers should agree to
* **Links**: Optional rich text field to add specific links, e.g. to Terms and Conditions or other policy pages


# Optimizations

### Performance

* **Enable instant.page library** to preload the next page as a user hovers over a link. This will feel faster to the user, but it will not impact performance scores done by testing tools such as Google lighthouse, as these tools only measure the performance of the initial page load. There is a chance that instant.page will not work with third party apps or analytics services depending on how they are loaded, so you may wish to disable this option if experiencing any issues with your apps.

### Accessibility

* **Show focus outlines on text inputs:** By default, the browser will show an outline around inputs that are currently focused. This is required for accessibility if the user is using a screenreader or keyboard to navigate. If this option is **disabled**, we use a third-party library to detect if a user is using a mouse or touch screen, and hide the outlines. If you want to minimize the use of uneccessary javascript libaries or you are concerned about accessibility, you can enable this option.
* **Video description button on videos:** By default, we use the video alt text as a video description in order allow merchants to meet the [1.2.1 Audio-only and Video-only (Prerecorded)](https://www.w3.org/TR/WCAG22/#audio-only-and-video-only-prerecorded) success criterion of the Web Content Accessibility Guidelines. You can disable this option if needed, but please note that not including an alternative to video content is an accessibility failure and may put you at a increased risk of litigation.


# Custom CSS

This setting allows you to apply custom CSS to your entire store.

If you only need to make minor tweaks to your stores appearance, we suggest doing so in this field as it will be carried forward across all theme updates.


# Sections


# Announcement bar

The announcement bar is a section where you can keep customers informed of important information. By default, it is at the top of the page, but you can reorder it to any spot within the header group.

<figure><img src="/files/yjN9u9aHu3D4GL9SJgSC" alt="Primavera Precision demo store featuring an announcement bar with a coutnry selector above a split hero section."><figcaption><p>The announcement bar on the Primavera demo store is above the header and has the country selector enabled on desktop</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Click into the text block to edit. For example, you could advertise your free shipping discount or a new product/collection/promotion.
* Optionally, enable the country and/or currency selector.
  {% endhint %}

### Settings

* **Enable autoplay** and **autoplay speed:**  This only apply if there are multiple announcements added to the announcement bar. This allows you to control the speed of the slide rotation. Please note there are accessibility issues potentially caused by [enabling autoplay](/guides/accessibility).
* **Animation style:** Allows you to choose between a **slide** and a **fade animation.**
* **Enable country selector** and **enable language selector:** This enable the appropriate selectors if your store has multiple countries or languages enabled. If a customer from another region is visiting your store, they typically look to the top right of the page to find their home region, so we recommend enabling this option.\
  \
  *Note: When either localization option is enabled, the announcement bar blocks will be positioned to the left of the selector(s). A single text block will be left-aligned while multiple blocks will be centered between the slideshow arrows.*
* **Show borders:** Adds a bottom border to the announcement bar to differentiate it between the header when using the same color scheme.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme
* Padding
  {% endhint %}


# Back to top

Back to top adds a floating button that can be pressed to scroll back to the top of the page. It will only display after scrolling past a certain distance.

### Settings

* **Position:** You can choose between the **bottom left** and **bottom right** position options.
* **Button style**: The color scheme of the button can be either the **primary** or **secondary** button style from any **color scheme**.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme
  {% endhint %}


# Banner grid

The banner grid component can be used to create a series of image banners that occupy different widths and heights in relation to eachother.

<figure><img src="/files/jFqkFqjnKoaRAMylDtKq" alt=""><figcaption><p>Banner grid on the Gaia preset</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Click into each nested **Image banner** block and upload/select an image
* Edit the nested **Heading** and **Button** blocks
  {% endhint %}

### Settings

* **Container type**: This allows you to select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.
* **Row height:** Sets the minimum height for each row in the banner grid. The exact size of the banner is determined in each individual banner setting based on the number of rows and columns it occupies.
  * **Extra small** option is only <mark style="background-color:green;">available in version 1.6.0 and later</mark>
* **Vertical/horizontal grid gap:** Override your global grid to create tigher grids.

### Blocks

This section comes preloaded with two different types of blocks:

* [Section header](/blocks/section-blocks/section-header) (hidden by default, fill in the settings to display)
* **Banner grid item**: This block houses each [image banner](/blocks/section-blocks/image-banner) block. The following settings are available:
  * **Desktop column and row:** On desktop there are 4 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on desktop.
  * **Mobile column and row:** On mobile there are 2 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on mobile.

### Examples & Inspiration

Banner grids have customizeable spacing and row settings to accomodate for a wide variety of images.

<div><figure><img src="/files/jFqkFqjnKoaRAMylDtKq" alt="A banner grid with no margins between each banner item, featuring ceramics in stark lighting"><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="/files/DymB4bVR6Ab7qvQ6buSh" alt="A banner grid with soft rounded corners featuring pastel tones and people applying health and beauty products."><figcaption><p>Gloss preset</p></figcaption></figure> <figure><img src="/files/JK2feoTW0HVgWJnhBkz6" alt="A banner grid with thin margins with luxury jewelry on white jewelry boxes against a purple background."><figcaption><p>Primavera preset</p></figcaption></figure> <figure><img src="/files/mSrU1gKVaooIfiPkCia9" alt="A banner grid for a high fashion with store with thin margins and women wearing luxury clothing. "><figcaption><p>Savoir preset</p></figcaption></figure></div>

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}


# Before/after image

The before/after image section is often used by beauty brands to highlight the results of their products. Sliding the range to the start reveals the after image fully.

<figure><img src="/files/AWm9iUl2cbmthVmOcJBt" alt="Before/after slider showing a close-up of a model&#x27;s skin with blemishes on the left and glowing skin on the right"><figcaption><p>Before/after image on Primavera theme</p></figcaption></figure>

### Settings

* **Label style**: For the "Before" and "After" labels, choose between **primary**, **secondary** or **text** (similar to button styles)
* **Label position:** Choose between **top** or **bottom**

### Blocks

This section comes pre-loaded with four types of blocks:

* [Section header](/blocks/section-blocks/section-header) (hidden by default, fill in the settings to display)
* **Before**
  * **Image**: Upload the image that corresponds to the before image
  * **Label**: e.g. Before
* **After**
  * **Image**: Upload the image that corresponds to the after image
  * **Label**: e.g. After
* [Buttons](/blocks/buttons) (hidden by default, fill in the settings to display)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Color scheme/Color scheme transition
* Padding
  {% endhint %}


# Bottom bar

The bottom is an optional section found at the bottom of every page. This can be used to display supplementary information that takes less precedence than your footer content

<figure><img src="/files/EdBUPBr310J8MqPOgPyj" alt=""><figcaption></figcaption></figure>

### Blocks

There are several block types available for the bottom bar:

* **Country/region selector** outputs any localization widgets for your theme.
* **Copyright** displays a copyright notice for your shop and a reference to Shopify.
* **Menu** lets you select a single-level menu to display.
* **Payment types** outputs a list of icons that represent the payment methods available for your theme.
* **Policy links** outputs a complete list of store policies.
* **Spacer** allows you to add a single block width of blank space. It only displays on desktop.

For each block there are certain shared settings.

* **Block size:** Choose between small, large, and full width for each block. This only displays on desktop.
* **Horizontal alignment:** Choose a horizontal alignment for each block. This only displays on desktop.

### Settings

* **Show borders:** Allows you to display a border above the footer.
* **Gap between rows:** This allows you to set the gap between rows.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):&#x20;

* Color scheme/Color scheme transition
* Padding
  {% endhint %}


# Blog posts

The blog posts section allows you to display a list of recent blog posts from a particular blog. To feature only a single post, use the Featured Blog Post section.

<figure><img src="/files/58BS9ojzAckq54L8X8Iq" alt=""><figcaption><p>Blog posts on Composition demo store</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Select the blog you'd like to display posts from
* Optionally, adjust the layout
  {% endhint %}

{% hint style="info" %}
The style and display of the blog posts is controlled through global settings under the [**Settings > Blog post card**](/theme-settings/blog-post-card) section.
{% endhint %}

### Settings

* **Blog:** To display your blog posts, please select the blog you wish to feature.
* **Blog posts:** Select the number of blog posts to display.
* **Layout:**
  * **Number of columns:** You can choose the **number of columns** for **desktop** and **mobile**
  * **Layout (desktop):** This controls the display of excess items that do not fit the grid columns. You can choose between the **slideshow** or **grid** layout.
  * **Container type:** allows you to select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.
* **Slideshow** settings apply to both mobile and desktop when **layout (desktop)** is set to slideshow:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

This section also comes with pre-loaded with two types of option blocks should you wish to add a header above the blog posts or buttons below them:

* [Section header](/blocks/section-blocks/section-header) (hidden by default, fill in the settings to display)
* [Buttons](/blocks/buttons) (hidden by default, fill in the settings to display)

### Examples & inspiration

<div><figure><img src="/files/6AOuvacKpcJMUXyEsC1W" alt="Composition preset features a left-aligned header and tags, a large title, and a read more link for each blog post."><figcaption><p>Composition preset</p></figcaption></figure> <figure><img src="/files/y9AJ3eeHftm0f9IbyfkY" alt="The Gaia preset features a left aligned header, and a blog post with a title and excerpt."><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="/files/mssc8qfiI6ZGu6XufgdO" alt="The Gloss preset features a centered header with badge title and a read posts button underneath. "><figcaption><p>Gloss preset</p></figcaption></figure> <figure><img src="/files/tkWN5OWDAOCoV0Mv69Lw" alt="The savoir preset features a centered header, text badges, a title and a read more link with a button underneath."><figcaption><p>Savoir preset</p></figcaption></figure></div>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="/pages/NpHOfKMzK1i833hukdcC">featured post</a> section allows you to highlight a single post as a split card or as a full-bleed image banner. </td><td><a href="/files/FMwnKRZvlZ1hztT8nhup">/files/FMwnKRZvlZ1hztT8nhup</a></td></tr></tbody></table>


# Cart drawer

In **Theme Settings > Cart**, you can choose whether to have a **cart drawer** or a use a **page** instead, as well as a number of other global cart settings. Find out more about global cart settings on our designated [cart settings](https://docs.ultramarinastudios.com/theme-settings/cart) page.

This article will take you through the settings specific to the **drawer**, although you'll notice it shares a lot of commonalities with page settings.

### Settings

* **Heading size**
* **Layout on desktop:** Choose between **horizontal** and **vertical**<br>

<div><figure><img src="/files/RXBs1xpwypxHjXazzYW4" alt="A cart layout where items and cart controls are stacked vertically, occupying the right side of the screen"><figcaption><p>Vertical layout on the Primavera preset</p></figcaption></figure> <figure><img src="/files/RQEoz15OUsiTBplQlAfY" alt="A cart layout where items and cart controls are stacked horizontally, occupying the top half of the screen."><figcaption><p>Horizontal layout on the Savoir preset</p></figcaption></figure></div>

* **Show dynamic checkout:** See Shopify's documentation about [accelerated checkout](https://shopify.dev/docs/storefronts/themes/pricing-payments/accelerated-checkout#implementing-accelerated-checkout-buttons-in-your-theme)
* **Show View cart button**: When enabled, a "View cart" button appears under the main checkout buttons and navigates users to the [cart page](/templates/cart-page)
* **Products:** This affects the cart items as well as any **Upsell product blocks** you add.
  * **Image width**: Product image width from 70 to 200. Be mindful of checking how this affects the cart on smaller screens.
  * **Product title font**
  * **Price font**

### Blocks

**Upsell product**:&#x20;

* This is a specialized version of the [mini product](/blocks/mini-product) which inherits the **product title font**, **price font** and **image width** specified for the cart drawer (see above)
* It also comes with additional **text** and **text font style** settings to provide optional context about the upsell

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme
  {% endhint %}


# Collapsible content

Collapsible content allows you to create a list of expandable elements.

This section is useful for breaking content down into easy-to-summarize blocks, such as for a **Frequently Asked Questions** page or for product details.

<figure><img src="/files/laZehhjkdmaKV8iRIMkb" alt=""><figcaption></figcaption></figure>

The section comes preloaded with [heading](/blocks/heading), [text](/blocks/text) and [collapsible](/blocks/collapsible) blocks, but all [theme blocks](/blocks) are available to add both at the top level *and* nest within the collapsible blocks themselves.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings).

* Horizontal alignment
* Section header
* Color scheme/Color scheme transition
* Section padding
  {% endhint %}

### Similar sections

Collapsible content can also be presented in parallel with other blocks by using these sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>In this <a href="/pages/NyhQzO19UuMpOqkJt25h">split banner</a>, collapsible content is presented next to an image banner for a full bleed effect. </td><td><a href="/files/RFqRkSM2YqDc3ByXYlvf">/files/RFqRkSM2YqDc3ByXYlvf</a></td></tr><tr><td>In this <a href="/pages/tFIfbMso27hJbrgAxb14">split card</a>, collapsible content is presented next to a shoppable banner with video in order to highlight the features of a specific product.</td><td><a href="/files/WAeJ7dZeNYGXpk5gec17">/files/WAeJ7dZeNYGXpk5gec17</a></td></tr></tbody></table>


# Collection list

The collection list section allows you to display a list of featured collections in a grid or slideshow format.

<figure><img src="/files/ekdJJ8zXGJPEHVrJw208" alt=""><figcaption></figcaption></figure>

* **Collections**: Select which collections to display
* **Layout**:
  * **Desktop columns/Mobile column**s: Choose the **number of columns** on desktop and mobile
  * The **Layout (desktop)** setting allows you to select what happens where there are additional items over the desktop limit: choose between **slideshow** or **grid** if you prefer to stack the collections. On mobile, the collections are displayed in a slideshow by default.
* **Slideshow** settings apply to both mobile and desktop when **layout (desktop)** is set to slideshow:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

### Blocks

This section also comes with pre-loaded with two types of blocks should you wish to add a header above the blog posts or buttons below them:

* [Section header](/sections/section-header)
* [Buttons](/blocks/buttons) (hidden by default, fill in the settings to display)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}


# Contact form

The contact form section allows customers to submit inquries to your store.

<figure><img src="/files/eLnDShKUgXLmnEIqpYV6" alt=""><figcaption><p>Contact form on the Primavera demo store with a custom "Subject" dropdown</p></figcaption></figure>

You can customize the fields available in your contact form by adding blocks. Merchants are not limited to one single contact form: you can use multiple contact form sections to create different forms for different purposes, eg. general customer support vs. wholesale inquiries.

Form field appearance can be modified in the Theme settings, under [Theme Settings > Appearance > Forms.   ](/theme-settings)

You can find out more about where the contact form submissions go by reading the [Shopify documentation.](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/add-contact-page#view-contact-form-submissions)

### Settings

* **Section header:** See [common settings](/common-settings)
* **Layout:**
  * **Button style:** Choose between the primary or secondary button style.
  * **Button width:** Choose between the default button width or full width.
  * **Horizontal alignment:** Choose between **left, center** and **right** horizontal alignments. This only affects the button (if not full width) and the header.

### Blocks

* **Text:** Represents a single-line text field.&#x20;
* **Email:** Represents the customer's email. Limited to one per form.
* **Telephone:** Represents the customer's phone number. Limited to one per form.
* **Dropdown:** Allows the customer to select one option from a list of options.
* **Radio buttons:** Allows the customer to select one option from a list of options. Better if there is only a few options.
* **Checkbox:** A single checkbox.
* **Textarea:** Allows the customer to enter multiple lines of text.

#### Block settings

Here are the types of settings you may find in the above blocks:

* **Label:** Assigns a label to the block.
* **Required:** Allows you to mark a certain field as required for submission.
* **Number of columns:** Some fields allow you to choose if the field occupies one or two columns (for desktop only).&#x20;
* **Options:** For fields that accept multiple options (dropdown, radio buttons), you enter the various options by passing a comma-seperated list of items. eg. 'Red,Blue'

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container width
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}


# Countdown timer

The countdown timer informs customers about promotions or discounts that are available for a limited time only. You can choose a simple color background or select an image or video background instead.

<figure><img src="/files/o0RCWKXJH3PxAwFCUFMF" alt=""><figcaption></figcaption></figure>

* **Layout (desktop)**: Choose between **stacked** or **split** on desktop. Content on mobile is always stacked in a single column. If the stack layout is chosen, the countdown timer position can be reordered by changing the order of the blocks. If the split layout is chosen, the countdown itself will always be pulled to one side (as in the above example).
* **Horizontal alignement**: See [common settings](/common-settings#horizontal-and-vertical-alignment)
* **Vertical alignment**: Only applies when media is selected and the media (or selected desktop/mobile height) is taller than the content itself.
* **Media**:  You can choose between **image** or **video** for both **desktop** and **mobile**. For example, you may select a desktop video but choose an image for mobile to improve performance on mobile data devices. \
  *Note: The video settings take precedence over the image settings, so clear your video selection to display the selected image instead.*
* **Video settings:**
  * **Enable autoplay:** This will autoplay the video when it's in view. If you have concerns about accessibility, we do not recommend enabling this option. Note that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
  * **Play button display**: **Always** display the play button or only display it on **hover/focus**.
  * **Play button style**: Choose between primary, secondary or text for the play button.
  * **Play button alignment**: Choose top left, center or top right for the play button position.
* **Media layout:**
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
  * **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings).

* Container type
* Color scheme/Color scheme transition
* Borders
* Padding
  {% endhint %}

### Blocks

The section comes preloaded with theme blocks ([heading](/blocks/heading), [text](/blocks/text), [buttons](/blocks/buttons)) and a [countdown timer](/blocks/section-blocks/countdown-timer) block, but all theme blocks are available in this section.

### Examples & inspiration

<div><figure><img src="/files/7XA9pKmUTzFvebNYnnl7" alt="Countdown section with a card background behind the text for visbility."><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="/files/njyVq7mhSSpjqIycEts8" alt="Countdown section featuring different color schemes for the countdown itself and the accompanying text."><figcaption><p>Primavera preset</p></figcaption></figure></div>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="/pages/NyhQzO19UuMpOqkJt25h">split banner</a> section allows you to create a full bleed banner paired with a countdown</td><td><a href="/pages/NyhQzO19UuMpOqkJt25h">/pages/NyhQzO19UuMpOqkJt25h</a></td><td><a href="/files/kM3j0kH3qM5TIswaqZcV">/files/kM3j0kH3qM5TIswaqZcV</a></td></tr><tr><td>The <a href="/pages/tFIfbMso27hJbrgAxb14">split card</a> section allows you to place a countdown next to a variety of sections within a card </td><td></td><td><a href="/files/F2MELiMTmkDi3T2rcJzK">/files/F2MELiMTmkDi3T2rcJzK</a></td></tr></tbody></table>


# Custom liquid

Custom liquid is an advanced section where advanced users can add entirely custom code to to the theme.

One major advantage of the custom liquid section is that custom liquid is preserved between migrations without the intervention of a developer, so merchants wishing to make small additions to the theme without making the upgrade path more difficult may wish to do so.


# External video

<figure><img src="/files/8qUS0iduhG6nK8nZpVdy" alt="Screenshot of a placeholder YouTube video on the Primavera Precision preset"><figcaption><p>External video, Primavera's dedicated section for YouTube or Vimeo videos</p></figcaption></figure>

This section is specifically for YouTube or Vimeo videos, as opposed to Shopify-hosted videos which can be used in the [Video banner](/sections/video-banner) section/block.

External videos are a little harder to work with as you can't force them to a specific aspect ratio without losing access to the controls, so we created a section specifically for such videos.

{% hint style="info" %}
You can also add external videos in the [Rich text](/sections/rich-text) and [Rich text columns](/sections/rich-text-columns) sections.
{% endhint %}

* **External video link**: Enter the video URL, e.g. `https://www.youtube.com/watch?v=_9VUPq3SxOc`&#x20;
* **External video poster image:** If you're using an external video, add a poster image. This is displayed before the video is loaded and should match the aspect ratio of the video for better results (the video takes on the same aspect ratio as the poster).
* **Enable autoplay**: This will autoplay the video when it's in view. If you have concerns about accessibility, we do not recommend enabling this option. Note that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
* **External video description**: Describe the video for accessibility purposes
* **Layout:**
  * **Container type:** See [common settings](/common-settings)
  * **Button style:** Choose between primary, secondary or text for video controls

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}


# Featured collection

Featured collection allows you to highlight products from an already existing collection or a custom list of products.

<figure><img src="/files/ZB2Oe1ADPvRutXzUoLIf" alt=""><figcaption><p>Featured collection the Savoir demo store</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Select a collection or specific products
* Optionally, adjust the layout
* The spacing between items is determined in your [global grid settings](/theme-settings)
  {% endhint %}

{% hint style="info" %}
Tip:  While static product lists are a great way to feature specific products, you may want to consider using an established collection for highlighting promoted products or integration with a third-party app for easier management.
{% endhint %}

### Settings

* **Collection**:
  * **Collection**: Select an existing collection
  * **Products**: If you want to hand-pick products instead, leave the collection field empty and select products here
* **Layout**:
  * **Desktop/mobile columns:** You can choose the number of columns for desktop and mobile
  * **Layout (desktop):** This controls the display of excess items that do not fit the grid columns. You can choose between the **slideshow** or **grid** layout.
  * **Container type:** allows you to select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.
  * **Maximum products to show:** Choose how many products should display (between 1 and 25)
* **Slideshow** settings apply to both mobile and desktop when **layout (desktop)** is set to slideshow:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/color scheme transition
* Padding
* Borders

{% endhint %}

### Blocks

This section also comes with pre-loaded with two types of blocks should you wish to add a header above the blog posts or buttons below them:

* [Section header](/sections/section-header)
* [Buttons](/blocks/buttons) (hidden by default, fill in the settings to display)

### Examples & Inspiration

<div data-full-width="false"><figure><img src="/files/v2CR6C6nOkHDrbhwTkWA" alt=""><figcaption><p>Primavera preset</p></figcaption></figure> <figure><img src="/files/9KNVD3C3Wlo4sIXUE1bl" alt=""><figcaption><p>Composition preset</p></figcaption></figure> <figure><img src="/files/69UjtbzQu8Q9HOo4oM5o" alt=""><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="/files/urG73QLhMoxpsIUSqdkd" alt=""><figcaption><p>Gloss preset</p></figcaption></figure></div>


# Featured post

Got a big announcement to share? Highlight a single blog post with the featured post section.

<figure><img src="/files/yqX7Cc2WhJfpI0bdrcAn" alt=""><figcaption><p>Featured post with split style</p></figcaption></figure>

* **Blog post:** Select a **blog post** to automatically pull the title, tags, image and excerpt for the post.
* **Layout**:
  * **Style:** Choose between **split** or **banner** layouts to either overlay the text on top of the image or have it displayed side by side. For portrait images, we suggest choosing the split layout, and for landscape images, we suggest choosing the banner layout.
  * **Heading size**: Choose a heading size for the blog post title
  * **Horizontal/vertical alignment:** Position the text content within the banner
  * **Container width**: See [common settings](/common-settings)
  * **Container type**: See [common settings](/common-settings)
* **Colors**:
  * **Post color scheme:** For example in the above image, the post color scheme is set to scheme 2 (black background)
  * **Background color scheme**: Unless the container type is set to full width, the background of the section will be visible (for example it's white in the above example).&#x20;

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Padding
* Borders
  {% endhint %}


# Featured product

The featured product section allows you add a complete product form to a page other than the product page. Adding a product form to another page can be useful for stores with custom flows.

{% hint style="success" %}
**Quick start**

* [Choose a look](/templates/product) and follow the simple setup instructions

* Browse the available [product blocks](/templates/product/product-blocks)
  {% endhint %}

* **Product**: Choose a product to feature

* **Product media**:
  * **Layout**: Choose between 3 layouts (you can [explore the various looks here](/templates/product)):
    * **Slideshow:** If your images have a portrait ratio, consider using this layout with the image aspect ratio set to **stretch** for maximum visual impact
    * **Thumbnails:** Most flexible layout, great for stores that don't have consistent product image ratios
    * **Vertical scroll, mobile slideshow:** This layout is great if you have several product images per product and your product images are focused on visual storytelling
  * **Mobile maximum width**: Keep product media **full width** or choose **page width** or **compact** to shorten the media height and bring important product details higher up on the page.  <mark style="background-color:green;">Available in version 1.2.0 and later</mark>\
    \
    ![](/files/FvBkxCZEf4HvNRpvENGf)\
    *To achieve the above look, select a slideshow layout for mobile (**slideshow** or **vertical scroll**) with **compact** product media and **slide** animation style.*
  * **Enable zoom:** Allows product images to be zoomed. On touch screens and with keyboard only users, this appears as a modal popup that can be scrolled, for desktop mouse users this appears via a click and hover mechanism. Please note, in order to properly support zoom, you will need to upload high quality product images, we suggest a minimum width or height of 3000 pixels.
  * **Enable autoplay**: If you have video as a part of your product media, this will autoplay the video when it is navigated to. If you have concerns about **accessibility** or you are using the **vertical scroll** layout, we do not recommend enabling this option. Please note, that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
  * **Color scheme**: This setting controls the color scheme of the background color around the media as well as any buttons that may display. If you are using an **adapt slideshow** or **thumbnail** layout, try using a different color scheme for a split panel effect!
  * **Media padding**:
    * On the **thumbnail** layout,  this adds top and bottom padding to the thumbnail section.
    * On the **slideshow** layout, if the **image aspect ratio** is set to **adapt**, this controls the size of the frame around the media.
    * This setting has no effect in the **vertical scroll, mobile slideshow** layout
  * **Button style:** This applies to slideshow and zoom. Choose between primary, secondary or text.

* **Slideshow**: These settings only apply to the **slideshow** and **vertical scroll, mobile slideshow** layouts.
  * **Media size:** Choose between **adapt** and **stretch**. Adapt will display the media in it's original aspect ratio, with space around it. You can control the level of spacing using the **Media padding** setting (see above).
  * **Animation style:** Allows you to choose between a **slide** and a **fade animation.**
  * **Counter style:** Choose between hidden, counter or progress bar.
    * Progress bars on product media appear directly under the image, a different style to progress bars elsewhere in the theme)
    * The progress bar option works especially well with a stretched slideshow layout or if your media section has a different color scheme.
  * **Enable looping**: Unless enabled, the previous button on the first slide and the next button on the last slide are disabled. Enabling this option allows the smooth cycling through the slides.

* **Product information**:&#x20;
  * **Color scheme**: Choose the color scheme for the product information column. When product media and product information have different color schemes, you can [create interesting looks](/templates/product).

{% content-ref url="/pages/NBFcAhZJvt4rpN7om21a" %}
[Why isn't my video autoplaying?](/faqs/why-isnt-my-video-autoplaying)
{% endcontent-ref %}

### Blocks

All the product information blocks are grouped under one parent block called **product information**.

In this grouping block, you can set the following settings:

* **Horizontal alignment**: Aligns content to the left, center or right
* **Vertical alignment**: When the product information content is shorter than the product media on desktop, you can align it to the top, middle or bottom.
* **Container width**: This allows you to control the maximum container width. This setting may not have any effect on smaller screens.
* **Top/bottom padding**: This setting controls for padding on the product information only. To adjust padding on the media section, use the media padding setting.

Within the product information block, you can nest all the different types of [product blocks](/templates/product/product-blocks).

<a href="/pages/SU1VdIj70I80v4rDTevC" class="button primary">Go to Product blocks</a>

&#x20;

<br>


# Footer

<figure><img src="/files/q6yLCV5WBUF5OasY4Goj" alt=""><figcaption><p>Footer on Gloss demo store, featuring two rows of blocks</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Click into each of the preloaded blocks and edit the content

* If you don't need a block, remove it or replace it with other content such as an image
  {% endhint %}

* **Horizontal alignment:** Determines horizontal alignment of all footer blocks. Choose between left, center or right.

* **Vertical grid gap**: When blocks fill out all columns, they wrap to the next row. This setting determines the vertical gap between rows.

* **Horizontal grid gap:** Determines the gap between columns. Large by default.  <mark style="background-color:green;">Available in version 1.1.0 and later</mark>

* **Menu**: The next two settings apply to all blocks of "Menu" and "Social links". This allows you to quickly set styling across all applicable blocks for visual consistency.
  * **Font style**: Choose between all available font styles, from headings to extra small body
  * **Link hover style**: Choose between underline or line. If you have [vertical desktop header](/sections/header) enabled, which uses the line style, you might want to echo that in your footer.&#x20;

* **Show borders**: Enable this setting to display a border at the top of the footer.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings).

* Color scheme/color scheme transition
* Padding
  {% endhint %}

### Blocks

#### A quick introduction to block size

For each block, you can choose the block size (**small**, **large** or **full width**). Here is how these sizes behave by screen size:

<figure><img src="/files/2EUiSIEaLZpW6IDopv2V" alt=""><figcaption><p>Diagram showing how Primavera footer block sizes behave at different screen sizes</p></figcaption></figure>

* **Small**: 1 of 6 columns (Desktop), 1 of 4 columns (Tablet) and 1 of 2 columns (Mobile)
* **Medium**: 2 of 6 columns (Desktop), 4 of 4 columns (Tablet) and 2 of 2 columns (Mobile)
* **Full width**: 6 of 6 columns (Desktop), 4 of 4 columns (Tablet) and 2 of 2 columns (Mobile)

#### Logo

Quickly display the logo you've uploaded to your [theme settings](/theme-settings/logo).

* **Block size:** See explanation [above](#block-size)
* **Use alternate logo version:** Check this option if you've uploaded an [alternate logo](/theme-settings/logo) in theme settings (e.g. a white logo for dark sections) and you want to use it here instead of the regular logo
* **Max width**: Use the logo width defined in theme settings (quick and consistent) or make the logo take up the full width of the chosen block size
* **Link**: Choose a link the logo should go to when clicked, e.g. homepage
* **Link label**: For accessibility, provide a description of the link, e.g. "Homepage"
* **Text**: Optional text that appears below the logo
* **Font style:** Choose a font style for the text setting above

#### Image

* **Block size:** See explanation [above](#block-size)
* **Image**: Upload or select an image
* **Image maximum width:** Bear in mind this will be limited by the selected block size. This setting is a good way of creating space between your image and the next column if the grid is especially tight.
* **Link**: Choose a link the image should go to when clicked, e.g. homepage
* **Link label**: For accessibility, provide a description of the link, e.g. "Homepage"

#### Menu

* **Block size:** See explanation [above](#block-size)
* **Heading**: Optional heading that appears above the menu
* **Menu**: Select which menu should appear here
* **Collapse on mobile**: When checked, the menu will be nested in a full-width collapsible on small screens, regardless of the selected block size  <mark style="background-color:green;">Available in version 1.2.0 and later</mark>

#### Newsletter

When customers enter their email here, a customer record is created with the "Email subscribed" attribute. The customer record will also be tagged with "newsletter".

* **Block size:** See explanation [above](#block-size)
* **Heading**
* **Heading font**
* **Text**: Optional text to describe to describe what customers can expect when they subscribe.
* **Button style**: Primary or secondary
* **Button width**: Default (width of button label) or full to stretch the width of the block
* **Show social media icons**: If checked and you've added [social media links to theme settings](/theme-settings/social-media), icons will display below the newsletter form
* **Enable Follow on Shop**: To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop).&#x20;

#### Rich text

* **Block size:** See explanation [above](#block-size)
* **Text content:** Subheading, Heading, Heading size, Text
* **Button**: Style, button label and button link
* **Show social media icons**: If checked and you've added [social media links to theme settings](/theme-settings/social-media), icons will display below the newsletter form
* **Enable Follow on Shop**: To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop).&#x20;

#### Social links

* **Block size:** See explanation [above](#block-size)
* **Heading**: Optional heading that appears above the links
* **Layout**: Choose between a list of social links (similar to a menu) or icons
* **Enable Follow on Shop**: To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop).&#x20;

#### Spacer

Spacers are useful for controlling spacing on desktop. They are hidden on tablet and mobile.

<figure><img src="/files/I4JsgeEprjY1i9pDGKsI" alt=""><figcaption><p>A spacer is used in the Primavera Precision demo store footer to create some space between the menus and the newsletter form</p></figcaption></figure>

<figure><img src="/files/getf5TntvNvieDJE3jH8" alt=""><figcaption><p>Two spacers are used in the Primavera Gloss footer to create this multirow footer</p></figcaption></figure>


# Header

The main navigation for the site is found in the header section.

<figure><img src="/files/UmSbaF1RyjG1PHItUS5t" alt=""><figcaption><p>Header on the Savoir demo store, with a mega menu block assigned to "Shop"</p></figcaption></figure>

The header mostly contains settings related to the header bar itself and the desktop menus. Settings for the mobile navigation can be found in the [sidebar menu](/sections/sidebar-menu) section.

{% hint style="success" %}
**Quick start**

* Create your desktop menu in **Content > Menus**, then select a **desktop menu** in the Customizer
* Choose your preferred **layout** (horizontal or vertical)
* Decide if you want to **use icons** or text for secondary menu items (cart, login)
* If you want to add **mega menus**, [follow this guide](/guides/how-to-add-a-mega-menu)
  {% endhint %}

### Settings

* **Desktop menu**: [Create a menu](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus) and add it here. The theme will automatically create a nested navigation based on the menu structure, but you may wish to create more visually interesting menus by creating a mega menu block (see below).
* **Layout**:
  * **Layout (desktop)**: Choose between two different header styles on larger screens. On smaller screens, the header menu will always have the sidebar menu trigger on the right, and the logo in the center.&#x20;
    * The **horizontal** desktop layout features the main menu on the left, the logo in the center, and the secondary menu on the right.&#x20;
      * The **vertical** desktop layout features the site logo on the left, the main menu in the center and the secondary menu on the right.  \
        \
        Both menu types support dropdown and mega menus, but we recommend the **horizontal** desktop layout if you have a lot of top level links.
  * **Logo position (desktop)**: Choose between **center** or **left,** only if the layout is set to horizontal
  * **Open submenus on:** Choose between **hover** or **click.** Note that submenus will always open on click for touch devices.&#x20;
  * **Sticky header type:** The sticky behaviors are **none, always** and **on scroll up**. These options describe the conditions under which the sticky header is active. If you are using the **vertical** desktop layout or your header height is tall, we don't recommend using the **always** option as it may take up too much vertical space.
  * **Use icons instead of text**: Converts secondary menu links (such as the cart and login/account links) to be displayed as icons on the desktop layout.
  * **Enable mega menu overlay:** Adds an overlay to cover the rest of the site when a mega menu is open. This will only apply for mega menus, not regular dropdowns.
* **Transparent header:**
  * **Enable** **transparent header:** The header background becomes transparent when certain conditions are fulfilled. The first section on each page must be an imagery based section, such as a slideshow, image, or video banner section, in order for the header to be transparent. You can apply a specific color for the transparent header in the **colors** subsection.
  * **Enable blur on scroll:** Adds a subtle background blur behind the header only when it is transparent, creating a frosted glass effect on scroll
  * **Use alternate logo**: Enable this to display the [alternate logo](/theme-settings/logo#alternate-logo) specified in theme settings.
  * **Text:** Choose the foreground color. For example, if you know that you'll be using only darker images underneath the transparent header, keep it as white (#FFFFFF).
* **Color scheme**: See [common settings](/common-settings)
* **Padding**: See [common settings](/common-settings)
* **Borders**: Enable to create more separation between your header and the rest of the page

### Mega menu blocks

{% columns fullWidth="false" %}
{% column %}

<figure><img src="/files/uKgGcjmebJGcDdK5sGlW" alt=""><figcaption><p>The "Shop" mega menu on the <a href="https://primavera-precision.myshopify.com/">Primavera</a> demo store (horizontal header layout)</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/UmSbaF1RyjG1PHItUS5t" alt=""><figcaption><p>The "Shop" mega menu on the <a href="https://primavera-distinction.myshopify.com/">Savoir</a> demo store (vertical header layout)</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

A mega menu is a way to display dropdown links in a more visually engaging way. Use mega menu blocks when you wish to create hierarchy or draw attention to certain links on your site with imagery in addition to text

To convert a regular dropdown in to a mega menu:

1. Add a new mega menu block&#x20;
2. Type the name of the item you wish to be a Mega menu in the **menu item** field. This must match exactly, including whitespace and casing. The dropdown items for this link will be used to populate the mega menu.
3. Choose a color scheme
4. There are two different layout options for the mega menu, which only apply if an additional color scheme is used.  When the **fade** layout is selected, the mega menu will fade to match the new color scheme. When the **split** layout is applied, the mega menu will be split in half, with one half using the original color scheme and the other using the new color scheme.
5. When using the **vertical** header and the **fade** mega menu, there is a chance that you may have color contrast issues with your original logo. In that case, upload a logo with a different color scheme under **Settings > Logo > Alternate logo** and enable the **use alternate logo** checkbox to switch logos when the mega menu is active.
6. Add up to 3 promotion blocks. For each promotion:
   1. Image
   2. Image ratio
   3. Label
   4. Link

### Megamenu layout options

#### Megamenu with nested submenus and promo blocks

<figure><img src="/files/aoKrD9dezTZ8EDWFbb21" alt="Megamenu with nested submenus and promo blocks"><figcaption></figcaption></figure>

Choose which images, labels and text you want for your promo blocks. You can add up to three promo blocks per mega menu on desktop.

<figure><img src="/files/ZboK7RwiTRhddcSDJKSx" alt="" width="296"><figcaption><p>Settings for promo block 1</p></figcaption></figure>

#### Megamenu with nested submenus (available in v1.5.0+)

<figure><img src="/files/Ym3J0NeBbWWCCw5Pd5LR" alt="Megamenu with nested submenus"><figcaption></figcaption></figure>

If you don't add any promo blocks submenu items will be spread across several columns. Second level menu items will be the headings, and third level menu items will be grouped under the second level items.

#### Megamenu with single level menu (available in v1.5.0+)

<figure><img src="/files/rWPHa2JgswvVCzxLZS1m" alt="Megamenu with single level menu"><figcaption></figcaption></figure>

If you don't add any third level menu items, menu items will be spread across the menu. This is great for a menu with a single hierarchy of items, such as a long list of brands.

### FAQ

<details>

<summary>Why can I only see the hamburger menu on desktop?</summary>

If your screen is on the smaller size or you've zoomed in, you might not be able to preview the desktop menu initially due to the customizer sidebar width. The breakpoint for the header is approximately 1216px (subject to your default font size), so smaller desktop screens may need to zoom out to see the correct layout. To zoom out, press control/command and the minus (-) key simultaneously on your keybard.

</details>


# Image banner

<figure><img src="/files/K28t6Fo8jsf2Bvn95ahw" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Quick start**

* In the section settings, upload/select a desktop image
* Edit/add/remove the nested [theme blocks](/blocks) (e.g. heading, buttons)
  {% endhint %}

An image banner is essentially an image with [theme blocks](/blocks).

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Layout**:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
  * **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Container width
* Horizontal/vertical alignment
* Enable banner click
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

All [theme blocks](/blocks) are available to use in this section.

### Examples & Inspiration

<div><figure><img src="/files/bsWRtmNxaXLhobTM6EP6" alt=""><figcaption><p>The Composition preset features an image banner with a semi transparent card </p></figcaption></figure> <figure><img src="/files/h3eXtAJG4PMIj1nyF6TB" alt=""><figcaption><p>The Gaia preset features an image banner with a shoppable image within it</p></figcaption></figure> <figure><img src="/files/OFhaO7CukttW1sGblsKC" alt=""><figcaption><p>The Gloss preset utilizes media content padding to show product information in a corner</p></figcaption></figure></div>


# Image hotspot

The Image hotspot section lets you place hotspots over an image—perfect for showcasing products in lifestyle photos or labeling elements in a diagram.

<figure><img src="/files/PCRiONSQMfVY9BUklrDf" alt=""><figcaption><p>Image hotspot on <a href="https://primavera-composition.myshopify.com/">Primavera Composition</a></p></figcaption></figure>

{% hint style="success" %}
Available in version 1.1.0 and later
{% endhint %}

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
* **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
* **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Container width
* Horizontal/vertical alignment
* Enable banner click
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

* **Theme blocks**: At the top level of the section, you can add all [theme blocks](/blocks). Note that these overlay the image like [Image banner](/sections/image-banner).
* In the **Hotspots** group, you have the choice between two types of hotspot:
  * **Content hotspot**: This is a simple hotspot you can use to label an image and, optionally, add a link the hotspot. This is great for diagrams, for example highlighting the different features of a garment.
  * **Product hotspot**: This hotspot allows you to connect a product. When the hotspot is clicked, the Quick add modal opens, allowing customers to browse and add to cart. This is great for showcasing products in a lifestyle image.

In both hotspot types, you can change the **horizontal and vertical position** of the hotspot, for both desktop and mobile.

{% hint style="info" %}
This section is flexible so be sure to test your Image hotspot section at different screen sizes to make sure all the content is legible and does not overlap.
{% endhint %}

### Examples & inspiration

<div><figure><img src="/files/qanJb0x98Hr9Nwy0jJAb" alt="A room full of furniture with product labels"><figcaption><p>Composition preset</p></figcaption></figure> <figure><img src="/files/ABRZEv80cHSFNoEMMCIK" alt="Labelled photograph of ceramic tableware"><figcaption><p>Gaia preset</p></figcaption></figure></div>


# Image with text

<figure><img src="/files/S59cddcIMRXnZDOdShPX" alt=""><figcaption><p>Image with text section</p></figcaption></figure>

This section is [Rich text columns](/sections/rich-text-columns) preloaded with an [image](/blocks/image) block on the left and [heading](/blocks/heading), [text](/blocks/text) and [buttons](/blocks/buttons) blocks on the right.


# Logo list

The logo list component allows you to highlight key brand mentions and partnerships in order to improve your brand authority.

<figure><img src="/files/J56pxOEtd1bbVJ6hj0J7" alt=""><figcaption><p>Logo list with auto-scroll enabled, hidden header and top/bottom borders</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Edit the **section heading** (or clear the settings to hide altogether)
* Click into each **logo** block to add an **image** and optional **link** (or delete if not needed)
  {% endhint %}

### Settings

* **Layout:**
  * **Layout**: Choose between **auto-scroll** and **grid.** Auto-scroll will slowly move items across the screen in whichever direction you choose. If there are not enough items to fill the screen width, items will be duplicated in order to fill the available space. In **grid** mode, logos will be stacked on top of eachother without animation.
  * **Scrolling speed**: When auto-scroll is selected, choose the scrolling speed
  * **Scroll direction:** When auto-scroll is selected, choose betwen to left or to right
  * **Base size**: Sets the base size of the logos, from 16px to 160px
  * **Spacing**: Override the space between logo items
* **Grid layout:**
  * **Horizontal alignment:** Control the horizontal alignment of your logos when in **grid** mode
  * **Container type:** Select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.

### Blocks

* [Section header](/sections/section-header)
* **Logo**: To add a logo, hover over the logo list section and press the **Add logo** button. Each logo acceps an image and an optional link. We suggest using .svg files wherever possible for logos in order as this ensures the logo will look crisp, even when resized.
* [Buttons](/blocks/buttons) (hidden by default, fill in the settings to display)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Examples & inspiration

<figure><img src="/files/QK38IRXnLkOiIzvf417a" alt=""><figcaption><p>The Composition preset logo list includes a centered section header.  </p></figcaption></figure>


# Media grid

The media grid is a way to highlight images with an optional quick add button. This section is ideal for displaying shoppable social media images from sites such as Instagram.

<figure><img src="/files/EuZmnrwHQe7dSghIXoeU" alt=""><figcaption><p>Media grid on Savoir demo store</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Click into each **image** block to upload/select an image
* If you want to keep the **rich text** block, edit the nested **heading** and **button** blocks
  {% endhint %}

### Settings

* **Desktop columns**
* **Mobile columns**
* **Layout**: If the number of images exceeds the number of columns, choose to display them either as a grid or as a slideshow
* **Container type**: See [common settings](/common-settings)
* **Vertical grid gap**: Keep as default or override to create tight grids
* **Horizontal grid gap**: Keep as default or override to create tight grids
* **Slideshow** settings apply to the slideshow layout:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

### Blocks

This section comes with four types of blocks:

* [Section header](/sections/section-header) (hidden by default, fill in the settings to display)
* **Rich text**: Allows you to add a simple rich text block like the Savoir example above ("Get Inspired")
* **Image** (similar to the [image theme block](/blocks/image)):&#x20;
  * **Image**
  * **Image ratio**
  * **Behavior:**
    * **Link**: Optionally link the image to another page or social media post
    * **Link label**: If you've added a link, describe the link destination for accessibility
    * **Product**: Optionally, connect a product to display the quick add button
* [Buttons](/blocks/buttons) (hidden by default, fill in the settings to display)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Examples & inspiration

<div><figure><img src="/files/GelroyXYhiekgphHZrEE" alt=""><figcaption><p>Composition media grid, featuring square images with no spacing.</p></figcaption></figure> <figure><img src="/files/zrQ3YfYitf5ZRL1E4PfS" alt=""><figcaption><p>Gloss media grid, featuring portrait images with no spacing</p></figcaption></figure> <figure><img src="/files/IdtLM2mDWsm48y8CSltq" alt=""><figcaption><p>Gaia media grid, featuring square images with no spacing</p></figcaption></figure> <figure><img src="/files/Z2jqphX0dY8pDAWOG84s" alt=""><figcaption><p>Primavera media grid, featuring images with narrow spacing</p></figcaption></figure> <figure><img src="/files/hT7HODacnUStsaGK4zX4" alt=""><figcaption><p>Savoir media grid, with a page width container and narrow spacing</p></figcaption></figure></div>


# Multicolumn

Multicolumn is a flexible section that allows you to create a column layout of mixed text with images, or either images and text alone.

<figure><img src="/files/otfRVwcqP08INy3apY10" alt=""><figcaption><p>Multicolumn section with icon, heading and text blocks</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Click into each **column** and edit the nested **heading**, **text** or **button** blocks — or add new blocks such as **icon** or **image**.&#x20;
* To add a new column, hover over the area where you'd like to add it, click the plus icon and select **Column**. Then populate the preloaded blocks or add new ones.
  {% endhint %}

### Settings

* **Layout**:
  * **Desktop columns**
  * **Mobile columns**
  * **Layout**: If the number of images exceeds the number of columns, choose to display them either as a grid or as a slideshow
  * **Container type**: See [common settings](/common-settings)
  * **Column alignment**: Choose to align the column content to left, center or right
* **Slideshow** settings apply to the slideshow layout:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

### Blocks

This section comes with four types of blocks:

* [Section header](/sections/section-header) (hidden by default, fill in the settings to display)
* **Column:** Contains the following nested blocks:&#x20;
  * [Heading (Simple)](/blocks/heading-simple)
  * [Text](/blocks/text)
  * [Buttons](/blocks/buttons)
  * [Icon](/blocks/section-blocks/icon)
  * [Image](/blocks/image)
* [Buttons](/blocks/buttons) (hidden by default, fill in the settings to display)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding&#x20;
* Borders
  {% endhint %}

### Examples & inspiration

The versatility of the multicolumn section allows you to create sections such as a classic trust banner with icons and a short label, or images with a longer paragraph under them.

<div><figure><img src="/files/Yl3BsjFoY51dunvTDioq" alt=""><figcaption><p>The Composition preset features an icon with heading and text.</p></figcaption></figure> <figure><img src="/files/8yqEcHyAU2BIVDnaZ8ns" alt=""><figcaption><p>The Gaia preset features an icon with a heading.</p></figcaption></figure> <figure><img src="/files/pKzve6GFkOeHAlAg3IN1" alt=""><figcaption><p>The Savoir preset features an section heading, with each column containing an image, a heading, paragraph text and a button. </p></figcaption></figure></div>


# Newsletter

This section renders a standalone newsletter section within the flow of the page.

<figure><img src="/files/dO2U5Onb7YyNjWtrY8aF" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Choose a style:
  * If you want a **background image**, click into the section settings and update the image setting (optionally, choose a different color scheme to improve text contrast)
  * Else if you prefer a **solid color background**, simply keep as is or choose a different color scheme in section settings
* Edit the nested blocks ([heading](/blocks/heading), [text](/blocks/text), [newsletter](/blocks/section-blocks/newsletter))
  {% endhint %}

### Settings

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Layout**: Note that the following settings only apply if you're using a background image:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
  * **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Text content**: See common settings [container width](/common-settings#container-width), [horizontal/vertical alignment](/common-settings#horizontal-and-vertical-alignment)
* **Colors**:&#x20;
  * **Enable overlay**: To improve readability of the text over all screen sizes, use the **enable overlay** setting. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose the linear gradient color

### Blocks

All [theme blocks](/blocks) are available to use in this section, plus the [newsletter](/blocks/section-blocks/newsletter) block for the newsletter form itself.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Section padding
  {% endhint %}

<details>

<summary>Where do my newsletter signups go?</summary>

When someone signs up through your newsletter form, it creates a new Customer in the Shopify Admin with the ‘Email Subscription’ status set to subscribed.

</details>


# Newsletter popup

The newsletter popup is a section where you can add a simple, on brand newsletter popup without the need for external apps.

This section can be disabled so as not to conflict with third-party newsletter subscription apps.

{% hint style="info" %}
To modify the label for the form field, the button text or the success message, edit the theme translations by clicking the **...** button and selecting **Edit default theme content.**
{% endhint %}

{% hint style="info" %}
To add borders around the popup, adjust the [global overlay borders](/theme-settings/appearance#show-borders) setting in theme settings.
{% endhint %}

### Settings

* **Heading**: Choose a heading for the popup
* **Heading font:** Choose a heading style for the heading
* **Horizontal/vertical alignment:** This controls the positioning of the popup on the screen. The horizontal alignment may not be apparent on smaller screens.
* **Color scheme**: Choose a color scheme
* **Display conditions:**
  * **Show once per visitor:** This will ensure that the popup will only be displayed to the visitor once per device. Customers may be annoyed by having to dismiss this popup repeatedly, so we suggest enabling this setting.
  * **Only show on homepage:** This disables the newsletter popup on all other pages except for the homepage.
  * **Show for logged in users:** This will enable the popup for users who have an account but are not subscribed to the newsletter.
  * **Popup delay:** This allows you to set a specific timer for when the popup will be triggered. Displaying the popup too early may cause missed signups if the customer has not had sufficient time to interact with your content."

### Blocks

All [theme blocks](/blocks) are available to use in this section, plus the [newsletter](/blocks/section-blocks/newsletter) block for the newsletter form itself.

<details>

<summary>Where do my newsletter signups go?</summary>

When someone signs up through your newsletter form, it creates a new Customer in the Shopify Admin with the ‘Email Subscription’ status set to subscribed.

</details>


# Recently viewed

This section will output a list of recently viewed products that a customer has already viewed on the store, including products viewed in the quick add window.

### Settings

* **Maximum products to show:** Choose how many products should display (between 1 and 8)
* **Layout**:
  * **Desktop/mobile columns:** You can choose the number of columns for desktop and mobile
  * **Layout (desktop):** This controls the display of excess items that do not fit the grid columns. You can choose between the **slideshow** or **grid** layout.
  * **Container type:** allows you to select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.
* **Slideshow** settings apply to both mobile and desktop when **layout (desktop)** is set to slideshow:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

This section also comes with pre-loaded with a section header block for outputting a header.

* [Section header](/sections/section-header)


# Rich text

Rich text is a versatile section that allows you to display [theme blocks](/blocks) in a single column. Despite it's name,

<figure><img src="/files/zgCHNI2K5Vs7bPFItMiD" alt="Rich text with a cream background, with a subheading, oversized heading and text button"><figcaption><p>Rich text section on the Gaia demo store</p></figcaption></figure>

### Settings

{% hint style="info" %}
The following settings are explained in detail in [common settings](/common-settings):

* Horizontal alignment
* Container width
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

All [theme blocks](/blocks) are available to use in this section.

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="/pages/HQxW41FvUQZn6PnbFydE">Rich text columns</a> allows you to display theme blocks within two columns</td><td><a href="/files/oVncZPs2NJCxKFtgmGvL">/files/oVncZPs2NJCxKFtgmGvL</a></td></tr><tr><td><a href="/pages/V11b5Km1biskjxg7AX8i">Multicolumns</a> allows you to display rich text content in one or more equal columns </td><td><a href="/files/pKzve6GFkOeHAlAg3IN1">/files/pKzve6GFkOeHAlAg3IN1</a></td></tr></tbody></table>


# Rich text columns

Rich text is a versatile section that allows you to display theme blocks in two equal-width columns.

<figure><img src="/files/oVncZPs2NJCxKFtgmGvL" alt=""><figcaption></figcaption></figure>

### Settings

* **Vertical alignment**: Choose whether both columns should be aligned to the top, middle or bottom

{% hint style="info" %}
The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

All [theme blocks](/blocks) are available to use in this section, as well as the following additional blocks:

* [Image banner](/blocks/section-blocks/image-banner)
* [Shoppable banner](/blocks/section-blocks/shoppable-banner)
* [Video banner](/blocks/section-blocks/video-banner)

### Examples & Inspiration

<figure><img src="/files/9oHHYYY1181QoGXFvFy1" alt="Composition preset rich text columns feautring text on the left side, and two differently sized images on the right side."><figcaption><p>Dynamic, asymmetric layouts are possible within rich text columns.</p></figcaption></figure>


# Scrolling content

Scrolling content  creates a marquee-like section where the text autorotates.

<figure><img src="/files/VdjOZdtMEDdOdeydZxzl" alt="Four different configurations of thte scrolling content section "><figcaption></figcaption></figure>

{% hint style="info" %}
By default, this section will respect a customer’s animation preferences. If they have disabled motion or animation at the operating system or browser level, this section will not move. If you wish to create a static section for all users, consider using the rich text section and adjusting the padding.
{% endhint %}

### Settings

* **Scrolling speed**: When auto-scroll is selected, choose the scrolling speed
* **Scroll direction:** When auto-scroll is selected, choose betwen to left or to right
* **Gap between content**: Choose a gap between 0px and 100px
* **Typography**:
  * **Font type**: Choose heading or body
  * **Font size**: Manually choose a font size from 12px to 100px

{% hint style="info" %}
The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

* **Text**
* **Image**:
  * **Image**: Select/upload an image
  * **Image width**: Between 0px and 200px
  * **Link (optional)**: If you add a link, remember to add alt text to your image that describes the link purpose


# Search modal

The search modal is triggered when the user hits the search button. You can surface recommendations to the user before they make their search by adjusting the settings here.

<figure><img src="/files/kFs3KPgXl97XllyVeIxF" alt=""><figcaption></figcaption></figure>

Predictive search, which displays search results in response to a user’s search query, can be enabled or disabled in the global settings under [Settings > Search Behavior](/theme-settings/search-behavior). This feature is enabled by default.

### Settings

* **Popular search terms:** To show a list of popular search terms to the user before they search, use this setting to select a menu. Minimize customer friction by surfacing helpful results for your most popular search queries. Shopify provides the data for your [most popular searches](https://help.shopify.com/en/manual/reports-and-analytics/shopify-reports/report-types/default-reports/behaviour-reports#top-online-store-searches) in your store admin.
* **Collections:** Use this setting to surface a list of your most popular collections in order to guide the customer to key products quicker.
* **Color scheme**: Choose a color scheme for the modal
* **Use alternate logo**: Enable this to display the [alternate logo](/theme-settings/logo#alternate-logo) specified in theme settings.


# Section header

The section header is not meant to be a standalone section. Rather, it is meant to be combined with any other section to create a heading.

<figure><img src="/files/7OHDhjN6c8DSAwDxgSK6" alt=""><figcaption><p>Left-aligned layout</p></figcaption></figure>

<figure><img src="/files/qmNrsSxwl4FCA5Vr8sXN" alt=""><figcaption><p>Center-aligned layout</p></figcaption></figure>

### Settings

* **Layout**: Choose between a **left-aligned** or a **centered** layout
* **Text content**:
  * **Subheading**
  * **Heading**&#x20;
  * [Set as page title](/common-settings#set-as-page-title)
  * **Heading size**
  * **Count (optional)**: If heading accents are enabled, gives users a sense of how many items are in the section
  * **Text**
  * **Button label** and **link**

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding&#x20;
* Borders
  {% endhint %}

{% hint style="info" %}
Tip: Decrease the bottom padding to visually connect the section header to the content below it!
{% endhint %}

### Examples & inspiration

<figure><img src="/files/EdqZSz1G1h9PI2fGGP47" alt=""><figcaption><p>Create a custom product header by adding the title and description as dynamic sources.</p></figcaption></figure>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="/pages/HQxW41FvUQZn6PnbFydE">rich text columns section</a> allows you to add any content within two equal columns for greater flexibility.</td><td><a href="/files/oVncZPs2NJCxKFtgmGvL">/files/oVncZPs2NJCxKFtgmGvL</a></td></tr></tbody></table>


# Shoppable banner

The shoppable banner is essentially an image or video with [mini products](/theme-settings/mini-product).

<figure><img src="/files/zXM2orB4lFWJlYrUNJbp" alt="Shoppable banner on Primavera Precision demo store shows a model wearing a product and a mini product card with quick add"><figcaption><p>Shoppable banner on the <a href="https://primavera-precision.myshopify.com/">Primavera demo store</a></p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Select or upload a background image/video

* Click into the [mini product](/blocks/mini-product) blocks to select products

* Optionally, style your mini products in [theme settings](/theme-settings/mini-product)
  {% endhint %}

* **Media**:  You can choose between **image** or **video** for both **desktop** and **mobile**. For example, you may select a desktop video but choose an image for mobile to improve performance on mobile data devices. \
  *Note: The video settings take precedence over the image settings, so clear your video selection to display the selected image instead.*

* **Video settings:**
  * **Enable autoplay:** This will autoplay the video when it's in view. If you have concerns about accessibility, we do not recommend enabling this option. Note that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
  * **Play button display**: **Always** display the play button or only display it on **hover/focus**.
  * **Play button style**: Choose between primary, secondary or text for the play button.
  * **Play button alignment**: Choose top left, center or top right for the play button position.

* **Layout**:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
  * **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.

* **Products:** These horizontal/vertical settings determine the positioning of the mini products relative to the media (unless content is stacked, in which case it will always be below the media).

* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Color scheme/Color scheme transition
* Padding&#x20;
* Borders
  {% endhint %}

### Blocks

All [theme blocks](/blocks) are available to use in this section.

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="/pages/tFIfbMso27hJbrgAxb14">split card</a> or <a href="/pages/NyhQzO19UuMpOqkJt25h">split banner</a> section allows you to add a shoppable banner next to other content.</td><td><a href="/files/0xDgMsot5OiRAlcfI6UO">/files/0xDgMsot5OiRAlcfI6UO</a></td></tr><tr><td>The <a href="/pages/7Qb935v3sblhXkg9xoPe">slideshow</a> section allows you to create a series of shoppable banners as individual slides.</td><td><a href="/files/FhDrbUGjUK0kONMYhqok">/files/FhDrbUGjUK0kONMYhqok</a></td></tr></tbody></table>


# Sidebar menu

The Sidebar Menu is displayed for mobile users and other small screens. It is displayed as a hamburger menu on small screens.

<figure><img src="/files/SCPmKAHjwdjYJIgCKSFI" alt=""><figcaption><p>Sidebar menu on the Composition demo store</p></figcaption></figure>

{% hint style="info" %}
To edit the desktop menu, head over to the [Header](/sections/header) section.
{% endhint %}

{% hint style="info" %}
If your store supports multiple regions and languages, those selectors will be displayed within the menu drawer by default.
{% endhint %}

### Settings

* **Menu:** This allows you to select the navigation menu for this section.
* **Enable search:** Displays a search link within the menu.
* **Colors**:
  * **Color scheme**: Choose the base color scheme for the sidebar menu
  * If a **Color Scheme Transition** is applied in this section, navigating to a submenu will cause the section color scheme to transition. No transition will be applied if there is no submenu.

### Blocks

Promotion blocks can be added to the menu to draw attention to key links in your store by using images.

* **Menu item:** Determines which menu item to display the promo block under. This must match the menu item exactly. If your menu item is not displaying, double check for any extra space characters.&#x20;
* **Image:** Select an image for your promotion item.
* **Image ratio:** Choose between **Adapt, Portrait, Square** or **Landscape** to control the image aspect ratio.
* **Link and label:** Set the link for your promotion block here. We always recommend using a visible text label for this block for greater accessibility. If you do not include visible label text and your image does not have descriptive alt text, this constitutes a WCAG violation.


# Slideshow

<figure><img src="/files/uMLxEWcHtA9DJKhn5mxO" alt="Image slide in an example slideshow with arrows on either side and text content overlaid in the middle"><figcaption><p>Example of an image slide in a slideshow</p></figcaption></figure>

### Settings

* **Layout**:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile. This setting will apply to all blocks.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
* **Functionality**:
  * **Enable autoplay**: This rotates the slides automatically. If you have concerns about accessibility, we do not recommend enabling this option. When enabled, a play/pause button appears. You can set styling and alignment below.
  * **Autoplay speed**: If autoplay is enabled, set the autoplay speed.
  * **Enable looping**: Unless enabled, the previous button on the first slide and the next button on the last slide are disabled. Enabling this option allows the smooth cycling through the slides.
  * **Animation style**: Choose between a fade or slide animation when users navigate between slides.
* **Navigation**:
  * **Button position**: Choose **overlay** to always have the arrows visible on top of the slide, choose **hover** to turn the user's cursor into a previous/next button or choose **below** to display them underneath the banner.
  * **Button style**: Choose between primary, secondary or text for the button (when **overlay** position is selected) and the play/pause button (when **autoplay** is enabled).
  * **Counter position**: Choose to display the counter **over** or **below** the slide content.
  * **Counter style**: Choose between a simple counter or a progress bar.
* **Autoplay button**:
  * **Button alignment**: Choose top left, center or top right
  * **Button display**: **Always** display the play button or only display it **on hover/focus**.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in our [shared settings guide.](/common-settings)

* Color scheme
* Borders
  {% endhint %}

### Blocks

Two block types are available:

#### Image banner

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Layout:**
  * **Media frame:** Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Text content**:
  * **Horizontal and vertical alignment:** Text can be aligned to different **horizontal** and **vertical alignments,** depending on what works best for your image.
* **Colors**:
  * **Enable overlay**: Enable this to improve contrast between the media and the content&#x20;
  * **Overlay color**: Choose the overlay color and adjust the gradient to your liking

<figure><img src="/files/FhDrbUGjUK0kONMYhqok" alt=""><figcaption><p>A shoppable banner slide within the slideshow section</p></figcaption></figure>

#### Shoppable banner

This block allows you to highlight key products along with a piece of visual media, either an image or video.&#x20;

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Layout:**
  * **Media frame:** Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Products:** These horizontal/vertical settings determine the positioning of the mini products relative to the media (unless content is stacked, in which case it will always be below the media).
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container width
* Color/Color scheme transition
  {% endhint %}


# Split banner

The split banner is one of the most flexible sections in the theme, allowing you to put two types of blocks side by side.

<figure><img src="/files/tPRQKLegTuVED0WjEgqm" alt=""><figcaption><p>Split banner with image banner and shoppable banner blocks</p></figcaption></figure>

### Settings

* **Borders**:&#x20;
  * **Show top/bottom borders**
  * **Show divider border:**  When enabled, a divider border is added between the two blocks. The border takes on the color of the first color scheme border. <mark style="background-color:green;">Available in version 1.1.0 and later</mark>
* **Transparent heade**r: Only applies when transparent header is also enabled in the header

### Blocks

Mix and match two of the following blocks:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="/pages/PQrnEvPG4wbv4NBfNSx0"><strong>Image banner</strong></a></td><td>An image with <a href="/pages/MM4eYy0syF51gQsdO2Bg">theme blocks</a> overlaid</td><td><a href="/files/qp88aALtStm1gIYydiPB">/files/qp88aALtStm1gIYydiPB</a></td><td><a href="/pages/PQrnEvPG4wbv4NBfNSx0">/pages/PQrnEvPG4wbv4NBfNSx0</a></td></tr><tr><td><a href="/pages/drmPO54VLDhoDedtPiyJ"><strong>Video banner</strong></a></td><td>A video with <a href="/pages/MM4eYy0syF51gQsdO2Bg">theme blocks</a> overlaid</td><td><a href="/files/P84ASmaowYQtHbEU1UAA">/files/P84ASmaowYQtHbEU1UAA</a></td><td><a href="/pages/drmPO54VLDhoDedtPiyJ">/pages/drmPO54VLDhoDedtPiyJ</a></td></tr><tr><td><a href="/pages/P8MAm1UOaObtzmGPDMTV"><strong>Shoppable banner</strong></a></td><td>An image or video with <a href="/pages/wxXpZ4OmmfOScjGSlffE">mini product</a> blocks</td><td><a href="/files/DB3soXCIL0VOUT2cRXF7">/files/DB3soXCIL0VOUT2cRXF7</a></td><td><a href="/pages/P8MAm1UOaObtzmGPDMTV">/pages/P8MAm1UOaObtzmGPDMTV</a></td></tr><tr><td><a href="/pages/xQZEqxz9QUJQ2aGvhC5J"><strong>Product banner</strong></a></td><td>Features a single product</td><td><a href="/files/VBTsO662itvIj1rqwclu">/files/VBTsO662itvIj1rqwclu</a></td><td><a href="/pages/xQZEqxz9QUJQ2aGvhC5J">/pages/xQZEqxz9QUJQ2aGvhC5J</a></td></tr><tr><td><strong>Collapsible content</strong></td><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x">Rich text</a> with <a href="/pages/R0vP9opExSsLHitE1mMj">collapsible</a> blocks</td><td><a href="/files/1xsH70JWDAKqoHjMseza">/files/1xsH70JWDAKqoHjMseza</a></td><td></td></tr><tr><td><strong>Countdown timer</strong></td><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x">Rich text</a> with a <a href="/pages/qjEGvkb0GLHFw34yPAnK">countdown timer</a> block</td><td><a href="/files/oNB6bwZeRljlkoMQNXLB">/files/oNB6bwZeRljlkoMQNXLB</a></td><td></td></tr><tr><td><strong>Newsletter</strong></td><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x">Rich text</a> with a <a href="/pages/PBbeJGf8eZsxTENkrlzz">newsletter</a> block</td><td><a href="/files/C8Ae0Ggd3GUptwIQFciR">/files/C8Ae0Ggd3GUptwIQFciR</a></td><td></td></tr><tr><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x"><strong>Rich text</strong></a></td><td>Simple <a href="/pages/N1QJIIOd8U3rHl2M2e0x">rich text</a> block </td><td><a href="/files/Qc4jxNrhI6bIKOlnOmLi">/files/Qc4jxNrhI6bIKOlnOmLi</a></td><td></td></tr></tbody></table>

### Examples & inspiration

<div><figure><img src="/files/RFqRkSM2YqDc3ByXYlvf" alt=""><figcaption><p>The Savoir preset features an image  banner with no text next to collapsible content.</p></figcaption></figure> <figure><img src="/files/kM3j0kH3qM5TIswaqZcV" alt=""><figcaption><p>The Gloss preset features an image banner with text next to a countdown timer.</p></figcaption></figure> <figure><img src="/files/KpHDbxZ9jtL3iS7AKBuY" alt=""><figcaption><p>The Gloss preset features an image banner next to a product banner.</p></figcaption></figure></div>

<div><figure><img src="/files/RXfteUUwmVNvSb4JfDSx" alt=""><figcaption><p>The Primavera preset features an image banner with an image in it next to a product banner.</p></figcaption></figure> <figure><img src="/files/pTSi9RDTNbK7ScoYgMQE" alt=""><figcaption><p>The Primavera preset features an image banner next to a video banner.</p></figcaption></figure> <figure><img src="/files/6oXpMtKwyv0UNVx0luOr" alt=""><figcaption><p>The Gaia preset features an image banner next to a product banner.</p></figcaption></figure></div>

<div><figure><img src="/files/qFDU4VlTJEGAelmk3wux" alt=""><figcaption><p>The composition preset features a video banner next to an image banner with a shoppable image within in. </p></figcaption></figure> <figure><img src="/files/pIhcmx32RnVf8tSYp0li" alt=""><figcaption><p>The composition preset features an image banner with a rich text block that has a product card in it.</p></figcaption></figure></div>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="/pages/tFIfbMso27hJbrgAxb14">split card</a> section allows you to place any two blocks side by side with spacing on either side.</td><td><a href="/files/0xDgMsot5OiRAlcfI6UO">/files/0xDgMsot5OiRAlcfI6UO</a></td></tr><tr><td>The <a href="/pages/HQxW41FvUQZn6PnbFydE">richtext columns </a>section allows you place blocks beside eachother without stretching the images to be equal height</td><td><a href="/files/oVncZPs2NJCxKFtgmGvL">/files/oVncZPs2NJCxKFtgmGvL</a></td></tr></tbody></table>


# Split card

This is one of the most flexible sections in the theme, allowing you to put two types of section blocks side by side in order to create a split card effect.

<figure><img src="/files/nABmdo0F8431cbJSGzAQ" alt=""><figcaption><p>Split card with image banner and rich text blocks, border radius set to section</p></figcaption></figure>

It's very similar to [split banner](/sections/split-banner), except it can only be **padded** or **page width**, never full bleed. This enables you to create some interesting looks, especially if you have [rounded card borders](/theme-settings/appearance#card-border-radius).

If so, you can use the **border radius** setting to achieve the following looks:

<table><thead><tr><th>Look 1: Border radius on the section (default)</th><th>Look 2: Border radius on the blocks</th><th data-hidden></th></tr></thead><tbody><tr><td><img src="/files/oABdm4jOjjkZXX8MF4m8" alt="" data-size="original"></td><td><img src="/files/Ja5LGHx0eVAwGCl4yyfX" alt="" data-size="original"></td><td></td></tr><tr><td>Adds the border radius to the entire card, creating a split card look</td><td>Adds the border to blocks instead, allowing you to highlight one block in particular (keep the other block the same color as the background)</td><td></td></tr></tbody></table>

### Section settings

* **Container type**: Choose between **padded** or **page width**
* **Border radius:** Create between **section** or **blocks** to create looks 1 or 2 (see above)
* **Colors:** See [common settings](/common-settings)
* **Padding**: See [common settings](/common-settings)
* **Borders**:&#x20;
  * **Top/bottom border**
  * **Show split card borders**: Enable a border around the section  <mark style="background-color:green;">Available in version 1.1.0 and later</mark>

### Blocks

Mix and match two of the following blocks:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="/pages/PQrnEvPG4wbv4NBfNSx0"><strong>Image banner</strong></a></td><td>An image with <a href="/pages/MM4eYy0syF51gQsdO2Bg">theme blocks</a> overlaid</td><td><a href="/files/qp88aALtStm1gIYydiPB">/files/qp88aALtStm1gIYydiPB</a></td><td><a href="/pages/PQrnEvPG4wbv4NBfNSx0">/pages/PQrnEvPG4wbv4NBfNSx0</a></td></tr><tr><td><a href="/pages/drmPO54VLDhoDedtPiyJ"><strong>Video banner</strong></a></td><td>A video with <a href="/pages/MM4eYy0syF51gQsdO2Bg">theme blocks</a> overlaid</td><td><a href="/files/P84ASmaowYQtHbEU1UAA">/files/P84ASmaowYQtHbEU1UAA</a></td><td><a href="/pages/drmPO54VLDhoDedtPiyJ">/pages/drmPO54VLDhoDedtPiyJ</a></td></tr><tr><td><a href="/pages/P8MAm1UOaObtzmGPDMTV"><strong>Shoppable banner</strong></a></td><td>An image or video with <a href="/pages/wxXpZ4OmmfOScjGSlffE">mini product</a> blocks</td><td><a href="/files/DB3soXCIL0VOUT2cRXF7">/files/DB3soXCIL0VOUT2cRXF7</a></td><td><a href="/pages/P8MAm1UOaObtzmGPDMTV">/pages/P8MAm1UOaObtzmGPDMTV</a></td></tr><tr><td><a href="/pages/xQZEqxz9QUJQ2aGvhC5J"><strong>Product banner</strong></a></td><td>Features a single product</td><td><a href="/files/VBTsO662itvIj1rqwclu">/files/VBTsO662itvIj1rqwclu</a></td><td><a href="/pages/xQZEqxz9QUJQ2aGvhC5J">/pages/xQZEqxz9QUJQ2aGvhC5J</a></td></tr><tr><td><strong>Collapsible content</strong></td><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x">Rich text</a> with <a href="/pages/R0vP9opExSsLHitE1mMj">collapsible</a> blocks</td><td><a href="/files/1xsH70JWDAKqoHjMseza">/files/1xsH70JWDAKqoHjMseza</a></td><td></td></tr><tr><td><strong>Countdown timer</strong></td><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x">Rich text</a> with a <a href="/pages/qjEGvkb0GLHFw34yPAnK">countdown timer</a> block</td><td><a href="/files/oNB6bwZeRljlkoMQNXLB">/files/oNB6bwZeRljlkoMQNXLB</a></td><td></td></tr><tr><td><strong>Newsletter</strong></td><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x">Rich text</a> with a <a href="/pages/PBbeJGf8eZsxTENkrlzz">newsletter</a> block</td><td><a href="/files/C8Ae0Ggd3GUptwIQFciR">/files/C8Ae0Ggd3GUptwIQFciR</a></td><td></td></tr><tr><td><a href="/pages/N1QJIIOd8U3rHl2M2e0x"><strong>Rich text</strong></a></td><td>Simple <a href="/pages/N1QJIIOd8U3rHl2M2e0x">rich text</a> block </td><td><a href="/files/Qc4jxNrhI6bIKOlnOmLi">/files/Qc4jxNrhI6bIKOlnOmLi</a></td><td></td></tr></tbody></table>

### Examples & inspiration

<div><figure><img src="/files/PBI87zGMt6I9evjtw68F" alt=""><figcaption><p>The Composition preset features an image banner with a product banner, both with media padding offsetting the image from the border.</p></figcaption></figure> <figure><img src="/files/WAeJ7dZeNYGXpk5gec17" alt=""><figcaption><p>The Gloss preset features a shoppable video banner with collapsible content.</p></figcaption></figure> <figure><img src="/files/ydcyfSRY9AbQjC0jBzrS" alt=""><figcaption><p>The Primavera preset features an image banner with a rich text section.</p></figcaption></figure></div>

<div><figure><img src="/files/0xDgMsot5OiRAlcfI6UO" alt=""><figcaption><p>The Savoir preset features an image banner with a shoppable video banner.</p></figcaption></figure> <figure><img src="/files/J72PF4ktNtKu8YHoje0u" alt=""><figcaption><p>The Gaia preset features a rich text block with a shoppable banner.</p></figcaption></figure> <figure><img src="/files/F2MELiMTmkDi3T2rcJzK" alt=""><figcaption><p>The Savoir preset features an image banner with a countdown timer.</p></figcaption></figure></div>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The<a href="/pages/NyhQzO19UuMpOqkJt25h"> split banner</a> allows you to place any two blocks side by side without spacing on either side.</td><td><a href="/files/6oXpMtKwyv0UNVx0luOr">/files/6oXpMtKwyv0UNVx0luOr</a></td></tr><tr><td>The <a href="/pages/HQxW41FvUQZn6PnbFydE">richtext columns </a>section allows you place blocks beside eachother without stretching the images to be equal height</td><td><a href="/files/oVncZPs2NJCxKFtgmGvL">/files/oVncZPs2NJCxKFtgmGvL</a></td></tr></tbody></table>


# Stacked images with text

This section creates a scrolling collage-style layout, overlaying different sized and shaped images as the user scrolls.

<figure><img src="/files/usqw9ez5NarxfUrSeoPZ" alt="Stacked images with text with text on the left and stacking images on the right"><figcaption><p>Stacked images with text on the <a href="https://primavera-precision.myshopify.com/">Primavera Precision demo store</a></p></figcaption></figure>

### Settings

* **Horizontal alignment**: Choose left, center or right alignment for the theme blocks on the left (on desktop)

### Blocks

All [theme blocks](/blocks) are available to use in this section.

This section comes preloaded with a [heading](/blocks/heading), [text](/blocks/text) and [button](/blocks/buttons) theme blocks, as well as a group of **stacked images**. For each nested image block, you have the following settings:

* **Image**: Select or upload an image
* **Image ratio**: Choose between portrait, square or landscape
* **Image width**: Choose a width in %
* **Link**: If you want the image to be clickable and link to a page, enter a URL here
* **Link label:** If you entered a link, be sure to add a label here to describe the link destination, required for accessibility

{% hint style="info" %}
The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Borders
  {% endhint %}


# Testimonials

<figure><img src="/files/ww8fP5zRAy26R8ZCEJ1X" alt="Testimonials section in use on the Primavera Composition demo store"><figcaption><p>Testimonials section in use on the <a href="https://primavera-composition.myshopify.com/">Composition Primavera demo store</a></p></figcaption></figure>

This is a versatile section that allows you to display customer testimonials in a slideshow or stack, with or without images, with or without star ratings.

### Settings

* **Layout**:
  * **Desktop columns**
  * **Mobile columns**
  * **Layout**: If the number of images exceeds the number of columns, choose to display them either as a grid or as a slideshow
  * **Container type**: See [common settings](/common-settings)
  * **Column alignment**: Choose to align the column content to left, center or right
* **Slideshow** settings apply to the slideshow layout:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

### Blocks

This section comes pre-loaded with two types of blocks:

* [Section header](/blocks/section-blocks/section-header)
* **Testimonial**, which has the following nested blocks (all are optional and can be removed):
  * [Image](/blocks/image)
  * **Rating**: Choose a rating between 0 and 5
  * [Heading (Simple)](/blocks/heading-simple): You can use this for the main quote
  * **Text**: Enter an optional author name
  * **Text**: Enter optional secondary text here, for example the author's location, title or another piece of information that adds context to their testimonial

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Examples & inspiration

<figure><img src="/files/dcLqJNg2tbgLnGDeHYS3" alt=""><figcaption><p>The Gaia preset features a testimonial section with shoppable images</p></figcaption></figure>


# Video banner

<figure><img src="/files/l5k484b4Whkiy3l5HoEV" alt="Video banner where there is a still from a video with text overlaid in the center."><figcaption><p>Example of a video banner with subheading, heading, text and button theme blocks</p></figcaption></figure>

The video banner is essentially a video with [theme blocks](/blocks).

* **Media**: Choose a **desktop video** and, optionally, a **mobile video**
* **Video settings:**
  * **Enable autoplay:** This will autoplay the video when it's in view. If you have concerns about accessibility, we do not recommend enabling this option. Note that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
  * **Play button display**: **Always** display the play button or only display it on **hover/focus**.
  * **Play button style**: Choose between primary, secondary or text for the play button.
  * **Play button alignment**: Choose top left, center or top right for the play button position.
* **Layout**:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
  * **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Container width
* Horizontal/vertical alignment
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

All [theme blocks](/blocks) are available to use in this section.

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The<a href="/pages/NyhQzO19UuMpOqkJt25h"> split banner</a> or <a href="/pages/tFIfbMso27hJbrgAxb14">split card section</a> allows you to place the video banner next to any other content block.</td><td><a href="/files/6oXpMtKwyv0UNVx0luOr">/files/6oXpMtKwyv0UNVx0luOr</a></td></tr><tr><td>The <a href="/pages/EkXqq3fBQeAcxGiKwAAt">rich text </a>section allows you place video with other content surounding it.</td><td><a href="/files/Uwhwl66oXNiZ7Ukzepgb">/files/Uwhwl66oXNiZ7Ukzepgb</a></td></tr><tr><td>The <a href="/pages/D3VgT4l2ux4Gp5HAzEsX">external video</a> section allows you to use other sources such as Youtube or Vimeo.</td><td><a href="/files/8qUS0iduhG6nK8nZpVdy">/files/8qUS0iduhG6nK8nZpVdy</a></td></tr></tbody></table>


# Video reels

<figure><img src="/files/XMNfKokqYoT5XV09IEVL" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Available in version 1.6.0 and later
{% endhint %}

This section displays videos that can be set to autoplay in sequence and on scroll, with optional mini products.

* **Enable autoplay:** This will autoplay the video when it's in view. If you have concerns about accessibility, we do not recommend enabling this option. Note that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
* **Enable mute toggle:** If this toggle is disabled when autoplay is enabled, customers won’t be able to listen to audio.
* **Hide producs on inactive videos**: When enabled, only the currently playing video will show its associated mini product.
* **Layout**:
  * **Product position**: Stack the mini product underneath the video or overlay it
  * Desktop columns: Choose between three and four columns. Defaults to three on smaller screen sizes. Resize your browser to make sure four columns works for your selected font size.
  * **Horizontal grid gap**: Leave as default to match your global theme settings or override it just in this section.&#x20;
* **Slideshow**:
  * **Arrow position**: Choose **overlay** to always have the arrows visible on top of the slide, choose **below** to display them underneath the banner.
  * **Counter style**: Choose between a simple counter, a progress bar or hidden.
  * **Button style**: Choose between primary, secondary or text for the button.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Container width
* Horizontal/vertical alignment
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}


# Video with text

<figure><img src="/files/fwGN4M8zXmPfNn9ahfmb" alt=""><figcaption></figcaption></figure>

This section is [Rich text columns](/sections/rich-text-columns) preloaded with a [video](/blocks/video) block on the left and [heading](/blocks/heading), [text](/blocks/text) and [buttons](/blocks/buttons) blocks on the right.


# Blocks


# Badges

<figure><img src="/files/5FCdrsoZ491gLk522VSu" alt="Hero of demo store Precision showing the badges block above the heading."><figcaption><p>Badges added above a heading block</p></figcaption></figure>

### Block settings

* **Badge style:** The styles mirror your [button styles](/theme-settings/colors#buttons). Choose between **primary**, **secondary** or **text**.
* **Badges**: Enter a comma-separated list of badges, for example `New, Sale, Limited Edition`.


# Buttons

<figure><img src="/files/tYENxnjj2YQRQ22BxlR2" alt=""><figcaption><p>Buttons block with two nested buttons on the Gaia preset</p></figcaption></figure>

### Block settings

* **Horizontal alignment:** Keep as **default** to inherit from the parent element or explicitly select **left**, **center** or **right**.

### Nested blocks

This block accepts just one type of nested block:

#### Button

* **Style**: Choose a button style (**primary**, **secondary** or **text**)
* **Button label**: Enter the text label for the button
* **Button link**: Enter or select a URL for the button


# Card

A flexible wrapper block that lets you nest other theme blocks inside it to create a card-style callout, where the background contrasts with the page to draw attention or improve readability.

<figure><img src="/files/CtL1KZFye7xxjeAlWe7N" alt=""><figcaption><p>A card block inside an image banner on <a href="https://themes.shopify.com/themes/primavera/styles/composition">Composition</a></p></figcaption></figure>

{% hint style="success" %}
Available in version 1.1.0 and later
{% endhint %}

### Block settings

* **Width**: Choose **adapt to content** so it adapts to its widest child block or **container width** so it takes up the full width of the container (usually a setting in the parent section).
* **Padding**: Determines the spacing around the child blocks.
* **Enable background blur:** Applies to background gradients with transparency.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Color scheme
* Borders
  {% endhint %}


# Collapsible

<figure><img src="/files/ySQ1xIiaUw38zQqokH1M" alt="Highlighting a collapsible block that was added to a Split banner to provide more contextual information to users."><figcaption><p>Here, a collapsible block has been added to a Split banner to provide more contextual information</p></figcaption></figure>

### Block settings

* **Heading**: Enter what should be displayed on the collapsible block, e.g. "How It Works" in the above example.
* **Font style:** Choose a [font style](/common-settings#font-style) for the heading.
* **Open by default** <mark style="background-color:green;">Available in version 1.4.0 and later</mark>

### Nested blocks

All theme blocks are available to display inside the collapsible block, but the block loads with just the **text block** if you wish to place simple text inside it.


# Discount code

This block allows you to add a discount code that can be applied to the cart with a single click.

{% hint style="success" %}
Available in v1.5.0 and later
{% endhint %}

<figure><img src="/files/CX1KuDD3IiHb5TYMmzoM" alt=""><figcaption><p>Discount code in a Image hotspot section.</p></figcaption></figure>

This component only takes care of the front-end function of the discount code. A valid discount code must be set in the [Shopify Admin](https://help.shopify.com/en/manual/discounts) before this field can be displayed. Shipping-related discount codes cannot be set before the checkout step, so make sure that your discount code is for the order price, not for shipping. The discount code cannot be applied to empty carts.

### Block settings

* **Discount Code**: Enter the discount code here.


# Heading

This block displays an <kbd>h2</kbd> heading with an optional subheading (or "eyebrow" text) above it:

<figure><img src="/files/FhxbpOUn5uFzmY17PFRm" alt=""><figcaption><p>Heading block on Gloss demo store</p></figcaption></figure>

### Settings

* **Set as page title:** For accessibility and SEO purposes, it is important to have one <kbd>h1</kbd> heading per page. This heading should represent the main title of page, for example, "Contact Us", "All products", etc. Checking this box will make the corresponding heading be an `<h1>`tag.<br>

  This setting has no effect on the visual styles of the heading, it only controls the underlying code.

### Nested blocks

* **Subheading**: Also known as an "eyebrow" text, this appears above headings in smaller font. The style of subheading can be adjusted under **Settings > Typography**. To omit a subheading, delete all the text within this text field or, if it's a block, delete the block.
* **Heading:**&#x20;
  * **Heading**: Enter the heading text
  * **Heading size**: Choose the visual style of the heading


# Heading (Simple)

This block displays a simple <kbd>h3</kbd> heading, without a subheading.

### Settings

* **Heading**: Enter the heading text
* **Heading size**: Choose the visual style of the heading


# Icon with text

{% hint style="success" %}
Available in v1.6.0 and later
{% endhint %}

<div align="left"><figure><img src="/files/TCUSYGPsQNAMEjEMNXT9" alt="Icon with text on the Precision product page"><figcaption><p>The icon with text block can be used to display promotions or features.</p></figcaption></figure></div>

Note: this block was only available as a [product block](/templates/product/product-blocks#icon-with-text) until v1.6.0.

Here are the settings:

* **Icon**
* **Icon size**
* **Image (optional)**: Set Icon to "None" so only the image appears.
* **Image maximum width**
* **Text**
* **Font style**
* **Layout**:
  * **Layout**: Row/column
  * **Horizontal/vertical alignment**
  * **Padding**
  * **Gap**
  * **Show borders**
  * **Color scheme**


# Image

<figure><img src="/files/7dlNVGhyGj0tnsATv1DA" alt=""><figcaption><p>An image block is placed inside an image banner to create a unique layered look</p></figcaption></figure>

### Block settings

* **Image**: Upload or select an existing image
* **Image ratio**: Choose **adapt to image** to keep the image's original proportions or select **portrait**, **square** or **rectangle** to restrict it to a specific shape
* **Maximum width**: Select a width between 0px and 1400px. Choose 1400px to make it always full width, since this matches the default page width.
* **Horizontal alignment**: Keep as **default** to inherit from the parent element or explicitly select **left**, **center** or **right**.
* **Link**: If you want the image to be clickable and link to a page, enter a URL here
* **Link label:** If you entered a link, be sure to add a label here to describe the link destination, required for accessibility
* **Product**: Optionally, connect the image to a specific product so that the quick add button appears in the bottom right corner of the image


# Liquid

Liquid is Shopify’s template language. The liquid block lets you add small Liquid snippets to display dynamic content or even just simple HTML.

For example, to create the screenshot below we replaced the heading block with a liquid block that has the following Liquid code:

```
<h2 class="h1">{{ shop.name }}</h1>
```

<figure><img src="/files/6oL5BeLqecjAQ026bPym" alt="Screenshot of Artistry section where the name of the shop is dynamically rendered as the section heading using a Liquid block."><figcaption><p>The name of the shop is dynamically injected as the section heading</p></figcaption></figure>


# Mini product

<figure><img src="/files/iMGrTvacXKFz0oMtiVnw" alt="A mini product features in a shoppable banner block in the split card section."><figcaption><p>A mini product features in a shoppable banner block in the split card section</p></figcaption></figure>

The mini product block showcases a specific product and, depending on the selected style, either allows the customer to navigate to the product page or add it to cart.&#x20;

Because this block appears in many different sections and blocks, much of the styling can be adjusted in [**Theme settings > Mini product**](/theme-settings/mini-product).

### Block settings

In the block itself, there are three settings:

* **Product**: Connect a product
* **Style**: Choose between **card** or **list:**

| Option 1: Card style                                                                                                                                                                                                                                                                                   | Option 2: List style                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><img src="/files/TjfaeDLn56Esf405FaIP" alt="" data-size="original"><br></p><ul><li>The product is added to cart on click, unless it has variants in which case the quick add popup opens.</li><li>You can also customize the color scheme to make it stand out from the rest of the page.</li></ul> | <p><img src="/files/5BqDPOisOP2eUowkQFMe" alt="" data-size="original"><br></p><ul><li>The mini product simply links to the product</li><li>The mini product takes on the parent element's color scheme</li></ul> |

* **Color scheme**: Only applies when card style is selected, else the list style takes on the parent elements color scheme

### Styling ideas:

<figure><img src="/files/3ck5jDPCABdqVEEOxX5I" alt=""><figcaption><p>Here, a mini product is placed in the second column of Rich columns, allowing customers to quickly add the product that's being discussed to their cart</p></figcaption></figure>


# Page

This block enables you to quickly add a whole page's rich text content. For example, the below collapsible on Primavera Savoir's [FAQ page](https://primavera-distinction.myshopify.com/pages/faqs) displays the store's privacy policy, so it only ever needs to be kept updated in one place:

<figure><img src="/files/bkoRLKxZo7DOFbkk0ByV" alt="Collapsible block on Primavera Distinction that displays the privacy policy page information."><figcaption></figcaption></figure>


# Product

Add a product card to any section or block that accepts theme blocks.

<figure><img src="/files/JAEsvuysrNMwMHe6kvCa" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Available in version 1.1.0 and later
{% endhint %}

### Block settings

* **Product**: Connect a product
* **Width**: Select a minimum width between 200px and 600px

{% hint style="info" %}
Settings for the product card, including font sizes and whether quick add is enabled, can be edited globally in **Theme settings > Product card**.
{% endhint %}


# Rating

{% hint style="success" %}
Available in v1.6.0 and later
{% endhint %}

<figure><img src="/files/MNrDzYIKFTPC7Gb99ncW" alt=""><figcaption></figcaption></figure>

Add a manual star rating to any section that accepts theme blocks.

* **Star rating**: Choose 0-5 in 0.5 increments
* **Text**
* **Font style**


# Text

<figure><img src="/files/hsUGREWQOwU9agboVY3n" alt="Screenshot of a text block added below a heading on the Primavera Precision preset."><figcaption><p>Text block added to Primavera them</p></figcaption></figure>

### Block settings

* **Text**
* **Font style:** Choose a [font style](/common-settings#font-style) for the heading.


# Video

<figure><img src="/files/8qUS0iduhG6nK8nZpVdy" alt="Screenshot of a placeholder YouTube video on the Primavera Precision preset"><figcaption><p>External video, Primavera's dedicated section for YouTube or Vimeo videos</p></figcaption></figure>

This is a versatile block that allows you to either load a Shopify-hosted video or an external video.

### Settings

* **Video:** Select or upload a Shopify-hosted video
* **External video link**: Enter the video URL, e.g. `https://www.youtube.com/watch?v=_9VUPq3SxOc`&#x20;
* **External video poster image:** If you're using an external video, add a poster image. This is displayed before the video is loaded and should match the aspect ratio of the video for better results (the video takes on the same aspect ratio as the poster).
* **Enable autoplay**: This will autoplay the video when it's in view. If you have concerns about accessibility, we do not recommend enabling this option. Note that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
* **External video description**: Describe the video for accessibility purposes
* **Button style:** Choose between primary, secondary or text for video controls


# Section blocks


# Countdown timer

This block is available in the [countdown timer](/sections/countdown-timer), newsletter popup and rich text column sections.

* &#x20;**End date and time:** The format YYYY-MM-DD HH:MM is required. This setting uses store time zone defined in Settings, not your local time zone.
* **Hide section when timer ends**: When enabled, the section is removed from the page once the timer ends.
* **Visual**:
  * **Font style**: See [common settings](/common-settings#font-style)
  * **Color scheme:** Sets a color scheme specifically for the countdown block
  * **Background opacity:** Set to 0 to remove the background from the countdown timer numbers
  * **Enable background blur**: When the selected color scheme has transparency, a blur is applied
  * **Accessibility description:** Add a brief description of countdown event, e.g. Sample Sale, 10% Off Beauty, Summer Social RSVP, etc. to be announced to screen reader users to provide context for the countdown.


# Icon

This block can be found in specialized sections such as [Multicolumn](/sections/multicolumn) and enables you to display an icon.

### Settings

* **Icon**: Choose from a selection of icons
* **Icon size**: Choose an icon size

{% hint style="info" %}
If you can't find the right icon, use an [image](/blocks/image) block instead and upload an SVG/PNG. Adjust the size to 20px or 40px to create a similar look to a regular icon block.
{% endhint %}


# Image banner

<figure><img src="/files/K28t6Fo8jsf2Bvn95ahw" alt="An example of an image banner with heading and button blocks on Primavera Distinction."><figcaption><p>Image banner on Primavera Savoir</p></figcaption></figure>

Whether used as a standalone section or as a mix-and-match block in [split banner](/sections/split-banner) or [split card](/sections/split-card), an image banner is essentially an image with [theme blocks](/blocks).

* **Media**: Choose a **desktop image** and, optionally, a **mobile image**
* **Layout**:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile.
  * **Stack content**: By default, text content is positioned over the image (the **never** option). When stacked, content will be positioned below the image instead of overlaid. Choose to stack on **mobile** only or **always** to stack on bock desktop and mobile.
  * **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container type
* Container width
* Horizontal/vertical alignment
* Enable banner click
* Color scheme/color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

All [theme blocks](broken://pages/WSF8E8s2sEiJqIdxH1ip) are available to use in this section.


# Newsletter

<figure><img src="/files/C8Ae0Ggd3GUptwIQFciR" alt=""><figcaption><p>Newsletter block inside a rich text block</p></figcaption></figure>

The newsletter block appears in the [newsletter](/sections/newsletter), [newsletter popup](/sections/newsletter-popup), [split banner](/sections/split-banner) and [split card](/sections/split-card) sections.

### Settings

* **Button style**: Choose between primary, secondary and text
* **Button width**: Choose between default (width of the button label) or full to take up the full width of the container

{% hint style="info" %}
To modify the label for the form field, the button text or the success message, edit the theme translations by clicking the **...** button and selecting **Edit default theme content.**
{% endhint %}


# Product banner

<figure><img src="/files/RuqAPJ61oamcGL1r10X1" alt=""><figcaption></figcaption></figure>

This block is available in the [split banner](/sections/split-banner) and [split card](/sections/split-card) sections and allows you to feature a single product alongside another block of your choice.

### Settings

* **Product**: Select a product
* **Layout**:
  * **Desktop/mobile height**: Choose between **Adapt**, which uses the same aspect ratio as the uploaded image, or one of three fixed sizes, **Small, Medium** and **Large**, for both desktop and mobile.
  * **Stack content**: By default, text content is stacked below the image (the **always** option). Choose **never** to overlay the text content or **mobile** to overlay on desktop and stack on mobile.  <mark style="background-color:green;">Available in version 1.1.0 and later</mark>
  * **Media content padding**: When the text content is overlaid, this setting allows you to choose its spacing from the edge of media. This setting may therefore only be noticeable when the content is aligned to the top/bottom or left/right. **Default** aligns the content to the page width where possible.
  * **Media frame**: Can be used to add a border or frame effect to your image. The background color of this frame inherits from the current color scheme.
* **Colors:**
  * **Enable overlay:** Use this option to improve readability of the text over all screen sizes. Applying a semi-transparent overlay is a great way to ensure both the image and text are visible.
  * **Overlay color**: Choose a linear gradient to apply when the overlay is enabled.

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Horizontal/vertical alignment
* Color scheme/Color scheme transition
  {% endhint %}


# Rich text

<figure><img src="/files/Qc4jxNrhI6bIKOlnOmLi" alt=""><figcaption><p>Simple rich text block</p></figcaption></figure>

This block is used in the [split banner](/sections/split-banner) and [split card](/sections/split-card) sections and may come preloaded with specialized blocks, such as [newsletter](/blocks/section-blocks/newsletter) or [countdown timer](/blocks/section-blocks/countdown-timer) blocks.

### Settings

* **Vertical aligment**: If the opposing block is taller, choose whether to position your rich text content at the top, middle or bottom
* **Text alignment:** Select left, center or right

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings):

* Container width
* Color scheme/Color scheme transition
* Padding
  {% endhint %}




---

[Next Page](/llms-full.txt/1)