# Poetic theme documentation

Welcome to the Poetic Help Center — your companion for launching, polishing, and scaling a Shopify store with confidence.

This Help Center is your playbook: short, section-based articles with clear steps and screenshots. Whether you’re launching your first product or refining a high-traffic storefront, start here, make a change, see the result. 

If you can’t find what you need, reach out — our team at Inspired Labs is here to help. Enjoy building with Poetic.

<a href="https://byinspiredlabs.com/contact-us" class="button primary" data-icon="arrow-turn-down-right">Contact us</a>


# Request Store Setup Help

If you’re using the Poetic theme, we can help you get your store set up — **at no cost.**

As part of our ongoing support, you can request assistance with your initial setup so you don’t have to start from a blank canvas. We’ll create a pre-designed starting point that you can build on and customize to fit your brand.

This is available to all **Poetic users**, including those **currently on the trial**.

To get started, simply fill out this form: [https://theme-setup.byinspiredlabs.com](https://theme-setup.byinspiredlabs.com/)


# Announcement bar

The Announcement bar section includes a group of short messages in the header area.

You can choose different styles, such as a carousel or marquee, to display blocks and draw your customers' attention. Use the announcement bar section to highlight information like:

* Shipping details
* Important updates
* Promotions (e.g., sales or new arrivals)

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

### **1. How to show/hide announcement bar section**

* To hide the Announcement bar section, ensure the "Eye" icon has a slash over it.

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

* Click the "Eye" icon to display the section.
* Click the arrow beside the Announcement bar section to view the announcement blocks.

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

### **2. Section settings:**

* **Show on home page only**: Select this option to display the announcement bar on the homepage. When users navigate to other pages (e.g., Collection, Product, or Blog pages), the announcement bar will be hidden.
* **Marquee style**: Shows announcements in a continuous scrolling format. Select the scroll direction (Left or Right) and set the speed (Slow, Normal, or Fast) to match your needs.

{% hint style="info" %}
**Note***: When users hover their cursor over an announcement, the scrolling will pause automatically for easier reading. Once the cursor moves away, the announcements will continue scrolling as usual.*
{% endhint %}

### **3. Block settings:**

* **Text announcement block:** Adding a brief storewide message (recommended under 10 words), choose an icon to display at the start of the text for visual appeal, and assign a URL to direct users when they click on the link label.
* **Countdown timer block**: Adding a countdown timer with this block creates a sense of urgency and encourages visitors to take action before the timer runs out.
  * Set the countdown’s end date and time.
  * Enable "Hide block after end of timer" to automatically remove the block when the countdown completes.&#x20;
  * Customize the text and an optional link for display.&#x20;
  * In color settings, enable "Use custom color" to override the section’s colors, adjusting the countdown timer and text colors as desired.

{% hint style="info" %}
**Note**: *The countdown timer always appears to the right of the text.*
{% endhint %}


# Header

The header is a section at the top of your website that appears on every page.

This section includes multiple header styles, allowing you to easily customize the main header's appearance.

The header typically contains your store’s logo, main navigation menu, and other elements like a search icon, cart icon, account icon, country/region selector, and social media links. It plays a key role in branding, helping visitors navigate, and highlighting important pages.

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

### **A. Header settings:**

* Click the Header section to open its settings.
* The Cart icon offers two options: **Cart**, **Bag** or **Text**. You can choose between the icon or text style for the cart icon.
* **Sticky header:** controls how the header behaves when users scroll the page.&#x20;

> 1. **None**: The header is not sticky and scrolls away with the page.&#x20;
> 2. **Always**: The header remains fixed at the top of the screen at all times, ensuring constant access to navigation and key elements like search, cart, or account icons.

* **Social media icons**: Use the "Show social media icons" checkbox to display icons. Add links in [***Theme settings > Social media***](/theme-settings/social-media), and include the full URL (e.g., https\://).
* **Search:** Configure search settings in [***Theme settings > Search***](/theme-settings/search), and enable the mobile search bar if you want it displayed below the header.
* **Notifications:** Configure notification settings in [***Theme settings > Notifications***](/notifications), and toggle the bell icon on or off in the header.
* **Logo settings**: Replace the store title with a logo image and change the logo position on desktop & mobile.

{% stepper %}
{% step %}
**Logo image**&#x20;

Click **Logo image** and use the file selector to select or upload your logo file. Use the **Logo width** slider to make your logo larger or smaller on either desktop or mobile. We recommend a logo image with a transparent background.

***Note**: The name of your store displays when no logo image is uploaded. The logo height will change to match the width.*
{% endstep %}

{% step %}
**Desktop logo position**

Adjust the logo position to the left or center on the desktop screen:&#x20;

* *Middle left:* Classic layout with the logo on the left.

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

* *Middle left, menu centered:* Logo on the left, navigation in the center for balanced branding.

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

* *Top left:* Logo at the top left, leaving more vertical space for menus.

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

* *Top center, menu centered below/above:* Places logo at the top center, ideal for symmetrical or luxury brand aesthetics.

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

* *Middle center:* Logo in the center of the header, perfect for minimal layouts or strong brand focus.

<figure><img src="/files/SMwP8yP1M88uGXteBCHq" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Mobile logo position**

Choose **Left** to display the logo on the left (menu shifts right of the cart icon) or **Center** to position it centrally.

<figure><img src="/files/TEou8perEiIdlJnpHP6Y" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

* **Transparent header:** Enable a transparent header background when at the top of the page. You can use an alternate logo, a brand message (such as a tagline) and text color.

{% hint style="info" %}
Ensure the first section on your page is a slideshow, video banner or image banner for best results.
{% endhint %}

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

* **Country/region selector:** Enable the **Country selector** to let customers view your products with their preferred currency. The selector displays countries with their currencies supported in your Shopify Market settings.
* **Language selector: Poetic** **Theme** supports selling in multiple languages. After you have added and published languages to your store, enable the **Language selector** to let customers select their preferred language.

{% hint style="info" %}
**Note**: *For screen widths between 1024px and 1300px, the country/region and language selectors will display in compact format.*
{% endhint %}

* The header section has a group of settings called "**Highlight**": You can highlight specific header items. Enter the exact name of the text you’d like to highlight. Use the color picker to adjust the highlight color.

### **B. Header blocks**

#### **1. Main menu block:**

* **Menu:** Select a menu to display in the header from the available navigation menus.
* **Open menu on hover:** If enabled, submenu items will open automatically when a user hovers over the parent menu item (instead of requiring a click).
* **Mega menu:** Advanced navigation settings for creating a wide-format menu.

#### **2. Menu promotion card block**

Display featured images with promo text, and call-to-action button within the mega menu.

#### **3. Menu full width banner block**

Unlike adding multiple promotion card images in the mega menu, you can add a full-width banner under the menu items with this block.

#### 4. Hero banner block

The Hero banner block displays a high-impact visual on the Header section, featuring scrolling text over an image. It’s ideal for showcasing brand messaging, promotions, or seasonal highlights at the very top of your site.

### **C. Sub-articles**

{% content-ref url="/pages/RSjCfjcmm09uN1YWmUcq" %}
[Menu promotion card block](/header-group/header/menu-promotion-card-block)
{% endcontent-ref %}

{% content-ref url="/pages/QeOVwrXl8YzyjL24OTpX" %}
[Menu full width banner block](/header-group/header/menu-full-width-banner-block)
{% endcontent-ref %}

{% content-ref url="/pages/c71H5OBE3JZFpKfQC1Kr" %}
[Hero banner block](/header-group/header/hero-banner-block)
{% endcontent-ref %}

{% content-ref url="/pages/X9YPYXgAj7TEfLVdvoFc" %}
[Transparent header](/header-group/header/transparent-header)
{% endcontent-ref %}

{% content-ref url="/pages/7U0sBGlabePgWBc6iSl8" %}
[Mega menu](/header-group/header/mega-menu)
{% endcontent-ref %}

{% content-ref url="/pages/LJcmslDtPlwWTucn0AFp" %}
[Customer account](/header-group/header/customer-account)
{% endcontent-ref %}

{% content-ref url="/pages/a8oH8HBHSQz6l2pdaOem" %}
[Search](/header-group/header/search)
{% endcontent-ref %}


# Menu promotion card block

### **How to add a Menu promotion card** in mega menu?

{% stepper %}
{% step %}
Click to add Menu promotion cards block and fill the menu item that you would like to display the images below.
{% endstep %}

{% step %}
Select the image from the Image library. A new promotion card image will be added to the sub-menu.
{% endstep %}

{% step %}
Edit its content, add navigation buttons, and adjust overlay opacity for better text contrast.
{% endstep %}
{% endstepper %}

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


# Menu full width banner block

### **How to add Menu full width banner** in mega menu?

{% stepper %}
{% step %}
Add a **Menu full width banner** block and fill a menu item for the image display.
{% endstep %}

{% step %}
Select the image from the Image library. A new full with banner will be added to the sub-menu.
{% endstep %}

{% step %}
Use the Banner height to change the shape and size of your image banner.
{% endstep %}

{% step %}
You can work on the image: add content, create navigate buttons.
{% endstep %}

{% step %}
Change the Overlay opacity using the promotion card to increase the contrast between the text and image.
{% endstep %}

{% step %}
Choose to overlay text on the image or position the text below the image on mobile.
{% endstep %}
{% endstepper %}

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


# Mega menu

### **How to setup mega menu?**

{% stepper %}
{% step %}
&#x20;Add multiple sub-menus along with **Main menu block**

The mega menu uses the **Main menu** selected. For the mega menu, you first need to create a nested menu with 3 levels of links.&#x20;

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

Enter the exact name of the menu items you’d like to apply the mega menu to into the field text provided.

<figure><img src="/files/h7Kw0503T8e80cHfkyrE" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Click **Add block** and choose either the **Menu promotion card** or **Menu full width banner**

Enter the name of the top-level link of menu item(s) (e.g. "Clothing") you’d like to add promotion cards/full width banner to.

<figure><img src="/files/97d2W3wb4r82Lq8m5Bku" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


# Hero banner block

This block allows you to display a high-impact visual header inside the Header section with optional animated text.

It is designed to provide a visually dominant, brand-defining entry point at the top of the page.

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

### Block settings

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

1. **Devices:** Determines where the Hero banner block is rendered: desktop only, mobile only, or all devices.
2. **Layout**: Determines the visual layout of the Hero banner based on the selected option:

{% tabs %}
{% tab title="Scrolling text" %}
Used to display dynamic, continuously moving text across the banner.

* **First / Second / Third heading**: Enter text phrases that will loop continuously in sequence.
* **Heading size**: Adjust the font size of the scrolling text.
* **Space between headings**: Controls the spacing between each text phrase.
* **Separator style** *(None, Vertical line, Dot, Diamond, Diamond outline)*: Adds a visual separator between headings.
* **Direction** *(Left / Right)*: Defines the scrolling direction of the text.
* **Speed** *(5s → 100s)*: Controls how fast the text scrolls. Lower values = faster movement.

<figure><img src="/files/1Gy1SyMbcRlsMxSUpVrK" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Logo" %}
Ideal for branding-focused banners.

* **Image**: Upload the main logo image displayed on desktop and general devices.
* **Mobile image**: Upload a separate logo optimized for mobile devices.

<figure><img src="/files/0YmQRF9ZoFDmCjlieFcd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Heading" %}
Best for promotional content or key messaging.

* **Heading**: Main title text displayed on the banner.
* **Heading size**: Adjust the size of the heading.
* **Description**: Add supporting text below the heading.
* **Content width** *(200 → 800px)*: Controls the maximum width of the text block.
* **Desktop content position**: Set the position of content on desktop (e.g., Top left, Middle center, Bottom right).
* **Mobile content position**: Adjust content placement specifically for mobile layouts.
* **Button**:
  * **Label**: Enter button text
  * **Style**: Choose between *Solid, Outline, Text*
  * **Link**: Assign a destination URL

<figure><img src="/files/THj7LAdyoq0mt2CMhE6M" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

3. **Image & Video**: Select the media banner. Video will override image if both are set.
4. **Image overlay opacity:** Applies a semi-transparent overlay to increase text legibility.
5. **Desktop banner height:** Sets banner height as a percentage of viewport height.
6. **Additional text**: Allows you to display a subtle text overlay on bottom of Hero banner, often used to guide user interaction. This text is **clickable** and, when clicked, will automatically scroll users down to the header section of the page.
7. **Mobile banner height:** Controls viewport-relative banner height on tablet/mobile.


# Transparent header

### How to setup a t**ransparent header?**

Ensure that you have a Slideshow, Video banner, or Image banner section as the first section on your home page.

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

{% stepper %}
{% step %}

### Upload transparent header logo

The **transparent header logo** is available to help provide better contrast when transparency is used. If a Sticky header is enabled, the Logo image is used while scrolling. This overrides the **transparent header logo image** choice during scroll.
{% endstep %}

{% step %}

### Select text color

Change the color of the text on the transparent header with the Desktop & Mobile text color setting: Light or Dark.
{% endstep %}
{% endstepper %}


# Mobile menu

### How to setup the M**obile menu on desktop?**

{% stepper %}
{% step %}
Add **Main menu** in **Main menu block**.
{% endstep %}

{% step %}
Check the **"Collapse menu on desktop"** checkbox and save the changes

After checked, the navigation into a mobile-style drawer.&#x20;

<figure><img src="/files/kV4SXySE7tpCiCIXnK3y" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Select the **Collapsed menu style** (Expand under logo or Drawer) to control the display of menu items when the mobile-style hamburger icon is clicked:&#x20;

* **Expand under logo** shows the menu items below the logo in a desktop-like layout

<figure><img src="/files/8bAWDTTM8OK8uGFDfbbu" alt=""><figcaption></figcaption></figure>

* **Drawer** displays them in a drawer format similar to a mobile menu. When the mobile-style hamburger icon is clicked, the slide-out mobile drawer is displayed on desktop.&#x20;

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

The mobile menu displays your menu links, social media icons, account, language and region selectors, promotion images, and full-width banner if added.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Note:** *For header with many menu items, the mobile menu format keeps everything neatly organized.*
{% endhint %}


# Customer account

The customer account icon appears in header by default when customer accounts are enabled in your Shopify admin.&#x20;

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

### How to show the account login icon in Header section?

Go to your admin **Settings > Customer accounts** to find the **Show login link in the header of online store and at checkout** option.

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


# Search

Clicking the search icon in the header opens a search drawer.

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

When customers type in the search bar to show immediate results for products, articles, and pages on your store.

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

{% content-ref url="/pages/fd3aiy5uoe5KgO5XFqEQ" %}
[Search](/theme-settings/search)
{% endcontent-ref %}


# Extra details bar

A compact, supplementary space in the header group for including valuable links and highlight information.

Poetic Theme includes an Extra details bar section to help you store important links and information without cluttering the main navigation area (header section).

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

### 1, Section setting:

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

* **Show on home page only:** If checked, this section will be displayed **only on the homepage**. It will be hidden on all other pages across the store. Use this option if the content is relevant exclusively to first-time visitors or homepage-specific promotions.
* **Social media icons:** Check "Show social media icons" to display icons. Add links in **Theme settings > Social media**, and include the full URL (e.g., https\://).
* **Country/region selector:** Enable the **Country selector** to let customers to view your products with their preferred currency. The selector displays countries with their currencies supported in your Shopify Market settings.
* **Language selector:** A Theme supports selling in multiple languages. After you have added and published languages to your store, enable the **Language selector** to let customers select their preferred language.

{% hint style="info" %}
***Note**: For screen widths under 1024px, the country/region and language selectors will display in a compact format, and the social media icons will be hidden.*
{% endhint %}

### 2, **Text message block:**&#x20;

This block displays a custom message. It can serve as an alternative to the Announcement bar, helping keep the header area compact.

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

Enter a message to display on the bar and attach a link if needed.&#x20;


# Email popup

The Email popup section is a simple yet powerful tool designed to capture customer attention and encourage engagement.

This section allows you to display targeted popups for different pages, sources, and customer behavior. This section supports custom messages, imagery, and flexible layouts to maximize impact. The popup can include features such as social media icons, teaser buttons, and device-specific targeting, providing a tailored experience for your visitors.

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

### **1. How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the **Overlay group** beneath the **Header** group.
{% endstep %}

{% step %}
Locate and select **Email popup** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2. Section settings:**

**a. General settings**

* **Display mode**:
  * **Test**: Popup appears every time the page is reloaded, regardless of other settings — ideal for preview and testing.
  * **Active**: Popup behavior follows your actual display settings.

{% hint style="info" %}
**Note**: In “Test” mode, the popup shows on every reload so you can preview it. Switch to “Active” to follow your display settings.
{% endhint %}

* **Image**: Upload an image. Ensure the uploaded image aligns with the message of your popup (e.g., brand visuals, promotional banners). Avoid using images with too much detail or text that may compete with the popup’s content, such as headings and descriptions.

{% hint style="info" %}
**Note**: The image will not display on mobile devices regardless of the settings. This limitation is in place to comply with **Google's Interstitial Guidelines** for mobile popups, which are critical for maintaining SEO performance.&#x20;

**Why?**

* Overly intrusive interstitials (e.g., popups with large images) can disrupt user experience on mobile devices. Google penalizes websites with such popups in search rankings.

* By disabling images on mobile, the section adheres to these guidelines, ensuring that the popup remains user-friendly and SEO-compliant.
  {% endhint %}

* **Image overlay opacity** *(0%–100%)*: Controls the darkness of the overlay layer on the image.

* **Image height:** determines how much vertical space the image takes up, which can affect the overall size and layout of the popup: **Adapt to image size -** Keeps the original image height, **Small**, **Medium**, **Large**.

* **Desktop image position**: Adjust where the image appears in relation to the popup content: **Top, Left, Right or Image as background**

* **Popup position:** Specify the on-screen location of the popup: **Bottom left** or **Bottom right**: Tucked in the corners for minimal intrusion. **Center**: Prominent placement for maximum visibility.

* **Content alignment:** Align the heading and description text within the popup.

* **Delay appearance**: Set the delay time before the popup appears after a visitor lands on your site: **0 → 60 seconds.** Reduces intrusiveness by giving users time to browse before being prompted.

* **Frequency:** Define the time before the popup reappears to the same user after it has been closed: **0 → 30 days.** Helps avoid overloading returning visitors with repeated popups.

* **Show on homepage only:** If enabled, the popup will only display on the homepage.

* **Show social media icons:** Adds your social media icons (configured in [Social media - Theme settings](/theme-settings/social-media)) to the popup for additional engagement.

**b. Teaser button settings**

* **Enable teaser button:** Allows customers to manually reopen the popup by clicking the teaser button.
* **Behavior:** Determine when the teaser button is visible:
  * **Before popup**: Shown before the popup appears.
  * **After popup**: Shown after the popup is closed.
  * **Before and after popup**: Visible both before and after.
* **Button label:** Enter the text for the teaser button, such as "Wholesale with us!" or "Get 10% of your first order"
* **Button position**: Specify the position of the teaser button on the screen: Middle left or Middle right.

**c. Mobile layout settings:**&#x20;

* **Mobile content alignment:** Align the content within the popup for mobile displays: **Left, Center, Right.**

### 3. Blocks settings:

**a. Heading block settings**

* Add a title for the popup, such as “Subscribe for Updates” or “Exclusive Offer”.
* **Heading size**: Adjust the size of the heading text to fit your design: Small, Medium, Large, Extra large, Extra extra large.

**b. Text block settings**

* Add a description to provide additional context for the popup, such as “Sign up for our newsletter and receive 10% off your first order.”

**c. Email form block:**

* **Show name field:** Adds a field for customers to enter their name alongside their email address. If unchecked, only the email field will be displayed.
* **Button settings**:
  * **Button label:** Customize the text for the submit button, e.g., “Subscribe” or “Sign Me Up.”
  * **Button style:** Choose the visual style for the button: **Solid**, **Outline** or **Text**.


# General

General - Theme settings

The **General** settings allow customization of the store’s visual elements. These settings include icon styling, which affects key interface elements in header section, such as the search, account, bag, and cart icons.

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

### **Icon set settings:**

**Style:** This setting defines the appearance of icons in the store’s header, contributing to the overall aesthetic and user experience.

{% tabs %}
{% tab title="Square" %}
Provides a sharp, modern look with defined edges.

<figure><img src="/files/ij29gIb4pfOY02mv3Keu" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Rounded" %}
Offers a softer, more approachable design with curved edges.

<figure><img src="/files/ijFywnkKLoJr10hGn3jm" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}


# Colors

Theme settings - Colors

The **Colors** settings in your theme allow you to customize and harmonize the look of your online store by assigning specific colors to various elements. This ensures a cohesive visual experience across all sections of your theme while aligning with your brand identity.

{% hint style="info" %}
**Note***: Colors can be applied to sections throughout your online store using the Color scheme setting. To effectively use **Color scheme**, refer to the explanation below.*
{% endhint %}

In the theme editor, click the **Theme settings**, then click to open the **Colors** tab.

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

### **1. General:**

These settings determine the default colors for text, headings, links, and the page background.

* **Heading:** Customize the color of all headings across sections for consistency.
* **Text:** Select the color for body text in all sections.
* **Page background:** Defines the body background color of the theme.
* **Text link:** Allows you to assign a distinct color to all hyperlinks.

### **2. Buttons:**

These settings let you define the appearance of buttons across the theme:

* **Button label:** Choose the text color for buttons.
* **Button background:** Assign a background color to buttons.
* **Outline button:** Select a color for the button outline.

### **3. Color scheme overview**

Color schemes are predefined groupings of colors that can be applied to sections for quick and cohesive styling. The Color scheme options are available in certain sections, blocks, and general theme settings.

#### **Color scheme options:**

**a. Default:**&#x20;

Uses the colors defined in **General** and **Buttons** settings for the section's elements.

*➝  The colors configured in **General** and **Buttons** settings will be applied to all sections when the **"Default"** option is selected in the **Color scheme** setting for a section.*

**b. Accent 1, Accent 2, Accent 3 (Primary colors):**

* These schemes are typically associated with bold, darker colors. Assigned to sections for strong visual emphasis.
* **Settings:**
  * **Foreground:** Sets the text and foreground element color for sections using a Primary color scheme.
  * **Accent 1, Accent 2, Accent 3:** Specifies the background color for sections assigned to these schemes.
  * **Gradient**: Each accent color can be enhanced with a gradient effect instead of a solid color.

**c. Background 1, Background 2, Background 3 (Secondary colors):**

* These schemes are typically associated with lighter, softer tones. Ideal for backgrounds and areas needing subtle contrast.
* **Settings:**
  * **Foreground:** Defines the color for text and foreground elements in sections using a Secondary color scheme.
  * **Background 1, Background 2, Background 3:** Determines the background color for sections assigned to these schemes.
  * **Gradient**: Similar to Primary colors, you can apply gradients to Secondary colors for a modern effect.

{% hint style="success" %}
After you define your color scheme in your theme settings, you can assign a color scheme using the Color scheme setting in your theme's sections and blocks.
{% endhint %}

<details>

<summary>How to apply a color scheme to the section?</summary>

* Go to theme editor → Select a section. (eg: Rich text)
* Look for the color scheme setting. The setting is usually located at the end of a section’s settings panel, after all main settings.

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

* Choose from **None, Accent 1-2-3, or Background 1-2-3**.
* Click **Save** to apply the changes.

</details>

By leveraging these comprehensive color settings, you can fully customize your theme’s visual identity while ensuring consistency and brand alignment. The flexibility offered by Primary and Secondary color schemes, combined with gradient options, ensures a modern and engaging design throughout your store.


# Social media&#x20;

Theme settings - Social media

The **Social media** settings allow you to add links to your social accounts, enabling icons to display in various parts of your online store, such as the **Header**, **Footer**, **Sections**, and **Popups**. This integration helps connect your brand’s presence across platforms and makes it easier for customers to engage with you.

In the theme editor, click the **Theme settings**, then click to open the **Social media** tab.

<figure><img src="/files/8nSFamYabtxD7Qf5ZQFc" alt=""><figcaption></figcaption></figure>

### **1. Social icon style:**

Customize the appearance of social media icons.

{% tabs %}
{% tab title="Outline" %}
Displays icons as outlined shapes for a minimalistic and modern design.

<figure><img src="/files/nEj3hMlHvuoImA6VSC4B" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Solid" %}
Displays icons filled with color for a bold look.

<figure><img src="/files/0vWFtaOJaQ1nCzD1GCSu" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **2. Social accounts:**

Add links to your brand’s social media profiles, ensuring they appear as clickable icons in your store. Available fields include: **Facebook, Instagram, X (Formerly Twitter), TikTok, Pinterest, Snapchat, Tumblr, YouTube, Vimeo, Telegram, and Discord.**

<details>

<summary><strong>How to add social media links to Shopify store?</strong></summary>

* **Step 1: Copy your social media profile URLs:**

  * Go to each of your social media accounts.
  * Copy the profile link or specific page URL.

  Example: <https://www.instagram.com/YourUsername>
* **Step 2: Paste the links into the correct fields:**

In the respective fields for each platform in the **Social media** settings, paste the links.

* **Step 3: Verify icon display:**
  * Check that the correct social icons are displayed.
  * Ensure each icon links to the correct page.
* **Step 4: Click Save to confirm your updates.**

</details>


# Layout

Theme settings - Layout

The **Layout settings** in your theme allow for control over the width, spacing, and corner radius of elements on your store, ensuring a cohesive and customizable design.

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

### **1. Page width**:

Adjust how far the sections span across the page. Set the maximum width that your online store will display at using these options: 1200px, 1400px, 1600px, 1800px.&#x20;

**Behavior based on screen width:**

* **When Screen width > Page width:** The section width remains at the selected page width, even if users increase their window or browser width.
* **When Screen width < Page width:** Left and right margins are fixed (non-zero), ensuring sections don’t span full width.

**Example:** If you set the page width to 1400px and view the store on a 1920px screen, the section width will stay at 1400px. On smaller screens (e.g., 768px), margins will ensure the section maintains a visually balanced width.

### **2. Spacing**:

Adjust the margins between sections on both desktop and mobile devices:

* **Space between sections on desktop** (from 0 to 100px): Controls the margin between sections for desktop views.
* **Space between sections on mobile** (from 0 to 100px): Ensures mobile-optimized spacing while maintaining a clean layout.

### **3. Corner radius**:

Fine-tune the roundness of the corners for various elements throughout your store. Range for corner radius: 0px ➝ 40px. **Elements affected:**

* **Buttons:**
  * Buttons in sections like Rich text, Image banner, Grid, etc.
  * Quick add buttons, Buy buttons on product pages.
  * Variant picker block (when in button layout).
* **Content:**
  * Images, videos, and product media displayed on the product page.
  * Sections with content containers like Multicolumn, Image with text, etc.&#x20;
  * Images of products in sections like Featured collection, Collection tabs, Shop the look, and Product grid in the Collection page.
  * Images of collections in the Collection list section and on the Collections list page.
  * Blog images in the Blog post page & Blog posts section.
* **Badges:** Sale badges, Sold out badges, and Custom badges.
* **Dropdown and popups**
* **Country flags.**


# Search

Theme settings – Search

The **Search** feature enhances user experience by enabling customers to quickly find products, collections, or content through relevant keywords. It streamlines navigation and accelerates the shopping process by providing **instant access** to relevant results.

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

### **Search settings:**

#### **1. Search placeholder:**&#x20;

Defines placeholder text in the search bar (e.g., *"Search products..."*) to guide users.

#### **2. Search suggestions:**

* **Show keywords** – Displays suggested keywords based on user input.
* **Show products** – Shows product matches for the entered keywords.
* **Show collections** – Displays collections relevant to the search query.
* **Number of results to show** – Limits the maximum number of displayed suggestions.

#### **3. Keyword recommendations:**&#x20;

*Displayed when no search query is entered*

* **Heading** – Sets the title for keyword suggestions (e.g., *"Popular Searches"*).
* **Suggested keywords** – Add predefined keywords to assist user searches (e.g., *Dress, Top, Bottom*).

#### **4. Product recommendations:**&#x20;

*Displayed when no search query is entered*

* **Heading** – Sets the title for product recommendations (e.g., *"Featured products"*).
* **Suggested products** – Displays predefined product recommendations.
* **Collection** – Choose a collection to feature its products. If selected, this overrides individual product recommendations.


# Cards

Theme settings - Cards

The **Cards settings** allow you to customize how products, collections, and blogs are displayed within their respective sections. Adjust fonts, content alignment, hover effects, and additional elements to enhance user experience and maintain a cohesive design.

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

### **1. Product cards**

Customize the display of individual product cards in sections like Featured collection, Collection tabs, Shop the look, Product grid, etc.

* **Content alignment**: Adjust the alignment of product content, including title, price, and description: Left, Center, Right.
* **Heading font**: Choose whether the product title adopts the font style from the Heading or Body typography settings.
* **Image hover effect**: Define the effect applied when users hover over product images:
  * None: Zoom-in effect applied to the product image.
  * Show second image: Displays the second product image when hovered.
* **Product image border:** Define the border style for product images with three options: **None**, **Subtle**, and **Solid**.
* **Show short description**: Displays a short product description below the product title on product cards. The short description is managed via metafields.

<details>

<summary><strong>How to add a short description?</strong></summary>

*Short descriptions enhance product cards by giving concise, relevant details, improving discoverability.*

**Step 1: Create a custom metafield**:

* From your **Shopify admin > Settings > Metafields and metaobjects**.

<figure><img src="/files/5Icje0KukbpqrZwBZkoG" alt=""><figcaption></figcaption></figure>

* Select **Products** from the options > Click **Add definition**.&#x20;

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

* Enter **Name** your field, for example, "Short description" or "Product summary".
* Enter **Namespace and key**: `custom.short_description`

**Note:** The **Namespace and key** must be exactly `custom.short_description` for the short description to appear on product cards.

* Set the **Type** to Multiline text or Rich text so you can enter a description.&#x20;

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

* **Click Save** the new metafield definition.&#x20;

**Step 2: Add the metafield to the product**:

* From your **Shopify admin**, navigate to **Products**, and select a product.&#x20;
* Scroll to the bottom of the product page to find Product metafileds, select your new metafield.&#x20;
* Enter your short description in the metafield.&#x20;
* **Click Save**.

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

**Step 3: Enable Show short description in Product cards in the theme editor.**

<figure><img src="/files/2Wqgh6OZOQTpnVZRqT40" alt=""><figcaption></figcaption></figure>

</details>

### **2. Collection cards**

Control the appearance of collection cards in Collection list section and on the Collections page.

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

* **Heading size:** Adjust the font size of the collection title.
* **Content position:** Define whether the collection content appears:
  * **Overlay image:** Displayed on top of the collection image with a semi-transparent background for readability.
  * **Below image:** Positioned under the collection image.
* **Content alignment:** Adjust the alignment of the collection title and product count: Left, Center or Right.
* **Show product counts:** If checked, displays the number of products within the collection under the collection title.
* **Collection image border:** Define the border style for collection images with three options: **None**, **Subtle**, and **Solid**.

### **3. Blog cards**

Blog cards are used in the Blog posts section and on the Blog page to highlight posts attractively.

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

* **Heading size:** Adjust the font size of the blog title.
* **Content alignment:** Set the alignment of blog content, including title, date, author, and excerpt.
* **Show author:** Displays the author's name below the blog title.
* **Show date:** Shows the published date of the blog post.
* **Show excerpt:** Displays a summary of the blog content provided by the author. Ideal for enticing readers with a brief overview of the blog post.
* **Show "Read more" button:** Adds a "Read more" button beneath the post. Clicking it directs users to the full blog content.
* **Blog post image border:** Define the border style for blog post images with three options: **None**, **Subtle**, and **Solid**.


# Badges

Theme settings - Badges

Badges are visual labels used on product cards/product page to convey important information at a glance. They enhance the shopping experience by drawing attention to key details about the product's status, such as promotions, stock levels, or unique features.

* **Custom badge:** A personalized label that highlights unique product features or categories, such as "New Arrival" or "Limited Edition." Requires adding a specific tag in the product settings.
* **Sale badge:** Indicates products currently on sale. Designed to attract attention and boost conversions by showcasing promotions.
* **Sold out badge:** Appears on products that are out of stock or when all variants are unavailable. Helps manage customer expectations by clearly indicating unavailable items.

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

### A. Settings:

#### **1. Badge position**

* **Top left:** Displays the badges on the top-left corner of the product image.
* **Top right:** Displays the badges on the top-right corner of the product image.
* **Below image:** Positions badges beneath the product media, aligning with the content block of the product card.

#### **2, Sale badge**

The **Sale badge** can be customized to display the type of discount or a custom message.

* **Show discount amount:** When checked, replaces the default "ON SALE" text with the specific discount amount. For example: "SAVE 11%".
* **Discount type:** Defines the format of the discount displayed on the badge:
  * **Percentage:** Displays the percentage discount, e.g., "SAVE 11%".
  * **Amount:** Displays the discount in the store’s currency, e.g., "SAVE $100":
  * **Text:** Displays static text, e.g., "ON SALE".
* **Background:** Choose the background color of the sale badge.
* **Text:** Choose the text color for the sale badge.

#### **3, Sold out badge**

* **Background:** Choose the background color of the sold-out badge.
* **Text :** Choose the text color for the sold-out badge.

#### **4, Custom badge**

* To display a custom badge, add the tag \_theme\_custom\_text in the product settings. Replace "custom\_text" with the desired badge text.
* **Background:** Choose the background color of the custom badge.
* **Text:** Choose the text color for the custom badge.

<details>

<summary><strong>How to create custom badges?</strong></summary>

* Navigate to the product settings in your **Shopify admin**.
* Add a tag starting with "\_theme\_" followed by your custom badge text.&#x20;

**Example:** A tag like "\_theme\_NEW ITEM" will display the badge "NEW ITEM".

* Save the product, and the badge will appear on its product card.

</details>

### **B. Badge priority rules**

When a product qualifies for multiple badges, they are displayed based on a predefined hierarchy:

* **Custom badge:** Always takes the highest priority. If a product has a custom badge tag, it will appear first.
* **Sold out badge:** If a product is out of stock (or all its variants are out of stock), the Sold out badge will display, overriding the Sale badge (even if the product is on sale).
* **Sale badge:** Displays only if Sold out badge is applicable.

#### **Example scenarios:**

* A product tagged with \_theme\_new\_arrivals, marked as on sale, and out of stock: The **Custom badge** ("NEW ARRIVAL") will display firstly. The **Sale badge** will also display, appearing alongside the Custom badge
* A product that is out of stock and on sale: Only the **Sold out badge** will appear, as it takes priority over the sale badge.
* A product that is on sale and in stock with no custom badge: The **Sale badge** will display.

{% hint style="info" %}
**Note***: This priority system ensures badges provide clear and relevant information to the customer.*
{% endhint %}


# Typography

Theme settings - Typography

Typography settings allow you to define the style, size, and format of text across your store, ensuring a cohesive and readable design that aligns with your brand identity.

&#x20;In the theme editor, click the **Theme settings**, then click to open the **Typography** tab.

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

### **1. Headings:**

These settings control the font and appearance of all headings throughout your store.

* **Font :** Select a font from the Shopify font library to apply to headings in all sections.
* **Font size (Slider: 50% → 150%):** Adjust the font size of headings to scale their prominence.
* **Text case:** Choose how the text case of headings appears.
  * **Default:** Retains the natural text case of your input.
  * **Lowercase:** Converts all text to lowercase.
  * **Uppercase:** Converts all text to uppercase.
  * **Capitalize:** Capitalizes the first letter of each word.

### **2. Body:**

Settings that control the font and style of the body text, which appears in descriptions, paragraphs, and supporting content.

* **Font:** Choose a font from the Shopify font library to apply to body text.
* **Font size (Slider: 50% → 150%):** Adjust the size of body text for better readability.

### **3. Buttons:**

Control the font used in all buttons across your store.

* **Font:** Select a font for button text to ensure consistency with your brand style.

### **4. Navigation:**

Manage the typography for navigation menus, including font and text formatting for all menu links.

* **Font:** Choose whether the navigation menu text uses the Body or Heading font.
* **Font size (Slider: 50% → 150%):** Adjust the size of navigation text for enhanced visibility.
* **Header menu text case:** Define the text case for top-level links in the header menu.
  * **Default:** Retains the natural text case of your header menu.
  * **Lowercase:** Converts all text to lowercase.
  * **Uppercase:** Converts all text to uppercase.
  * **Capitalize:** Capitalizes the first letter of each word.

### **5. Announcement:**

Typography settings for the announcement bar, often used to display promotional or informational messages.

* **Font:** Choose whether the announcement bar text uses the Body or Heading font.
* **Font size (Slider: 50% → 150%):** Adjust the size of the text in the announcement bar for clarity and emphasis.


# Swatches

Theme settings – Swatches

Swatches are **visual indicators** of product variants, enhancing user experience by: providing instant feedback by updating the main product image when a swatch is selected and improving page aesthetics with an interactive color selection component.

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

### **1. Adding Color swatches using category metafields**

* **Assign a product category**

  * Navigate to the **Category** section and select an applicable category, such as **Apparel & Accessories > Clothing > Clothing Tops > Shirts** or any category supporting the **color metafield**.&#x20;

  <figure><img src="/files/sPLU5PsqPFKCGTRc1Mit" alt=""><figcaption></figcaption></figure>
* **Connect category metafields for color**

  * Click the **dynamic source icon ⛁** to link the category metafield to **Color**.
  * To add custom option values, click **Edit > Add new entry**, complete the fields, and click **Save**.

  <figure><img src="/files/6Ah5zjJSkYOiYEL7MOad" alt=""><figcaption></figcaption></figure>
* **Apply color swatches to your online store:**
  * Once configured, swatches will be available across relevant product displays.

### **2. Swatch settings:**

**Customization options:**

* **Type:** Defines swatch display method: **Color** – Shows variant color; **Native** – Displays an image if assigned to the variant.
* **Ratio:** Determines swatch shape: *Square (1:1), Landscape (4:3), Portrait (3:4), Circle*
* **Style:** Controls corner radius for a refined look.


# Cart

Theme settings - Cart

The **Cart** settings provide tools to customize how customers interact with their cart, allow for flexibility in how the cart is displayed, making it easy for customers to review their items and proceed with their purchases.

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

### **1. Cart type:**&#x20;

Choose how the cart is presented when a product is added:

{% tabs %}
{% tab title="Page" %}
Redirects customers directly to the cart page after they add a product or click on the cart icon. Provides a clear path to the checkout, suitable for businesses that prioritize quick conversions.

<figure><img src="/files/gPefS8wDdC82Jn83fobk" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}
Activates a slide-out cart that appears from the right side of the screen when a product is added.

<figure><img src="/files/delCfEgFjXMnpkKx6Rvi" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **2. Show vendor:**&#x20;

Displays the vendor name beneath each product in the cart. Particularly useful for marketplaces or stores featuring products from multiple brands or manufacturers, ensuring brand visibility and customer clarity.

### **3. Hide quantity selector:**&#x20;

Removes the quantity selector from the cart drawer. Simplifies the interface. Ensures a cleaner layout, reducing distractions.

### **4. Enable cart notes:**&#x20;

Adds a cart note field within the cart drawer. Allows customers to provide additional details or instructions regarding their order. Perfect for personalized items, gift wrapping instructions, or special delivery notes.

### **5. Show dynamic checkout buttons:**&#x20;

Displays checkout buttons that allow customers to proceed directly to their preferred payment method, such as PayPal, Google Pay, or Apple Pay. Speeds up the checkout process by allowing customers to proceed directly to their preferred payment method. Visible on cart page only.

### **6. Show tax status and shipping policy link**:&#x20;

If unchecked, the tax status and shipping policy link will be hidden from the cart and checkout sections.

### **7. Cross sells:**&#x20;

Use cross-sells to recommend additional products from a chosen collection or product list. This feature is only available in the cart drawer.

* **Enable cross sells**: If enabled, suggested products appear in the cart page & cart drawer.
* **Label**: Customize the heading for the cross-sell group (e.g., "You may also like").
* **Product source:** Choose the product recommendation source: From product list or From collection.
* **Product list**: Manually select specific products to display.
* **Collection**: Automatically pull products from a selected collection. If both are set, the collection overrides the product list.
* **Image ratio**: Choose how product images appear: Square or Portrait.

### **8. Free shipping message:**&#x20;

The **Free shipping message** is a powerful tool to incentivize customers by showing them how close they are to qualifying for free shipping. By dynamically updating the progress, this feature encourages larger orders, helping to increase the average order value.

This feature requires a **free shipping rate** to be configured in your Shopify admin. Follow the steps below to set up the rate and customize the Free shipping message.

#### **a, Setting up a free shipping rate in Shopify admin:**

To enable the Free shipping message, first set up a free shipping rate:

* **Step 1**: In your Shopify Admin, navigate to **Settings > Shipping and delivery >** Locate **General shipping rates**

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/07df9273-520d-4e2c-a32d-f867150920a1/image.png" alt=""><figcaption></figcaption></figure>

* **Step 2**: Under the **Shipping zones**, find the zone where you want to apply free shipping. Click **Add rate**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/4d5bbbd7-ceb4-487a-8a3c-74280a61a0e6/image.png" alt=""><figcaption></figcaption></figure>

* **Step 3**: Leave the **Price field** as **0.00** to indicate free shipping.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/c1956204-8e9c-4121-bf0c-c2957eaa4303/image.png" alt=""><figcaption></figcaption></figure>

* **Step 4**: Click **Add conditional pricing** and select **Based on order price**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/7d0b4409-c5ee-4daa-8b0e-d5c30a8495ef/image.png" alt=""><figcaption></figcaption></figure>

* **Step 5**: Enter the **minimum price required** for the free shipping to apply.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/1161fad9-7048-42fd-9d35-b92fda920dfd/image.png" alt=""><figcaption></figcaption></figure>

* **Step 6**: Click **Done**, then click **Save** to finalize your free shipping rate.

#### **b, Free shipping message settings:**&#x20;

Customize the Free shipping message with the following settings:

* **Show free shipping message**: Enable/disable the free shipping message.
* **Minimum spend to get free shipping:** Specify the minimum order value required for free shipping. Enter numbers only (e.g., 100).

{% hint style="info" %}
**Note**: For stores with multiple currencies, specify amounts for each currency using their codes (e.g., USD:100, EUR:95, JPY:13000). If no value is entered, the block will not appear.
{% endhint %}

* **Message:** Enter a custom message to display to customers. As items are added to the cart, the message adjusts accordingly, keeping customers engaged and encouraging them to reach the free shipping threshold. Example: "*You are ||amount|| away from free shipping."*

{% hint style="info" %}
**Note*****:*** Use || amount|| as a dynamic placeholder that automatically calculates and displays the remaining amount customers need to qualify for free shipping.
{% endhint %}


# Quick add

Quick add - Theme settings

The **Quick add** feature enhances the shopping experience by allowing customers to add products to their cart without navigating away from their current page. It’s particularly beneficial for stores with a large catalog, enabling faster browsing and a streamlined checkout process.

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

### **1. Desktop button type:**&#x20;

Define how the Quick add button appears on desktop:

{% tabs %}
{% tab title="Bag icon" %}
Displays a minimalistic bag icon as the Quick add button.

<figure><img src="/files/9Fdpe3qP2ZT3QvULWNGe" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Cart icon" %}
Shows a cart icon, offering a universally recognized symbol for cart actions.

<figure><img src="/files/3EP1DCfxpf2UK4jMtkc0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}
Displays a full-text button with customizable styles for greater visibility.

<figure><img src="/files/JYXK8m3BOqWp6HXKI5pH" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **2. Desktop button style:**&#x20;

Customize the appearance of the Quick add button on desktop:

* **Solid:** Features a filled button for a bold and prominent look.
* **Outline:** Displays a bordered button for a minimalist and subtle aesthetic.

### **3. "Add to cart" behavior:**&#x20;

Determine the behavior of the Quick add button when clicked:

* **Direct add to cart:**
  * For **products without variants**, the button shows "Add to cart." Clicking the button adds the product directly to the cart without opening the Quick view.
  * For **products with variants**, the button displays "View options." Clicking it opens the Quick view, allowing customers to select variant options before adding the product to their cart.
* **Always show quick view:** Regardless of whether the product has variants or not, the Quick view opens when the button is clicked. The button always displays "View options."

### **4. Devices:**&#x20;

Determines which devices (mobile, desktop, or both) the Quick Add button appears on.

### **5. Mobile layout settings**

* **Mobile button type:** Choose the display style of the Quick add button on mobile:
  * **Bag icon:** Simple and compact, suitable for smaller screens.
  * **Cart icon:** Offers a familiar and functional look for mobile users.
  * **Button:** Displays a full-text button for enhanced clarity on mobile interfaces.
* **Mobile button style:** Adjust the design of the Quick add button for mobile devices:
  * **Solid:** Provides a filled button for greater emphasis.
  * **Outline:** A bordered button for a cleaner, understated look.


# Mobile dock

Theme settings - Mobile dock

The **Mobile dock** is a navigation bar specifically designed for mobile devices, appearing at the bottom of the screen. It provides quick access to essential features such as **Home, Menu, Search, Account**, and **Cart**. The Mobile dock enhances the user experience by allowing users to quickly switch between key areas of the store without scrolling or accessing the header menu.

*<mark style="color:red;">(screenshot)</mark>*

### **1. Mobile dock:**&#x20;

Controls the visibility of the mobile dock at the bottom of mobile screens.

* **None**: Mobile dock is hidden.
* **On scroll up**: Dock appears when users scroll upward.
* **Always**: Dock is always visible on screen.

{% hint style="info" %}
**Note:** Enabling the mobile dock will automatically disable the sticky header on mobile.
{% endhint %}

### **2. Color scheme**:&#x20;

Choose a color scheme to customize the dock’s background and text colors.


# Notifications

Notifications - Theme settings

The **Notifications** settings allow merchants to configure how in-store alerts are displayed, ensuring customers receive important updates or promotion offers in a visually engaging way.

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

### **1. Display settings**

* **Heading:** Sets the heading text when the merchant opens the notification drawer.
* **Enable pulse effect:** If unchecked, the bell icon remains static. If checked, the bell icon will animate with a subtle pulsing effect to attract attention and encourage interaction.
* **Open link in new tab:** If checked, clicking the notification link will open it in a new browser tab.

### **2. Notification configuration&#x20;*****(Up to 5 Notifications)***

Each notification can be customized with the following settings:

* **Enable notification:** If checked, the notification will be displayed.
* **Image:** Allows to upload an image for the notification.
* **Heading:** Sets the main title of the notification.
* **Description:** Adds supplementary information to the heading for more context.
* **Link label:** Defines the label for the clickable link within the notification.
* **Link:** Assigns a destination URL to the notification.


# Extras

Extras - Theme settings

### 1. **Currency codes**

* **Show currency codes:** Displays the currency code alongside product prices (e.g., **$1.00 USD**).

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

{% hint style="info" %}
**Note***:* Cart and checkout prices always include currency codes regardless of this setting.
{% endhint %}

### **2. “Back to top” button**

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

* **Enable back to top button:** When checked, a "Back to top" button appears after customers scroll down the page. It quickly brings users back to the top of the page with a single click, reducing the need to scroll manually.
* **Button position:** Determines the button’s location on the page to **bottom left/bottom center/bottom right position.**
* **Button style:** Sets the button’s shape for visual customization: **Square, Slightly round or Circle.**


# Image banner

The Image banner section displays a striking full-width image with customizable text, buttons, and an optional countdown timer.

This section is ideal for creating high-impact visuals that promote key products, highlight offers, or showcase new collections. It offers full control over layout, styling, and mobile responsiveness, ensuring a seamless experience for your visitors across devices.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Image banner** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

Click on the **Image banner** section to open the section settings

* **Image**: Add an image for the desktop view. This image will display as the main background for the banner section. *Recommended dimensions: 1920 x 1080px* to ensure high resolution across larger screens.
* **Mobile image**: Upload a separate image specifically for mobile view to optimize visuals on smaller screens. If a mobile image isn’t uploaded, the desktop image will automatically be used for mobile as well. *Recommended dimensions: 1000 x 500px* for better fit on mobile devices.
* **Image link**: Assign a URL link to the image banner. When a visitor clicks on any part of the image, they’ll be directed to the specified URL.

{% hint style="info" %}
**Note***: If buttons are added to the banner, the image link will be disabled to prevent conflicts between clickable elements.*
{% endhint %}

* **Image overlay opacity**: Control the transparency of a color overlay on the image, adjustable from 0% to 100%. Increasing opacity can help improve text readability on the banner by darkening the image slightly. Select an overlay effect to style the image banner:

{% tabs %}
{% tab title="Gradient from bottom" %}
Applies a gradient starting from the bottom of the image.

<figure><img src="/files/YbSLofrnAK5sB5OF808P" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Gradient from top" %}
Applies a gradient starting from the top of the image.

<figure><img src="/files/xEumIwu8FjLKfPWy3jy0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Full image darken" %}
Applies a full, darkened overlay across the entire image.

<figure><img src="/files/CzPt6HDjUDoQKaTxqsDf" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Desktop banner height**: Customize the height of the banner image on desktop displays: **Small**, **Medium**, or **Large** adjust the image height in increments. With **Full screen**: Expands the image to fill the entire height of the screen. And **Adapt to image size** option keeps the original image dimensions.
* **Desktop content position**: Position the content (text, buttons, etc.) on the image banner.&#x20;

{% tabs %}
{% tab title="Middle left" %}

<figure><img src="/files/NsTrycExqS7NlzEm2p8c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Middle center" %}

<figure><img src="/files/kflm9E5YgspaDMdPdGxo" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Middle right" %}

<figure><img src="/files/BC6hgPYL8yhzb1IuAWLH" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Desktop content width**: Control the maximum width of the content blocks within the mage. Options include **Small**, **Medium**, and **Large**. This setting will automatically adjust for optimal display on mobile devices.
* **Animations setting**: lets you customize the scrolling behavior of the banner image:&#x20;
  * **None**: The image scrolls along with the rest of the page content.&#x20;
  * **Fixed background position**: Keeps the image fixed in place as the page scrolls, creating a **parallax effect**.
* **Mobile layout setting:** optimize the banner section for mobile devices:
  * **Mobile banner height**: Adjust the banner height specifically for mobile devices. Choose from **Small**, **Medium**, **Large**, or **Fullscreen** for varying levels of image height. And **Adapt to image size** uses the original dimensions of the image on mobile.
  * **Show text below image:** When enabled, all content blocks (text, buttons, countdown timer) will appear below the banner image on mobile devices. If unchecked, content displays over the image.

### **3, Block settings:**

**a. Heading block**

* Enter a heading with rich text.
* **Heading size**: Select from **Small**, **Medium**, **Large**, **Extra large**, or **Extra extra large** to fit your banner.
* **Highlight style**: Apply a custom color to highlighted words.&#x20;

**b. Text block:** Add a description or supporting text under the heading.

**c. Caption block:** Add a caption to provide additional context or details. Customize the caption style as **Uppercase** or **Subtitle**.

**d. Countdown timer block**: Add a countdown timer to highlight time-sensitive promotions or launches.

* Specify the **end date**, **end time**, and **size** for the countdown timer.
* **Enable "Hide when countdown reaches zero"**: Automatically hides the timer once it reaches zero.
* Add or remove a border around the countdown timer.

**e. Buttons block:**

* Enter a label, assign a link, and select a style for each button.&#x20;
* Choose from available color options to customize the button appearance.

{% hint style="info" %}
**Note***: If the button label is left blank, the button will not display.*
{% endhint %}

**f. Collections block:** Showcase a curated list of collections within the Image banner section.

* **Collections:** Select up to six collections to display in the block.
* **Color:** Allow you to set a custom text color, replacing the default white text.

**g. Logo image block:** display an image as an overlay on the Image banner, highlight a logo visually or tagline.

* **Image:** Upload the logo image to be displayed as an overlay on the banner.
* **Desktop image width:** Adjust the width of the logo on desktop devices to ensure proper scale and visibility.
* **Mobile image width:** Control the logo size specifically for mobile screens for better responsiveness.
* **Position** *(Middle, Bottom):* Set the vertical placement of the logo within the banner.
* **Alignment** *(Left, Center, Right):* Adjust the horizontal alignment of the logo to position it on the left, center, or right side of the banner.


# Featured collection

The Featured Collection section displays a specific collection of products, ideal for promoting curated selections like Sale, Seasonal, or Best Sellers collections.

This section brings attention to a chosen collection on your store pages, allowing quick access to relevant products and an enhanced shopping experience. It’s customizable, with layout options and support for features like color swatches, enabling you to showcase products attractively and intuitively.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Featured collection** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

These settings allow you to configure which collection to display and how it’s presented to customers.

**a. General settings:**

* **Collection**: Use **Select collection** to choose a collection from the list of collections previously created in the **Products** section of your Shopify admin. This setting allows you to display products from the selected collection directly in the Featured Collection section.
* **Maximum products to show**: Set the maximum number of products to display from the selected collection. Options range from **2 to 12 products**.
* **Products per row on desktop**: Define how many products are displayed per row on desktop devices. Options range from **2 to 4 products** per row.
* **Enable carousel on desktop**: If enabled, products will display in a single row. If the number of displayed products exceeds the row limit, the section will turn into a carousel format, allowing users to scroll through additional products horizontally.
* **Hide unavailable products**: When checked, out-of-stock or unavailable products (e.g., products with no price set) will be hidden.

**b. "View all" link settings:** The **“View all” link** directs customers to the full collection page, allowing them to explore all products in the selected collection.

* **Enable "View all" link if collection has more products than shown**: When enabled, this adds a "View all" link if the collection contains more items than specified in the **Maximum products to show** setting.
* Customize the appearance of the **“View all” link** with two style options: **Text** or **Card**.

> 1. **Text** style: Displays the **“View all” link** as a simple text link. Customers click this link to visit the collection page.
> 2. **Card** style: Displays a card at the end of the product list. The “View All” link is positioned on the collection image, providing a prominent and visually appealing way for customers to access the full collection. The collection name appears above the "View all" link, and the **Image overlay opacity setting** can be adjusted to ensure the text remains legible against the background.

**c. Product card:** These settings customize the display of individual product cards within the Featured collection.

* **Image ratio**: Adjust the aspect ratio of product images.
* **Show product rating**: When enabled, displays the product’s rating (if available) on each product card.
* **Show color swatches**: If enabled, color swatches for each product will appear below the product image, providing a visual preview of available color options.
* **Enable quick add button**: When enabled, a **Quick add** button appears, allowing customers to view product details and make a purchase without leaving the current page. This feature supports quick purchases and enhances the user experience.

**d. Mobile layout:** let you control the arrangement and functionality of the section on mobile devices.

* **Products per row on mobile**: Specify how many products are shown per row on mobile. Options include: **1 product** per row and **2 products** per row.
* **Enable swipe on mobile**: When enabled, products exceeding the row limit are displayed as a carousel, allowing users to swipe horizontally to view all items.

### **3, Promotion image block settings**

This block allows for a promotional banner within the section, adding visual appeal and a call to action button.

* **Image**: Select an image for the promotion block. The overlay opacity is adjustable from **0%** (transparent) to **100%** (fully opaque).
* **Content**: Add a heading and description to the promotion image to convey a message or call out a special offer. Adjust the position and alignment of the text to achieve the desired layout.
* **Button**: Add a button below the text content within the promotion image. This button can be customized to link to specific pages, products, or collections, allowing users to navigate seamlessly.
* **Colors**: Customize the color of both the text and button on the promotion image. Use the color picker to select colors that align with your brand style.


# Collection list

The Collection List section showcases a set of featured collections.

When a customer clicks on a collection, they’re taken to the specific collection page where they can browse all products within that collection. This section is ideal for guiding users to different categories, sales, or themes in your store.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Collection list** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

These settings allow you to define how the collections are displayed and styled within the section.

* **Collections per row on desktop**: Set the number of collections to display per row on desktop devices. Options range from **2 to 4 collections per row**.
* **Image ratio**: Adjust the shape of collection images to either: **Portrait (3:4)** for a taller image ratio. **Square (1:1)** for a uniform, square look.
* **Enable carousel on desktop**: If enabled, collections will display in a single row. If the number of collections exceeds the row limit, the section will turn into a carousel, allowing users to scroll horizontally through additional collections.
* **Enable “View all” button if list includes more collections than shown**: When enabled, a "**VIEW ALL"** button will appear in the collection list if there are more collections than the maximum set to display in the row. This button links to a page where customers can view all collections.
* **Enable quick view:** When enabled, clicking a collection opens a drawer showing its products instead of navigating to the Collection page.
* **Maximum products to show in quick view:** Define how many products of the collection are displayed inside the quick-view drawer.
* **Mobile layout**: Set the number of collections displayed per row on mobile devices. Choose either: **1 collection per row** or **2 collections per row.** When **Enable swipe on mobile** enabled, if the number of collections exceeds a single row, the section will convert to a carousel format, allowing customers to swipe through collections horizontally.

### **3, Collection block settings:**

Each collection block has specific settings that allow you to customize each collection’s appearance within the Collection list section.

* **Collection**: Select a collection from the list of collections created in the **Products** settings within your Shopify admin.
* **Image**: Choose an image for the collection, replacing the default collection image.

{% hint style="info" %}
**Note**: *By default, the collection image is set to the image uploaded in the **Products** settings for that collection. If no image is uploaded, the first product image within that collection will be used as the collection image.*
{% endhint %}

* **Heading**: Add a custom heading to replace the default collection name displayed on the collection image.


# Rich text

The Rich Text section displays customizable promotional text with options for flexible sizing.

You can include large or short messages and add blocks with image, countdown timer, and buttons for a fully interactive, visually engaging experience. This section is perfect for highlighting special announcements, seasonal promotions, or any key messaging you want to emphasize on your store’s pages.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Rich text** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

Customize the layout, alignment, and width of the Rich text section with these settings:

* **Desktop content alignment**: Adjust the alignment of content and buttons within the section to **Left**, **Center**, or **Right**.
* **Desktop content width**: Set the width of the content area on desktop to **Small**, **Medium**, or **Large**. Content width will automatically adjust on mobile for optimal responsiveness.
* **Mobile layout:** Align content and buttons on mobile devices to the **Left**, **Center**, or **Right**.

### **3, Block settings**

Each block within the Rich text section has customizable settings to adjust the appearance of the section’s content.

**a. Heading block:**

* Add a heading in rich text format. Change the color of highlighted words.&#x20;

**b. Text block:** Add descriptive text to supplement the heading.

**c. Buttons block:** A Theme allows users to add up to **2 buttons** in the Rich text section. Enter a label for each button. If the label is left blank, the button will not appear. Assign a link to each button. And choose a style for each button, and customize button colors using the options provided.

**d. Caption block:** Add a caption to provide additional context or emphasis. Choose the caption style, either **Uppercase** or **Subtitle**.

**e. Countdown timer block:** Add a countdown timer to create urgency around promotions or events.

* Specify the **end date**, **end time**, and **size** of the countdown timer.
* **Enable "Hide when countdown reaches zero"**: Once the countdown finishes, the timer will automatically disappear from the section.&#x20;
* Choose to add a border around the countdown timer if desired.

**f. Image block:** Select an image to display within the Rich text section. Adjust the size of the image, with options ranging from **30px to 200px**.

**g. Collections block:** Showcase a curated list of collections within the Rich text section.

* **Collections:** Select up to six collections to display in the block.
* **Color:** Allow you to set a custom text color, replacing the default color.

### **4, Practical applications of the Rich text section**

#### **How to create a countdown timer on a solid or gradient background?**

A countdown timer with a bold background can effectively create urgency for time-sensitive promotions or special events. Follow these steps to set it up in the Rich text section:

{% stepper %}
{% step %}
In the **Theme editor**, select the Rich text section to add it to your page.
{% endstep %}

{% step %}
Within the Rich Text section, add the **Countdown timer** block to display a countdown for your promotion or event.
{% endstep %}

{% step %}
Customize the background color of the section to either a **solid** or **gradient color**. Adjust the **text** and **countdown timer colors** to your preferred color (overriding the default theme color) for a cohesive look.
{% endstep %}

{% step %}
For guidance on creating gradients, refer to [**Shopify’s Color Gradient Guide**](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#colors).
{% endstep %}

{% step %}
Click **Save** to apply the changes.
{% endstep %}
{% endstepper %}


# Slideshow

The Slideshow section displays a series of images and videos alongside customizable content (text and buttons with links) to showcase key messages or products.

Slides can transition automatically or allow users to navigate manually. This section is perfect for highlighting promotions, showcasing collections, or conveying brand messages in an engaging format.

*<mark style="color:red;">(Video screenshot)</mark>*

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add Section**.
{% endstep %}

{% step %}
In the list, locate and select **Slideshow** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

*<mark style="color:red;">(Screenshot)</mark>*

### **2, Section settings:**

The **Section settings** allow you to customize the layout, height, and transition options for the slideshow.

* **Layout**: Choose from two layout options for the slideshow:

{% tabs %}
{% tab title="Single slide" %}
Displays only one slide on the screen at a time. Ideal for a minimal, focused look.

{% endtab %}

{% tab title="Multiple slides" %}
Shows a main slide in the center with a partial view of the next and previous slides on either side. This layout hints at additional content and encourages user interaction.
{% endtab %}
{% endtabs %}

* **Pagination style:** Controls how the slideshow navigation appears.

{% tabs %}
{% tab title="Number" %}
Displays slide numbers for navigation (e.g., 1 - 5).
{% endtab %}

{% tab title="Dots" %}
Shows a series of dots representing each slide.
{% endtab %}

{% tab title="Arrows" %}
Displays navigation arrows to move between slides.
{% endtab %}
{% endtabs %}

* **Desktop slide height**: Set the height of the slide images on desktop screens. Options include: **Small, Medium, Large, Full screen**: Expands the slide to cover the entire desktop screen height, and **Adapt to first media height**: Height is based on the dimensions of the first slide media.
* **Autoplay**: Configure slide rotation with the following settings:

**+ Auto-rotate slides**: Enable this option to make the slides rotate automatically. If unchecked, slides will transition manually.

**+ Change slides every**: Set the interval for automatic slide transitions, with a range from **3 to 9 seconds**.

* **Mobile layout**:

**+ Mobile slide height:** Set slide height on mobile devices, with options including: **Adapt to first media**: Matches the height of the first media slide. **Small**, **Medium**, **Large**, or **Full screen** for various height preferences.

**+ Show pagination on mobile:** If unchecked, pagination will be hidden on mobile. Users can still swipe to navigate between slides.

*<mark style="color:red;">(Screenshot)</mark>*

### **3, Block settings**

The Slideshow section includes two types of blocks—Image slide and Video slide—each with unique settings for optimal display.

**a. Image slide block:**

*<mark style="color:red;">(Screenshot)</mark>*

* **Image**: Select an image for the slide on desktop and mobile. If no mobile image is provided, the desktop image will be used by default.
* **Desktop content position**: Set the position of content over the image on desktop. Options include: **Top left**, **Top center**, **Top right, Middle left**, **Middle center**, **Middle right, Bottom left**, **Bottom center**, **Bottom right**. The position is automatically optimized for mobile devices.
* **Desktop content width**: Adjust the content width on desktop to **Small**, **Medium**, or **Large**. Content width is optimized automatically for mobile devices.
* **Highlight**: Highlight specific keywords in the heading by: **Color**: Changing the color of highlighted text. **Underline**: Underlining selected phrases for emphasis.

**b. Video slide block**

*<mark style="color:red;">(Screenshot)</mark>*

* **Shopify-hosted video**: Upload a video directly to your Shopify store, hosted within your account.*Note*: Use **MP4** format, as it is the most universally supported format. If your video is over **20MB**, consider uploading it to YouTube and embedding it via a link.
* **External video**: Link to videos hosted on **YouTube** or **Vimeo**.

{% hint style="info" %}
**Note**: *If a video is uploaded in Shopify-hosted video, an external video link will not display.*
{% endhint %}


# Media with text

The Media with text section combines images or videos with text content, ideal for storytelling, highlighting features, or emphasizing brand values.

This section allows you to highlight key messages alongside visual content, creating an engaging and informative section on your store pages.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Media with text** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The section settings allow you to configure the media

* **First mage:** Upload or select the first image displayed in the section.
* **Second image:** Optionally upload a second image, shown as a decorative element on the first image.
* **Video:** Upload a video directly to the store’s files for use instead of images. Great for showcasing products or behind-the-scenes footage.
* **Media height:** Adjust the vertical space the media occupies:
  * **Adapt to first media size:** Retains original image/video height.
  * **Small / Medium / Large:** Predefined fixed heights for consistent layout.
  * **Adapt to content height:** Auto-adjusts media height to match content block height (If content height is smaller than min-height, media height equals min-height).
* **Desktop media width:** Adjusts the horizontal width of the media block relative to the section: *Small, Medium, Large*

{% hint style="info" %}
**Note:** Media is automatically optimized for mobile — ensures performance and responsiveness on smaller screens.
{% endhint %}

* **Desktop media placement:** Determines whether media appears on the left or right of the content on desktop.
* **Desktop content position:** Aligns the vertical position of the text content relative to the media block: Top, Middle or Bottom.
* **Desktop content alignment:** Aligns text horizontally within the content area: Left, Center or Right.
* **Add space between media and text:** If enabled, a visible gap is added between the media and the text block—improving clarity and layout balance.
* **Mobile content alignment**: Sets the alignment of the text block on mobile devices: Left, Center or Right.

### **3, Block settings**

The Media with text section offers several blocks to customize content presentation, each with specific settings.

* **Heading block:** Add a heading for the Image with text section. Choose a font from the theme’s default font or options in the Shopify font library. Select from **Small**, **Medium**, **Large**, **Extra large**, or **Extra extra large** for heading size. Emphasize keywords in the heading with: Change the color of highlighted text, **or** Underline selected phrases for emphasis.
* **Text block:** Add a description to support the heading. Typically used for providing more context or details.
* **Caption block:** Add a caption for additional context or emphasis. Choose from **Subtitle** or **Uppercase** for caption style.
* **Collapsible content block:** Add a Q\&A format block with collapsible content. Select an icon to appear beside each question. When clicked, the question expands to reveal the answer.
* **Image block:** Select an additional image to display within the section. Adjust the image size from **30px** to **200px**.
* **Countdown timer block:** Add a countdown timer to create urgency for special promotions.
  * Set a specific date and time for the timer to count down to.&#x20;
  * **Enable "Hide when countdown reaches zero**: Once the countdown ends, the timer will automatically disappear
  * Choose whether or not to add a border around the timer.
* **Button block:** Enter a label for the button. If left blank, the button won’t display. Assign a URL link to the button. Choose from available button styles: **Solid, Outline, Text.** And use the provided options to customize the button color.
* **Icon block:** Create a block with text and an icon. The text appears to the left of the icon.
* **Feature columns block:** Each block consists of settings for two features displayed side-by-side. The layout is a **50-50 split** to fit both feature columns. Each feature includes:
  * **Icon** next to/above the heading. Toggle icon visibility on or off based on preference.
  * **Description** below the heading.
* **Divider block:** is used to visually separate content within the section, creating a clear structure and improving content readability. You can adjust the **line opacity** (0–100%) to control its visibility, set the **width** (10–100%) to define how long the divider appears, and align it **left, center, or right** within the section. Additionally, under **Block spacing**, the **bottom padding** (0–50px) lets you control the space between the divider and the block below it.


# Multicolumn

The Multicolumn section displays a set of columns, with each column containing an image, text, and an optional button.

This section is ideal for showcasing brand values, explaining product features, or organizing related information visually. Poetic Theme offers customizable layouts (grid and slider) for varied visual impact. With this section, you can organize information into easily digestible columns.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Multicolumn** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/6DsivEuPBefFkWPewORv" alt=""><figcaption></figcaption></figure>

### **2, Section settings:**

The **Section settings** allow you to define the number of columns, image style, alignment, and layout options.

* **Secondary background**: Control how the **Color scheme** applies to the section:
  * **None**: Applies the color scheme to both the columns and the entire section background.
  * **Show as column background**: Applies the color scheme only to each column’s background.
* **Number of columns on desktop**: Adjust the number of columns displayed per row on desktop, with options ranging from **2 to 6 columns**.
* **Image width**: Control the width of images within each column, adjustable from **10% to 100%**.
* **Image ratio**: Standardize the shape of images within columns to one of the following options: **Portrait (3:4); Square (1:1); Circle; Landscape (4:3); Adapt to image** (maintains each image’s original dimensions)
* **Image alignment**: Align images within each column to the **Left**, **Center**, or **Right**.
* **Enable carousel on desktop**: Switch the section layout from **Grid** to **Slider**. When enabled, users can navigate horizontally through the columns, especially useful when displaying more than the default number of visible columns.
* **Mobile settings:** Optimize the section’s layout for mobile with these settings:
  * **Number of columns on mobile**: Set the number of columns per row on mobile, choosing between **1 column** or **2 columns** per row.
  * **Enable swipe on mobile**: Enable to switch the section layout from **Grid** to **Slider** on mobile, allowing users to swipe through the columns horizontally.

### **3, Block settings**

Each **Column block** contains customizable elements for images, headings, text, and buttons.

* **Image**: Upload an image for each column. This image will replace the default placeholder and serves as a primary visual for the column.
* **Heading & description**: Enter a heading for the column, along with additional text to provide more information beneath the heading.
* **Button**: Add a button to direct customers to another page or section. Customize the button style to suit your design preferences, with options for **Solid**, **Outline**, and **Text** styles.


# Email signup

The Email signup section allows you to easily promote your newsletter on any page of your store.

This section can include an optional image to enhance the visual appeal, increase brand awareness, and encourage customers to join your mailing list.\
With customizable layout, background options, and flexible content placement, it’s ideal for building your email marketing channel and fostering customer engagement.

<figure><img src="/files/9ItilU36pCQmbaQJ2cF5" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Email signup** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** allow you to control the layout, image display, background colors, and alignment.

* **Layout**: Choose whether to display an image alongside the Email signup form:

{% tabs %}
{% tab title="Image left" %}
The image appears to the left of the email signup form.
{% endtab %}

{% tab title="Image right" %}
The image appears to the right of the email signup form.
{% endtab %}

{% tab title="No image:" %}
Hides the image, displaying only the email signup form.

*<mark style="color:red;">(Screenshot)</mark>*
{% endtab %}
{% endtabs %}

* **Image**: Select the image that will appear in the section *if "**Image left"** or "**Image right"** is chosen in **Layout**.*
* **Image height**: Adjust the height of the image with options: **Adapt to image**: Retains the image’s original size. **Small**, **Medium**, **Large**, **Full screen**: Adjusts the height progressively from small to full screen.
* **Content alignment**: Set the alignment of the content on desktop to **Left**, **Center**, or **Right**.

### 3, Block settings:

The Email signup section includes several block types for customizing headings, descriptions, captions, and the email form itself.

* **Heading block**: Add a heading for the section. Adjust the heading font size with options from **Small** to **Extra extra large**.
* **Text block:** Add a description to provide more information under the heading.
* **Caption block:** Add additional content to the section with a caption. Choose from **Uppercase** or **Subtitle** for the caption style.
* **Email form block**:

{% hint style="info" %}
**Note:** *After customer added their email address to the Email signup section, their email address displays on the* [***Customers***](https://admin.shopify.com/customers) *page of your Shopify admin.*&#x20;
{% endhint %}

* **Show name field**: Enable this option to add a Name field above the Email field, allowing you to collect customer names in addition to their email addresses.

{% hint style="info" %}
**Note**: *When the **Show name field** option is enabled in the Email form block: Customers are required to provide both their name and email address. Their name will appear in the **Customers** page of your Shopify admin. To view more details, click on the customer’s name to access their profile, where you’ll see their email address. This setup helps you better identify your subscribers and personalize future email marketing efforts.*
{% endhint %}

* **Submit button text**: Enter the text that will appear on the submit button for the email form.
* **Button style**: Choose a style for the submit button with options for **Solid** or **Outline**.


# Contact form

The Contact form section allows customers to contact you directly from any page on your store.

It includes various input fields for collecting details about customer inquiries, making it ideal for handling detailed requests or general questions. With flexible layout options, the section can incorporate images or informational text to enhance brand awareness and provide context for inquiries.

<figure><img src="/files/6gvqkQKHQ2AwHJCEgBrf" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Contact form** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** provide options to customize the layout, background, and alignment.

* **Layout**: Choose the layout for the Contact form section:

{% tabs %}
{% tab title="Image left" %}
Image displays on the left, Contact form on the right.
{% endtab %}

{% tab title="Image right" %}
Image displays on the right, Contact form on the left.
{% endtab %}

{% tab title="Text left" %}
Text card displays on the left, Contact form on the right.
{% endtab %}

{% tab title="Text right" %}
Text card displays on the right, Contact form on the left.
{% endtab %}

{% tab title="None" %}
Only the Contact form is displayed, centered in the section.
{% endtab %}
{% endtabs %}

* **Position**: adjusts the vertical alignment of the Contact form, Text card, and Image card within the section: Top, Middle or Bottom.
* **Add space between image and container**: create spacing between the image and the contact form—this applies only when an image card is active.

### 3, Block settings:

The Contact form section includes multiple blocks for customizing fields, layout, and additional content.

1. **Message block:** Allows customers to write detailed inquiries and special requests.&#x20;
2. **Phone number block:** Lets customers provide their phone number for follow-up communication.&#x20;
3. **Rich text:** Enter text for a heading and description, useful for dividing long forms. Add supplementary text below the heading, providing additional information.
4. **Custom field block**

* **Field type**: Choose the field type:

{% tabs %}
{% tab title="Text short" %}
Creates a one-line input for short text entries.
{% endtab %}

{% tab title="Text - long" %}
Creates a multi-line input for longer responses.
{% endtab %}

{% tab title="Dropdown" %}
Creates a dropdown menu for selecting one option from a list.
{% endtab %}

{% tab title="Checkbox" %}
Adds a checkbox for customer acknowledgment or agreement.
{% endtab %}

{% tab title="Radio buttons" %}
Similar to a dropdown, but presents options as a list with radio buttons.
{% endtab %}
{% endtabs %}

* **Label**: Enter a label for the input field.
* **Placeholder**: Add placeholder text (applicable for Text - Short and Text - Long fields).
* **Required**: If checked, this field must be completed to submit the form.

  * **Dropdown values**: Enter values for dropdown options, separated by commas.
  * **Checkbox value**: Specify the value that appears when the checkbox is checked or unchecked.
  * **Radio buttons**: Enter values for radio button options, separated by commas. Choose display style: **Horizontal**: Displays options in a row. **Vertical**: Displays options in a column.

5. **Image card block** *(Visible when layout is set to “Image left” or “Image right”)*

* **Image**: Select an image for the card and assign a link. Adjust the overlay opacity from **0% to 100%**.
* **Text**: Add content over the image, including a heading and description.
* **Desktop content position**: Adjust the content position (e.g., Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right).
* **Desktop content width**: Adjust the width of the content area on desktop; content width is optimized for mobile automatically.
* **Button**: Create a button with a label and link. Choose the button style (**Solid**, **Outline**, or **Text**).
* **Mobile layout**: Set text alignment on mobile to **Left**, **Center**, or **Right**.*Note*: The Image card block will always appear above the Contact form on mobile.

6. **Text card block** *(Visible when layout is set to “Text left” or “Text right”)*

* Add a heading and description for the Text card block.
* **Show social media icons**: Display social media icons at the bottom of the text card if desired.
* **Mobile layout**: Align content on mobile to **Left**, **Center**, or **Right**.*Note*: The Text card block also will always appear above the Contact form on mobile.

{% hint style="info" %}
**Note*****: How to view contact form submissions?***&#x20;

When a customer submits the Contact form section, the submission will be sent to your store's **sender email** address. To update or change the **sender email** address, go to the **Notifications** settings page in your Shopify admin.
{% endhint %}

<figure><img src="/files/2RU12Pv7ZsvY1d1qjxQa" alt=""><figcaption></figcaption></figure>


# Video banner

The Video banner section displays a full-width autoplaying video without sound, providing an immersive visual experience that captures attention immediately.

You can add informational content blocks and guide customers with customizable buttons, making this section ideal for highlighting brand stories, product demonstrations, or seasonal promotions.

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

{% hint style="info" %}
**Note**: If you’d like to add a video with sound, please refer to the [Video](/section/video) section article for instructions.
{% endhint %}

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Video banner** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** allow you to choose the video source, adjust height, and configure the mobile display options.

* **Shopify-hosted video**: Upload a video directly to your Shopify store, where it will be hosted and autoplay in the banner.
* **External video**: Add a link from **YouTube** or **Vimeo** to embed an external video.

{% hint style="info" %}
**Note**: *If both Shopify-hosted and external videos are set, the Shopify-hosted video will take priority.*
{% endhint %}

* **Video overlay opacity:** Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.
* **Overlay style:** Select an overlay effect to style the video banner:  Gradient from bottom, Gradient from top or Full video darken.
* **Video description:** Add a short text description of your video. This description is important for accessibility—it helps screen readers describe the video content to visually impaired users.
* **Desktop section height**: Set the height of the video banner on desktop: **Small**, **Medium**, **Large**, **Full screen**. Selecting **Full screen** expands the video banner to the full height of the screen.
* **Adapt section height to video size:** this setting ensures the section height automatically adjusts to fit the full height of the video—preventing the video from being cut off.
  * **None**: The section height stays fixed based on your choices in the *Desktop section height* & *Mobile section height setting.*
  * **On desktop**: Adjusts the section height to fit the video only on desktop devices.
  * **On mobile**: Adjusts the section height to fit the video only on mobile devices.
  * **On all devices**: Automatically resizes the section height to match the video across all screen sizes.
* **Text** settings: Customize the layout of your text content on desktop:
  * **Desktop content position**: Controls where the overlay text appears on the video: *Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.*
  * **Desktop content width**: Adjusts the width of the text container: *Small, Medium, Large.*&#x20;
* **Mobile layout settings**:
  * **Mobile section height**: Choose the height of the video on mobile devices, with options ranging from **Small** to **Full screen**.
  * **Mobile content alignment**: Adjust the alignment of text content on mobile.

### **3, Block settings**

The Video banner section supports several blocks to add customized content such as headings, descriptions, captions, and buttons.

* **Heading block:** Add a heading for the Video banner section. Choose from the default font or select another from the Shopify font library for heading font. Adjust the heading size from **Small** to **Extra extra large**. Highlight specific keywords in the heading with: **Color**: Change the highlight color or **Underline**: Add an underline to highlighted text.
* **Text block:** Add a description or supporting text to provide additional information under the heading.
* **Caption block:** Add a caption for more detailed content. Customize the caption style to either **Uppercase** or **Subtitle**.
* **Buttons block:** Add buttons to guide customers to other parts of the store.&#x20;
  * Enter a label and assign a link to each button. If left blank, the button won’t display.
  * **Button style**: Choose from styles such as **Solid**, **Outline**, or **Text**.
  * Customize button color based on available options.
* **Collections block**: Showcase a curated list of collections within the Image banner section.
  * **Collections:** Select up to six collections to display in the block.
  * **Color:** Allow you to set a custom text color, replacing the default white text.


# Video

The Video section allows you to add a pre-existing video, either uploaded directly to your Shopify store or linked from YouTube or Vimeo.

Users can click on the section to play the video with sound, enhancing the immersive experience for brand or product storytelling.\
This section is ideal for sharing impactful video content, such as brand stories, product demonstrations, or customer testimonials.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Video** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** allow you to control the video source, layout, ratio, and popup functionality.

* **Text alignment:** Adjust the alignment of heading & description to **Left**, **Center**, or **Right**.
* **Shopify-hosted video**: Upload a video directly to your Shopify store, where it will be hosted on your account.

{% hint style="info" %}
**Note**: *It is recommended to use **MP4 format** for the best compatibility and quality.*
{% endhint %}

* **External video**: Link a video hosted on **YouTube** or **Vimeo**.

{% hint style="info" %}
**Note**: *If both **Shopify-hosted video** and **External video** are set, the **Shopify-hosted video** will take priority.*
{% endhint %}

* **Video ratio**: Choose the video ratio to match the dimensions of your video: **Square (1:1), Landscape (4:3), Portrait (4:5), Widescreen (16:9), Vertical (9:16)**
* **Video thumbnail**: Select an image to display as the video thumbnail. The thumbnail will disappear once the video is played.

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

{% hint style="info" %}
**Note**: *For autoplaying videos (videos without sound that loop in the background), see the* [***Video banner***](/section/video-banner) *section and* [***Media with text***](/section/media-with-text) *section. These sections allow videos to play automatically without user interaction.*
{% endhint %}


# Collapsible content

The Collapsible content section displays expandable rows that allow customers to open and close specific sections of information, making it easier to navigate lengthy content.

This section is typically used on FAQ pages to answer common questions, but it can also be used for any structured information that benefits from a collapsible format. By organizing information into expandable rows, this section provides a clean, user-friendly way to present detailed information without overwhelming customers.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Collapsible content** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** control the heading position, column layout, style, and color application.

* **Heading position**: Adjust the layout and placement of the heading in relation to the collapsible rows:

{% tabs %}
{% tab title="Top" %}
The heading appears above the collapsible rows.
{% endtab %}

{% tab title="Left" %}
The heading appears on the left side, and the collapsible rows are on the right.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Note**: *On mobile, the heading always appears above the collapsible rows for optimal display.*
{% endhint %}

* **Number of columns on desktop**: Adjust the number of columns for FAQ items on desktop:

{% tabs %}
{% tab title="1 column" %}
All collapsible rows are arranged in a single column.
{% endtab %}

{% tab title="2 columns" %}
Collapsible rows are displayed in two columns, with odd-numbered rows on the left and even-numbered rows on the right.
{% endtab %}
{% endtabs %}

* **Style**: Define the style of the section content:

{% tabs %}
{% tab title="Blank" %}
No specific style is applied to the content.
{% endtab %}

{% tab title="List" %}
Numbers appear before each question in the collapsible rows.
{% endtab %}

{% tab title="Icons" %}
Icons appear before each question in the collapsible rows.
{% endtab %}
{% endtabs %}

* **Secondary background**: Determine how the **Color scheme** is applied within the section: **None**: When the color scheme changes, both the section background and the background of the collapsible rows change together. **Show as row background**: Only the background of the collapsible rows changes with the color scheme, while the section background remains unchanged.

### 3, Block settings:

The Collapsible content section includes two primary blocks: the Heading block and the Collapsible row block.

* **Heading block:**

> - Enter text for the heading and description to introduce the content. Adjust the alignment of content to **Left**, **Center**, or **Right**.
> - Add a button below the heading and description to guide customers to other parts of your store. You can choose the button style as **Solid**, **Outline**, or **Text**.
> - Adjust the alignment of content on mobile to **Left**, **Center**, or **Right** for optimal display.

* **Collapsible row block**

> - **Heading**: Enter a question for the FAQ or collapsible row title. If left blank, the block will not be visible.
> - **Row content**: Add the answer or content for the row. When the row is expanded (caret icon pointing up), the answer appears below the question. When collapsed (caret icon pointing down), the answer is hidden.
> - You can pull content from a page in your store by selecting **Tab content from page** and choosing a page. If used, the page content will override any text entered manually in the **Row content** field.
> - **Icon**: Choose an icon from A Theme’s icon list to display at the start of each question, enhancing the visual structure of the rows.


# Shop the look

The Shop the look section is designed to promote multiple products styled together, often as part of a set.

By featuring an image that showcases products combined in a cohesive look, this section allows customers to view related products alongside the main image and add them directly to their cart. This section is ideal for encouraging customers to purchase entire outfits, sets, or complementary items in one easy experience.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Shop the look** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** control the main image, layout, product display, and other visual options.

* **General settings:**

> - **Image**: Select an image to display in the Shop the look section. Use a high-quality image that clearly showcases the featured products.
> - **Image ratio**: Adjust the image ratio with the following options: **Square, Portrait, Adapt to image** (maintains original image size).
> - **Desktop layout**: Choose the position of the image relative to the product list: **Left** or **Right.** On mobile, the image layout defaults to showing the image first.
> - **Products per row on desktop**: Specify the number of products to display per row beside the image.

* **Product card settings:** allow you to control the appearance of products displayed alongside the main image.

> - **Image ratio**: Adjust the product image ratio to **Portrait** or **Square**.
> - **Show product rating**: If enabled, displays the product rating (for products with existing reviews).
> - **Show color swatches**: Enable this option to display color swatches under each product image, helping customers easily view available color variations.
> - **Enable quick add button**: Activates a **Quick view** button, allowing customers to view product details and add items to their cart without navigating away from the page.

* **Hotspot color**: Choose a color for the hotspot markers on the image: **Light** (White) or **Dark** (Black)
* **Shop the look button** (Mobile only): Customize the label for the “Shop the Look” button on mobile. When customers tap this button on mobile, the products list will appear, making it easier for mobile users to view and add items.

### 3, **Product block settings:**

The **Product block settings** enable you to select individual products and set the position of their respective hotspots:

* **Add a product block**. Select a product from your store to display in the section. This product will appear in the product list beside the main image.
* **Hotspot position**: Position the hotspot for each product on the main image using the following sliders:

> - **Horizontal**: Adjust the horizontal position of the hotspot (range from 0% to 100%).
> - **Vertical**: Adjust the vertical position of the hotspot (range from 0% to 100%).


# Multicolumn with icons

The combination of text and icons provides a clear, easy-to-read format that enhances the visual appeal and communicates essential information concisely.

The Multicolumn with Icons section displays multiple columns with text blocks accompanied by relevant icons, making it ideal for highlighting your store’s values, explaining business processes, or listing key product features.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Multicolumn with icons** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** control the color scheme, column arrangement, icon placement, and layout for mobile.

* **Secondary background:**&#x20;

{% tabs %}
{% tab title="None" %}
Applies the **Color scheme** to both the section background and content blocks.&#x20;
{% endtab %}

{% tab title="Show as column background" %}
Applies the **Color scheme** only to the column blocks, leaving the section background unchanged.
{% endtab %}
{% endtabs %}

* **Grid settings**

> - **Number of columns on desktop**: Adjust the number of columns displayed per row on desktop, with options from **2 to 4 columns**.
> - **Desktop icon placement**: Set the position of icons & content within the columns: **Top left, Top center** or **Left**.

* **Mobile layout**:

> - **Number of columns on mobile**: Choose the number of columns displayed per row on mobile, with options for **1 or 2 columns**.
> - **Mobile icon placement**: Adjust the icon & content position for mobile, placing it either **Top left, Top center** or **Left**.

### 3, **Icon block settings:**

Each column in the **Multicolumn with icons** section contains an **Icon block**, where you can select specific icons, add headings, and include descriptions and buttons.

* **Icon**: Choose an icon that represents the content of each block from a list of over 40 icons provided by Poetic Theme.
* **Icon size**: Control the size of the icons in the blocks.
* **Alternative icon/image**: Upload a custom icon or image to replace the default icon. If both default and custom icons are set, the uploaded image will override the default.
* **Heading and description**: Enter a heading for the block and adjust its size to suit the design, providing a clear title for each column. Add additional text beneath the heading to provide further information or context.
* **Button**: Optionally, add a button to guide customers to another page or destination.


# Scrolling promotion

The Scrolling promotion section creates an engaging display of promotional content using an automatically scrolling line of text and images.

This section is ideal for showcasing special offers, new arrivals, or key announcements to encourage customer action. It captures customer attention by combining dynamic movement with compelling visuals and text.

Pause on hover: When customers hover over the Scrolling promotion section, the scrolling pauses, allowing them to read text or view images without distraction. Scrolling resumes once the cursor leaves the section.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Scrolling promotion**  section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** control the scrolling behavior, layout, text styles, and image properties.

* **General settings:**

> - &#x20;**Direction**: Choose the direction in which the announcements scroll: **Left or Right.**
> - **Speed**: Adjust the scrolling speed to **Slow**, **Normal**, or **Fast**.
> - **Space between messages**: Set the spacing between blocks (text or images) within the scrolling section for better readability and design flow.

* **Text settings**:

> - **Font style**: Choose between the **Heading font** or **Body font** for the text in the section.
> - **Text size**: Adjust the size of the text for better visibility.
> - **Icon size**: Customize the size of icons if displayed alongside the text.

* **Image settings**:

> - **Image ratio**: Choose the image shape: **Square**, **Portrait**, **Circle**, or **Landscape**.
> - **Image size**: Adjust the size of images in the section, ranging from **30px to 300px**.

### 3, B**lock settings:**

The Scrolling romotion section supports two types of blocks: **Text block** and **Image block**, each with its own customization options.

* **Text block:**

> - **Text**: Enter the text to display in the block.
> - **Icon**: Choose to display an icon at the beginning of the text block for added emphasis or leave it blank.
> - **Link**: Add a link to the text. When customers click on the text, a new tab will open with the linked page.
> - **Highlight key words**: Highlight important words or phrases in the text for emphasis. Highlight styles: **Color**: Change the color of selected text or **Underline**: Add an underline to selected text.

* **Image block:**

> - **Image**: Upload an image to feature in the scrolling section. Ensure it matches the selected aspect ratio for consistency.
> - **Image link**: Add a link to the image. Clicking on the image will open the link in a new tab, directing customers to the desired page or product.


# Press/logos

The Press/logos section provides a professional overview of your store's partners, suppliers, or featured brands.

This section enhances trust and credibility by showcasing the logos of well-known collaborators or clients. This section is highly versatile, whether you're highlighting partnerships, showcasing featured brands, or emphasizing endorsements.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Press/logos**  section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

The **Section settings** allow you to configure the number of logos per row, spacing, interactivity, and mobile display.

* **General settings:**

> - **Logos per row on desktop**: Adjust the number of logos displayed per row on desktop, with options ranging from **3 to 6 logos per row**.
> - **Inactive logo opacity**: Set the opacity for logos that are not hovered over. This setting highlights the logo under the cursor while subtly dimming the rest, improving focus and interactivity.

* **Quote settings:**

> - **Enable quote**: If enabled, a quote appears above each logo. This is ideal for including additional text.
> - **Text font**: Choose whether the quote text uses the **Heading font** or the **Body font** from your theme settings.

### **3, Logo block settings**

Each logo is represented as a block within the section, providing customization options for the logo image, size, and interactivity.

* **Image**: Upload the logo image to display in the block.
* **Logo width**: Adjust the size of the logo image, ranging from **60px to 120px** of the block.
* **Link**: Add a clickable link to the logo. When clicked, the link opens in a new tab, directing the customer to the assigned destination. This setting is only available if **Enable quote** is disabled.
* **Quote** (Visible if **Enable quote** is enabled):

> - **Subheading**: Add a subheading that provides additional context or information about the person or organization associated with the quote.
> - **Heading**: Add the descriptive quote to display above the logo and choose the font size for the quote.


# Slideshow

The Slideshow section provides a bold and visually striking layout by combining side-by-side blocks of images and video.

Each block can feature customized text, buttons, and media settings, perfect for showcasing hero images or highlighting multiple products and offers. With autoplay and comprehensive layout controls, this section creates an engaging user experience that balances aesthetics and functionality.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Slideshow** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

The **Section settings** control the layout, appearance, and functionality of the entire section.

* **General settings**
  * **Layout:** Choose whether to display **one** or **two** or **three** blocks side by side in the section.
  * **Desktop height:** Adjust the height of images and videos on desktop: **Adapt to first media height**: Matches the height of the first block's media. **Small, Medium, Large, Full screen**: Predefined height options for uniformity.
  * **Media overlay opacity:** Add an overlay to media elements to improve text visibility and create a polished look.
* **Autoplay settings:**
  * **Enable autoplay on desktop**: When enabled, the section automatically cycles through the blocks (images or video). Each block’s media becomes the focal point, while its associated content is displayed prominently. Only the media (image or video) is visible for inactive blocks, with content hidden to minimize distractions.
  * **Speed:** Define the speed at which the progress bar moves and blocks transition: from 3 seconds to 9 seconds.
* **Mobile layout:**
  * **Mobile height**: Control the height of media on mobile screens. Options include: **Adapt to first block height**, **Small**, **Medium**, **Large**, **Full screen**.

### **3,** Blocks settings:

Each block—**Image** or **Video**—has settings for layout, media, text, and buttons. While many settings overlap, the blocks have unique features to cater to their respective content types.

* **Settings for all blocks**
  * **Text settings**:
    * **Heading**: Create a primary heading for the logo block.
    * **Heading size**: Customize the size of the heading text.
    * **Description**: Add additional details below the heading.
    * **Desktop content position**: Adjust the placement of text and buttons within the block: **Top left**, **Top center**, **Top right**, **Middle left**, **Middle center**, **Middle right**, **Bottom left**, **Bottom center**, **Bottom right**.
    * **Collections:** Select up to six collections to display in the block.
  * **Button settings**: Enter the text for the button label. Assign a URL to the button for navigation. Select the visual style of the button: Solid, Outline or Text.
  * **Mobile layout: Mobile content alignment**: Align text on mobile.
* **Unique settings:**

<table><thead><tr><th width="415.87109375">Image block</th><th>Video block</th><th data-hidden></th></tr></thead><tbody><tr><td><p>Block is designed for static visuals such as promotional banners or product images.</p><ul><li><strong>Image</strong>: Upload a high-resolution image for desktop use.</li><li><strong>Mobile image</strong>: Upload a separate image optimized for mobile. If no mobile image is uploaded, the desktop image will be used.</li><li><strong>Image link:</strong> Assign a clickable link to the image for direct navigation.</li></ul></td><td><p>Block is designed for dynamic content such as product demonstrations, tutorials, or brand stories to draw more attention.</p><ul><li><strong>Video:</strong> Upload a video directly to Shopify for seamless playback.</li></ul></td><td></td></tr></tbody></table>


# Testimonials

The Testimonials section is a versatile tool for showcasing customer and partner feedback, offering a mix of visual (video or image) and textual content.

This section enhances credibility and trust by highlighting user experiences, with visual elements adding depth to each testimonial. If the number of reviews exceeds the available space, the section automatically converts into a slider format, ensuring a smooth and organized display.

*<mark style="color:red;">(Section screenshot)</mark>*

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add Section**.
{% endstep %}

{% step %}
In the list, locate and select **Testimonials** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

*<mark style="color:red;">(Screenshot)</mark>*

### 2, Section settings

The **Section settings** control the overall appearance and behavior of the testimonials.

* **General settings:**
  * **Layout:** Define the position of the media (image or video) relative to the testimonial text: Left or Right.
  * **Media aspect ratio**: Adjust the ratio for images or videos displayed in testimonials on desktop: **Portrait or Square**.
  * **Number of columns on desktop:** Set the number of testimonials displayed per row, from 1 to 3 blocks/row.
  * **Secondary background**: Choose how the **Color scheme** is applied:&#x20;

{% tabs %}
{% tab title="None" %}
Applies the color scheme to both the content and background.&#x20;
{% endtab %}

{% tab title="Show as content background" %}
Applies the color scheme only to the content area, leaving the section background untouched.&#x20;
{% endtab %}

{% tab title="Show as section background" %}
Applies the color scheme only to the section background, leaving blocks unchanged.
{% endtab %}
{% endtabs %}

* **Colors settings:**
  * **Star rating color**: Use the color picker to define the color of the star rating, ensuring it aligns with your store’s branding.

### **3, Testimonial block settings:**

* **Image**: Upload a specific image for the testimonial, such as a product photo or customer-provided image.
* **Shopify-hosted video:** Upload a video directly to your Shopify store for seamless integration. Shopify-hosted videos ensure faster loading speeds and smoother playback. MP4 is recommended for maximum compatibility.
* **Star rating**: Use the slider to set a star rating for the testimonial, ranging from **0 to 5** in increments of **0.5**. **Set 0**: Hides the star rating for testimonials without ratings.
* **Review text**: Enter detailed feedback in this field.
* **Reviewer name**: Enter the customer's name.
* **Product picker:** Select a product to associate with the review, providing direct links for customers.


# Collection tabs

The Collection tabs section allows you to display a single-row carousel showcasing selected collections (maximum of 3).

This section is ideal for highlighting different product categories, such as seasonal collections or bestsellers, while maintaining an organized and visually appealing layout. It provides easy access to multiple collections in a compact format.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Collection tabs** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

* **General settings**
  * **Maximum products to show:** Specify the maximum number of products to display per collection: from **2** to **12** product&#x73;**.**
  * **Products per row on desktop:** Define how many products are displayed per row on desktop: from **2** to **4** produtcs
* **“View all” card:**
  * **Enable "View all" link if collection has more products than shown**: When enabled, a **View all** card appears at the end of the product list if the collection contains more products than displayed. Clicking the **View all** card redirects users to the full collection page.
  * **Image overlay opacity**: Adjust the transparency of the overlay on the **View all** card for better visibility of text.
  * **Overlay style**: Choose the overlay style to enhance text readability and overall design: **Gradient from bottom, Gradient from top, Full image darken.**
* **Product card settings:**
  * **Image ratio**: Select the aspect ratio for product images: **Portrait, Square & Adapt to image.** Ensure product images use a uniform aspect ratio for a polished look.
  * **Show product rating**: Enable to display the product’s rating (requires product rating integration).
  * **Show color swatches**: Display available color swatches beneath product images for easy browsing.
  * **Enable quick add button**: Activate a **Quick add** button for users to view product details and add to their cart without navigating to the product page.
* **Mobile layout:**
  * **Products per row on mobile :** Specify how many products appear per row on mobile devices: 1 product or 2 products.
  * **Enable swipe on mobile:** If enabled, products exceeding the row limit will be displayed in a swipeable carousel format.

### **3,** Collection **block settings:**

* **Collection:** Choose a specific collection to display in the carousel.
* **Heading:** Enter a custom heading for the selected collection. If left blank, the default collection name will be displayed.
* **Hide unavailable products:** Enable to hide products that are out of stock or unavailable (e.g., price = 0).


# Text with images

The Text with images section offers a unique and visually engaging design by integrating inline images and product into your promotional content.

With modern, creative layouts, this section is ideal for highlighting specific products or services while enhancing the visual appeal of your promotions.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Text with images** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

* **General settings:**
  * **Desktop content alignment:** Align the section’s text content horizontally on the desktop: **Left, Center or Right.**
  * **Desktop content width:** Control the width of the text block. Content width automatically adjusts for mobile screens.
* **Text settings:**
  * **Subheading**: Add a subheading to introduce the section.
  * **Heading**: Enter the main title for the section.
  * **Heading size**: Customize the font size of the heading.
* **Image size**: Adjust the relative size of the image within the section from 50px to 150px.
* **Image style**: Define the shape of the image.&#x20;

{% tabs %}
{% tab title="Square" %}
Standard rectangular image.&#x20;
{% endtab %}

{% tab title="Slightly rounded" %}
Adds a soft border radius to the image.&#x20;

*<mark style="color:red;">(Screenshot)</mark>*
{% endtab %}

{% tab title="Circle" %}
Displays the image as a perfect circle.

*<mark style="color:red;">(Screenshot)</mark>*
{% endtab %}
{% endtabs %}

* **Image hover effect:** Choose an interaction effect when users hover over the image:&#x20;
  * **None**: No hover effect.&#x20;
  * **Zoom in**: Enlarges the image slightly on hover.&#x20;
  * **Show tooltip**: Adds a circular hover effect and displays a tooltip beside the image.
* **Mobile layout:**&#x20;
  * **Mobile content alignment**: Align the section’s content horizontally on mobile screens: Left, Center or Right.

### **3, Block settings:**

The **Text with images section** includes settings that are consistent across its **Image block** and **Product block**, allowing for a cohesive design while offering flexibility to customize each block. Below is a detailed explanation of these shared settings, along with their functionalities:

* **Common settings across blocks**
  * **Image position:** Adjust where the image or product appears inline within the Heading content (1 ➝ 30). Use the slider to define the exact word placement where the image will appear. For instance, if set to **3**, the image will appear after the third word in the text block. Use this setting to break up lengthy text or emphasize specific parts of your message. Ensure the positioning feels natural and enhances readability.
  * **Tooltip settings:** Tooltips provide additional context or information to images when users hover over them. This feature is available when the **Image hover effect** is set to "Show tooltip". **Tooltip settings include:**&#x20;
    * **Label:** Enter the text that will appear in the tooltip. Example: For a product image, the tooltip could display *"Click to learn more"* or *"See full details."* If the label field is left blank, the tooltip will not display.
    * **Tooltip background:** Select the background color for the tooltip. Choose a contrasting color to ensure the tooltip text is legible against the background.
    * **Tooltip label:** Pick the color of the text within the tooltip. You can use brand colors for consistency or neutral tones for readability.
* **Unique settings for the image block:**
  * Upload an image to display within the content.
  * Assign a clickable link to the image to redirect users to a specific page.
* **Unique settings for the product block**
  * Select a product from your store to feature within the content. The product image is automatically used as the inline image.
  * Upload a custom image to override the product’s default image.
  * Activate a **Quick view** feature, allowing users to see product details in a popup without leaving the current page.


# Image comparison

The Image comparison section allows you to showcase a side-by-side visual comparison using a slider to reveal the "Before" and "After" images.

This section is ideal for highlighting transformations, product effects, or service results. Its interactive slider feature engages users, making it a powerful tool for storytelling and enhancing credibility.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Image comparison** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

* **Layout:**

{% tabs %}
{% tab title="Standard" %}
The header and description appear above the "Before" and "After" images. Suitable for designs that require a focus on introductory content.
{% endtab %}

{% tab title="Split" %}
The header and description are positioned to the left of the "Before" and "After" images. Ideal for space-efficient layouts that prioritize comparison imagery.
{% endtab %}
{% endtabs %}

* **Image height**: Controls the vertical dimensions of the "Before" and "After" images.
  * **Small**: Compact height, suitable for concise comparisons.
  * **Medium**: Balanced height that works well for most layouts.
  * **Large**: Tall images for dramatic comparisons or detailed visuals.

### **3, Block settings:**

Each section consists of two blocks: **Before** and **After**. The layout ensures that: The **Before block** always appears on the left. The **After block** always appears on the right.

* **Before block:**
  * **Image**: Upload the "Before" image.
  * **Mobile image**: Upload an image optimized for mobile displays. If not uploaded, the desktop image will be used.
  * **Image overlay opacity**: Adjust the transparency of the overlay on the image (0% to 100%).
  * **Label**: Add a descriptive label to identify the image, such as “Before” or a more specific descriptor. *Examples*: “Before Treatment,” “Original,” or “Day 1.” If left blank, the label will not display.
  * **Label position**: Choose the placement of the label: **Top left, Middle left, Bottom left.**
* **After block**
  * **Image**: Upload the "After" image.
  * **Mobile image**: Upload an image optimized for mobile displays. If not uploaded, the desktop image will be used.
  * **Image overlay opacity**: Adjust the transparency of the overlay on the image (0% to 100%).
  * **Label**: Add a label to describe the image, such as “After” or another specific term. *Examples*: “After Treatment,” “Enhanced,” or “Final Result.” If left blank, the label will not appear.
  * **Label position**: Choose the placement of the label: **Top right, Middle right, Bottom right.**

{% hint style="info" %}
&#x20;**Note**: *We recommend:*

* To achieve a smooth comparison, ensure that both images have the same dimensions and similar composition. Use identical lighting and framing for a more realistic comparison.
* Experiment with **overlay opacity** to enhance text visibility without overshadowing the images.
  {% endhint %}


# Horizontal tabs

The Horizontal tabs section offers an organized and interactive layout, featuring horizontally aligned tabs that users can click to reveal detailed content.

With a variety of block types and customizable options, this section is ideal for displaying product features, or details information like ingredients, brand story, etc. The dynamic tab interface reduces clutter, enhances readability, and provides a seamless navigation experience across desktop and mobile devices.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Horizontal tabs** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

* **Section header:**
  * **Desktop content alignment:** Control the horizontal alignment of the section header on desktop screens: **Left, Center, Right**
* **Mobile layout:**
  * **Open first tab by default**: If enabled, the first tab will automatically open on mobile devices. Ensures immediate visibility of content, improving user experience.
* **Section:**&#x20;
  * **Show divider line**: If checked, a horizontal divider line will appear between the tabs and the content below. This helps visually separate the tab navigation from the section content, improving clarity and structure.

### **3, Block settings:**

* **Common features across blocks:** All blocks in the **Horizontal tabs section** share the following feature:
  * **Tab title:** Enter the title for each tab. If left blank, the block will not be visible.
* **Unique features by block type:**

{% stepper %}
{% step %}
**Rich text block**

* **Content:** Enter inline text content for the tab.
* **Tab content from page:** Pull content directly from a page. If set, this overrides inline text.
* **Button settings**: Add text for the button label. Assign a clickable link for navigation. Choose the visual appearance of the button: Solid, Outline or Text.
  {% endstep %}

{% step %}
**Multicolumn block:**&#x20;

Allows you to showcase up to **four** columns of content with images, headings, descriptions, and buttons. This block is ideal for summarizing key features, benefits, or options in an organized layout.

* **Layout:** Select the number of columns to display (2, 3, or 4 columns). The block automatically adjusts the column layout to match the selected number.
* **Image ratio:** Set the shape of the images in each column: **Portrait, Square, Circle, Landscape**
* Each column within the block has these settings:
  * **Image:** Upload an image for the column.
  * **Heading:** Add a heading for the column.
  * **Description:** Enter text below the heading. Provide additional details under the heading. This text can elaborate on the feature or benefit being highlighted.
  * **Button settings:** Configure the label, link, and style of the button for the column.
    {% endstep %}

{% step %}
**Media with text block:**&#x20;

Combines images or videos with text to create a visually engaging layout. It’s perfect for explaining products, showcasing tutorials, or highlighting specific promotions.

* **Image settings**: Upload an image to the block. Adjust the height of the media. Choose whether the media appears to the left or right of the content.

{% hint style="info" %}
**Note**: ***Media height** setting & **Desktop media position** setting apply to both **image** and **video**.*&#x20;
{% endhint %}

* **Video settings**: When both an image and a video are set, the video will override the image.

  * **Shopify-hosted video:** Upload a video to be hosted on Shopify.
  * **External video:** Add a YouTube or Vimeo URL to display external videos.

  **Note**: *If both a Shopify-hosted video and an external video are provided, the Shopify-hosted video will take precedence.*

  * **Video thumbnail:** Set a custom thumbnail image for the video. The thumbnail will display before the video is played.
  * **Enable video autoplay:** Video automatically mute to enable autoplay.
  * **Video description:** Add alt text for the video, improving accessibility for screen readers.
* **Content settings**: Add a heading for the block. Provide detailed description below the heading. Add a call-to-action button and customize the button appearance.
  {% endstep %}
  {% endstepper %}


# Shoppable video cards

The Shoppable video cards section enhances your store by integrating interactive videos linked directly to products.

This section allows customers to engage with products in a dynamic way, offering a more immersive shopping experience.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Shoppable video cards** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/7uvlYUBSjOyEWaKA0dLn" alt=""><figcaption></figcaption></figure>

### 2, Section settings

These settings control the overall appearance and behavior of the section:

* **General settings:**
  * **Number of columns on desktop**: Choose the number of videos displayed per row, with options ranging from **2 to 4 columns**.
  * **Enable quick add button:** allow customers to preview product details in a drawer without navigating to the product page. This feature streamlines the shopping experience by reducing clicks and keeping customers engaged.

### **3, Video block settings:**

Each video block allows you to feature a product visually.

* **Shopify-hosted video:** Upload video. For best display, use a **9:16** aspect ratio (portrait format). Shopify-hosted videos offer smoother playback and faster loading times.
* **Product**: Link a specific product to the video, allowing customers to explore details directly. Clicking quick view button will open the product details.
* **Video thumbnail**: Choose an image that serves as the preview before the video plays.
* **Label**: Add a **brief message** that appears under the video block. This text can highlight promotions, product features, or a call to action.


# Blog posts

The Blog posts section showcases a list of featured blog posts from a selected blog on your store.

With flexible layout options, this section allows you to display posts in a **Grid** format, enhancing the visual appeal and accessibility of your blog content. It’s perfect for promoting recent articles, brand stories, or updates directly on the homepage or other store pages, helping drive traffic to your blog.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Blog posts** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

The **Section settings** allow you to select the blog, adjust layout, image ratio, and control the display of posts.

* **Blog**: Choose the blog that contains the blog posts you want to feature.
* **Image ratio**: Adjust the image ratio of the blog post images: **Adapt to image**: Keeps the original aspect ratio of the image; **Square**: Displays images in a 1:1 square ratio; **Portrait**: Displays images in a 3:4 vertical ratio; **Landscape**: Displays images in a 4:3 horizontal ratio.
* **Maximum blog posts to show**: Set the maximum number of blog posts to display, with options from **2 to 8 posts**.
* **Number of columns on desktop**: Adjust the number of posts displayed per row on desktop. Options include: **1 column, 2 columns** and **3 columns.**
* **Secodary background**: Choose how the **Color scheme** is applied in the section:
  * **None**: Applies the color scheme to both the column and section background.
  * **Show as column background**: Applies the color scheme only to the columns.
* **Enable "View all" button**: Enable this setting to display a "**View all"** button when there are more blog posts than the specified **Maximum blog posts to show**. The "**View all"** button links to the main blog page, allowing users to browse the full list of posts.
* **Mobile layout:** Optimize the section’s layout for mobile devices:
  * **Enable swipe on mobile**: If enabled, this setting changes the layout to a carousel format when the number of blog posts exceeds one row, allowing users to swipe through posts horizontally. If this setting is disabled, the section will remain in a grid format on mobile.


# Spacer

The Spacer section is a simple yet effective design element used to visually separate content on a page.

This section helps improve readability, organize layout flow, and guide the customer’s attention between different sections. It’s especially useful in long-format pages to break up content without overwhelming the design.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Spacer** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings

* **Show line**:  Enable a divider line within the Spacer section.
* **Line opacity**: Controls the transparency of the divider line. Use lower opacity for subtle separation or higher opacity for stronger emphasis.
  * *0%*: The line is fully transparent (invisible).
  * *100%*: The line is fully opaque (solid).
* **Device:** Determines which devices the Spacer section appears on: Only desktop, Only mobbile or  Show on all devices.


# Featured product

The Featured product section highlights a single product on your store, allowing customers to purchase directly without navigating to another page.

This section is ideal for promoting one item by placing it prominently on your homepage or other store pages.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Featured product** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### 2, Section settings:

* **Product**: Select the product you want to showcase in this section.
* **Enable sticky content on desktop**: If enabled, the product details (title, price, buy buttons, etc.) will remain visible while scrolling through product images.
* **Layout**:
  * **Desktop media position**: Choose whether the product images appear on the **left or right** of the product information.
  * **Desktop media layout**: Choose how thumbnails are displayed on desktop:
    * **Thumbnails left**: Thumbnails appear on the left side of the main product image.
    * **Thumbnails bottom**: Thumbnails appear below the main product image.
    * **Hide thumbnails**: If enabled, only the featured image will be displayed without thumbnails.
* **Desktop media size:** Adjust the product media relative to the product information: Small, Medium, or Large.
* **Image ratio**: Choose how the image is displayed: **Adapt to Image** (uses the original aspect ratio); **Square; Portrait or Landscape**
* **Media**:
  * **Enable zoom**: Allows customers to zoom in on product media when clicked.
  * **Autoplay videos**: Product videos will automatically play without needing user interaction.
  * **Enable video looping**: Ensures videos **continuously loop** instead of playing only once.

#### 3, Blocks settings:

The **Featured product** section includes customizable blocks similar to the **Product information** section in the product page. These blocks allow you to modify the displayed product details to create an engaging and informative shopping experience.You can customize and arrange these blocks to highlight essential product information effectively. For further customization, refer to the [**Product information**](/product-page/product-information) section settings.


# Footer

The Footer section is located at the bottom of every online store page, offering easy access to essential links, detailed store information, and contact details.

This section is designed to help customers navigate to important pages such as policy links, social media, and contact information. It enhances user experience by consolidating key resources and creating a consistent, accessible location for essential links.

This section offers customization options, allowing merchants to add logos, images, and contact options, ensuring consistency across devices.

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

### **1, How to Show/Hide the Footer section**

The Footer section is always visible and cannot be removed. However, you can show or hide it in the theme editor:

{% stepper %}
{% step %}
In the **Theme editor**, locate the **Footer section** in the list of sections.
{% endstep %}

{% step %}
Click the **Eye** icon to toggle the section’s visibility

* If the Eye icon has a slash over it, the Footer section is hidden.
* If the Eye icon is clear, the Footer section is visible.
  {% endstep %}
  {% endstepper %}

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

### **2, Section settings**

The **Section settings** control the alignment, logo, and optional links.

* **Desktop content position:** Align the footer content on desktop:
* **Hide “Powered by Shopify”**: If enabled, the “Powered by Shopify” text will be removed from the footer.
* **Logo**: Upload the store’s logo to appear in the footer. Upload a text-based logo for best result.
* **Follow on Shop**: Enable this option to show the **“Follow on Shop”** button in the footer.
* **Show social media icons:** configured in the Theme settings at the bottom of the footer.
* Enable **Country/Region selector** in the footer: Allow customers to select their preferred region and currency.
* **Show country flag** **& Show country name**: display the country flag next to the country name.
* **Language selector:** allow customers to switch languages and view your store in another language.
* **Payment methods**: Display icons for supported payment methods in the footer.

### **3, Blocks settings**

The Footer section supports various blocks, including Image and text, Menu, and Email Signup, each with specific settings for customization.

* **Image and text block**

> - Set the width of the text block on one row from **10% to 100%.** Width is automatically optimized for mobile.
> - Enter the **heading and description** for the block. The heading will not display if an image is uploaded.
> - **Show social media icons**: If enabled, social media icons will display at the bottom of this block. These icons pull from accounts set up in the Theme settings.
> - Upload an image (usually a logo) to display above the description. The heading will disappear if an image is uploaded. Adjust the image size from **50px to 250px**. Align the image to **Left**, **Center**, or **Right on desktop.**
> - **Mobile layout**: Select **Auto-collapse on mobile** to display the block in an accordion format on mobile.

* **Menu block**

> - Set the width of the menu block on one row from **10% to 100%.**&#x20;
> - Enter a heading for the menu block. If left blank, the menu title will be used as the heading.
> - Choose a menu to display in this block. **Dropdown items will not be shown**.
> - Align menu items to the **Left**, **Center**, or **Right**.
> - Select **Auto-collapse on mobile** to display the menu in an accordion format on mobile.

* **Email signup block**

> - Set the width of the Email signup block on one row **from 25% to 100%.**
> - Add a heading for the email signup block.
> - Enable " **Show name field"** option to add a Name field above the email field, allowing you to collect subscribers’ names.
> - **Enable Follow on Shop**: Show “Follow on shop” button under email signup form.

{% hint style="info" %}
**Note**: *Customers who subscribe through the footer email signup form are added to the **Accepts Marketing** list in the Customers page of your Shopify admin.*
{% endhint %}


# Product information

The Product information section allows for versatile customization of the product page, enhancing its usability and aesthetics.

By adjusting layout, style, and interactive features, you can provide a more engaging and informative shopping experience. Notable features include Sticky content, and responsive settings tailored for desktop and mobile.

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

### Section settings:

#### **1. Show breadcrumbs:**

When this setting is enabled (checked), a breadcrumb navigation trail will appear above the product thumbnails on the product page and display the navigation path (e.g., `Home / Collection Name / Product Name`). Breadcrumbs are especially useful for stores with multiple collections or deep navigation levels. When unchecked, this navigation trail will be hidden.

#### **2. Select the first available variants**:&#x20;

If enabled, only images for in-stock variants will display by default. If the featured image belongs to an only shown available products, reducing confusion.

#### **3. Enable sticky content on desktop**:&#x20;

Keeps the product information panel (title, pricing, description, add-to-cart button, etc.) fixed in place as users scroll through product images. Improves accessibility for long product pages. And sticky content deactivates once users scroll past the product media.

#### **4. Layout:**

* **Desktop media position:**
  * **Left**: Displays product media on the left of the content.
  * **Right**: Displays product media on the right of the content.*Note*: Product media always appears above product information on mobile devices for a natural scrolling experience.
* **Desktop media size:** Adjusts the width ratio between product media and product information on desktop.
  * **Small:** Minimizes the media width, placing greater emphasis on product information.
  * **Medium:** Balances media and information width for equal prominence.
  * **Large**: Maximizes the media width, making it the focal point of the section.

{% hint style="info" %}
**Note**: *Media width is automatically adjusted for mobile to maintain clarity.*
{% endhint %}

* **Desktop media layout:** Controls the arrangement of product media thumbnails.

{% tabs %}
{% tab title="Thumbnails left" %}
Displays a vertical strip of thumbnails to the left of the main image.

<figure><img src="/files/TLssU9QmK9oWUhjWz4CZ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Thumbnails bottom" %}
Positions thumbnails horizontally beneath the main image.

<figure><img src="/files/AzsCbcG2feBfUCyGdHuR" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Stacked" %}
Displays all product media (images/videos) in a single vertical column.

<figure><img src="/files/4Po03SBySmsxv8Zt4SZ3" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2 columns" %}
Organizes media into two vertical columns for a compact grid view.

<figure><img src="/files/ARSockOETS0CY5fviiAT" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mosaic" %}
Highlights the featured image prominently, followed by other images in a two-column layout.

<figure><img src="/files/C4plvIxVzMBtSVQySzrw" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Desktop media ratio:** Ensures consistency in the visual display of media items.

#### **5. Media settings**

* **Desktop navigation style:** Customizes the navigation options for browsing product media.
  * **None**: Removes navigation for a cleaner, minimalist presentation.
  * **Arrows**: Displays directional arrows for scrolling through media.
* **Enable zoom:** Activates the ability to zoom in on media when clicked and allows customers to view intricate product details, improving their confidence in purchasing.
* **Autoplay videos:** Enables videos to play automatically when selected in the media carousel. Use autoplay for attention-grabbing promotional videos.
* **Enable video looping:** Ensures videos replay continuously. If unchecked, videos will play only once. Looping videos are ideal for showcasing product features in a repetitive manner.

#### **6. Mobile layout**:&#x20;

Adjusts the arrangement of product media for mobile users.

* **Mobile media layout**:

{% tabs %}
{% tab title="Thumbnails bottom" %}
Displays media thumbnails in a horizontal row below the main product media.
{% endtab %}

{% tab title="Stacked" %}
Shows all media items (images and videos) stacked vertically in a single-column format.
{% endtab %}

{% tab title="Hide thumbnails" %}
Displays a counter indicating the current media item and its position in the sequence.
{% endtab %}
{% endtabs %}

* **Mobile media ratio**: Standardizes the visual aspect ratio of media items on mobile devices.
* **Image width**: Controls the width of the main product image on mobile.
  * **90% width**: Images occupy 90% of the screen width.
  * **Full width**: Images span the entire width of the screen.

{% hint style="info" %}
**Note***: Use images and videos with a minimum width of 2500px to ensure optimal quality across devices.*
{% endhint %}

> The **Product information** section comes with **default blocks** that are always included, providing core details about the product:
>
> * **Title:** Displays the name of the product.
> * **Price:** Shows the product's price, including any discounts.
> * **Variant picker:** Allows customers to select from available variants (e.g., sizes or colors).
> * **Buy buttons:** Includes the “Add to cart” or “Buy now” buttons.
> * **Badges:** Displays promotional labels like “Sale” or “Sold out.”
> * **Line item property:** Enables customers to provide custom input, such as engravings or notes.
> * **Share:** Allows sharing the product on social media or via email.

{% hint style="info" %}
**Note:** *These **default blocks are always visible in Quick view** (activated via the* [***Quick add***](/quick-add) *setting in the **Theme settings**). They cannot be disabled from appearing in Quick view.*
{% endhint %}

In addition to default blocks, you can add **optional blocks** to the **Product information** section. These blocks offer customization and additional functionality. Each optional block includes a **“Show on quick add”** setting, which allows you to control whether the block appears in the **Quick view** feature.


# Title

Title block displays the product title prominently, often paired with the product rating.

<figure><img src="/files/8tEN8PMFIBfTloV65flo" alt=""><figcaption></figcaption></figure>

### **Settings**:

1. **Desktop title size**: Adjust the font size of the title: Small, Medium, Large.
2. **Mobile title size**: Customize the font size specifically for mobile devices: Small, Medium, Large.
3. **Show product rating**: Displays the product's average rating if a product rating app is integrated. Learn more via [Shopify’s Product Review app recommendations](https://apps.shopify.com/categories/marketing-and-conversion-social-trust-product-reviews/all).


# Price

Price block highlights the product price and includes options to display shipping and tax notes.

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

### **Settings**:

1. **Font size scale:** Adjusts the font size of the sale price and compare-at price within the product price block. Scales the current base font size from **100%** up to **150%**, making prices more noticeable or easier to read.
2. **Show shipping and tax policy**: Toggles visibility for additional shipping and tax details.
3. **Colors**:
4. **Use custom colors:** If enabled, the block-specific color settings override the section-wide color scheme.

* **Price:** Choose a custom color for the discounted price, ensuring it stands out. Example: Highlight sale prices in vibrant colors like **red** or **green**.
* **Compare-at price:** Choose a custom color for the original price, typically a muted or gray tone to de-emphasize it while retaining visibility.


# Share

Share block enables customers to easily share products on social media platforms or via email and direct links, increasing product visibility.

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

### **Settings**:

#### **Sharing options**:

* **Share on Facebook**: Displays a quick link for Facebook sharing.
* **Tweet on X**: Allows customers to tweet product links.
* **Pin on Pinterest**: Generates a Pinterest sharing link.
* **Share by Email**: Provides an option to email product details directly.
* **Share by Link**: Offers a simple "Copy link" button.


# Description

Description block provides a detailed description of the product with options to control its presentation.

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

### **Settings**:

1. **Style**:

{% tabs %}
{% tab title="None" %}
Displays the description in its entirety without interactive elements.
{% endtab %}

{% tab title="Reveal" %}
Shortens the description with a **"Read more"** text to expand the full text.
{% endtab %}

{% tab title="Drawer" %}
Collapses the description into a slide-out panel.
{% endtab %}

{% tab title="Collapsible tab" %}
Displays the description within an expandable tab.
{% endtab %}
{% endtabs %}

2. **Label**: Sets a label for the Drawer or Collapsible Tab styles (e.g., "Product Details").
3. **Icon**: Adds an optional icon to accompany the description label.
4. **Open by default**: Automatically expands the collapsible tab upon page load.


# Variant picker

Variant picker block allows customers to select product variants (e.g., size, color) in a user-friendly manner.

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

### **Settings**:

1. **Desktop variant style**: Choose between Dropdown or Buttons layouts.

{% tabs %}
{% tab title="Dropdown" %}
Variant options appear as dropdown menus.
{% endtab %}

{% tab title="Buttons" %}
Variant options appear as clickable buttons.
{% endtab %}
{% endtabs %}

2. **Button layout:** Only applies when variant style is set to "*Buttons*".
   * **Default:** Full-width layout.
   * **2 Columns:** Buttons arranged in two equal-width columns.
   * **3 Columns:** Buttons arranged in three equal-width columns.
3. **Swatches:** let customers see and select color or pattern options visually. Navigate to “[*Theme settings → Swatches*](/swatches)” to configure swatch appearance.
   * **Enable swatches:** Toggle to display swatches for color or pattern variants.
   * **Size:**
     * **Regular**: Default swatch size.
     * **Large**: Bigger swatch for better visibility.
4. **Size guide:** adds a link to a size chart for relevant variant types (like Size or Fit).
   * **Enable popup link:** Displays a clickable "Size Guide" link beside relevant variants.
   * **Variant trigger name(s):** Enter the names of variant options that should trigger the size guide popup (e.g., `Size, Taille`).\
     Use commas to separate multiple names.
   * **Link label:** Text shown for the link (e.g., “Size Chart”).
   * **Page:** Choose the page that the size guide link should open.
5. **Mobile layout:**

* **Mobile variant style:** Offers the same layout choices as Desktop settings: Dropdown and Buttons.


# Text

Text block adds supplementary information such as promotional text, store policies, or unique product details.

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

### **Settings**:

1. **Text**: Enter the content for the block.
2. **Icon**: Option to add an icon to accompany the text.
3. **Text style**: Choose from Body, Subtitle, or Uppercase styles.


# Badges

Badges block adds dynamic badges for sales, stock status, or custom messages to attract customer attention.

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

### **Settings**:

1. **Show sale badge**: Displays a "Sale" badge for discounted products.
2. **Show sold out badge**: Highlights out-of-stock items with a "Sold out" badge.
3. **Show custom badge**: Allows custom badge creation (e.g., "New Arrival").


# Collapsible tab

Collapsible tab block provides an expandable section within the Product Information area, ideal for organizing additional information like FAQs, shipping details, or extended product descriptions. Customers can click to expand or collapse the content, saving space and creating a clean, user-friendly layout.

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

### **Settings**:

1. **Open by default**: Determines whether the collapsible tab is expanded or collapsed when the product page loads.&#x20;
2. **Icon**: Adds an optional icon to the left of the heading, enhancing the visual appearance of the collapsible tab.
3. **Heading**: Define the tab title (e.g., "Care Instructions"). If left blank, the block will not be visible.
4. **Tab content**: Add detailed information or descriptions. It's the main content of the collapsible tab, displayed when the tab is expanded.
5. **Image**: Upload an image to enhance the tab content. The image appears **below the Heading** and **above the Tab content**.
6. **Image height**: Adjusts the height of the uploaded image within the tab: Small, Medium, Large.
7. **Tab content from page**: Allows content to be pulled directly from an existing Shopify page. Overrides any content entered in the **Tab content** field.


# Drawer tab

Drawer tab adds an interactive, slide-out panel to the Product information section, ideal for presenting extended details like size guides, shipping policies, or additional media. The tab expands into a partial-width drawer upon interaction, ensuring a focused and immersive user experience.

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

### Settings:

1. **Icon:** adds an optional icon to the left of the heading to draw attention or visually indicate the tab's purpose.
2. **Heading:** The title of the drawer tab. The heading remains visible, serving as the trigger for opening the drawer. If left blank, the block will not appear on the product page.
3. **Tab content:** adds detailed content such as FAQs, policies, or product-specific notes to the drawer panel.
4. **Tab content from page:** Allows the tab content to be pulled from an existing Shopify page. Overrides any content entered in the **Tab content** field. Ideal for maintaining consistent information across multiple product pages.
5. **Image:** Adds an optional image to the drawer panel for visual support. The image displays **below the Heading** and **above the Tab Content**.
6. **Image height:** Adjusts the height of the uploaded image for optimal display within the drawer: **Small, Medium, Large.**
7. **Button:** Enter the text for the button displayed at the bottom of the drawer. Assign a URL or page link for the button. Choose the button's style to match your store's design theme: **Solid or Outline.**


# Inventory status

Inventory status block highlights the product's stock level, creating a sense of urgency and encouraging purchases for items with limited availability. It can display stock numbers, progress bars, or customized messages.

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

### Settings:

1. **Low inventory threshold (Slider: Range from 0 → 50):**&#x20;

Determines the inventory level at which the "low inventory" message or progress bar appears.

> **Example**: Setting the threshold to **10** means the low inventory alert appears when **fewer than 10** items are in stock.

2. **Low inventory label:** Customizable text for the low inventory alert.

Use `||count||` as a placeholder for the remaining inventory count.

> **Example**:
>
> * Enter: `Hurry! Only ||count|| items left.`
> * Display: `Hurry! Only 5 items left.` (for 5 remaining units).

3. **Content alignment:** Adjusts the alignment of the text and progress bar within the block: Left or Right.
4. **Show icon:** Enables or disables the display of the clock icon next to the low inventory message.
5. **Show progress bar:** Adds a visual progress bar below the low inventory label, indicating stock levels. The progress bar's fill percentage corresponds to the number of items left relative to the low inventory threshold.

> **Example**: For 5 items left with a threshold of 10, the progress bar fills to 50%.

6. **Colors:**

* **Inventory number:** Customize the color of the inventory count.
* **Text:** Adjust the color of the low inventory label.
* **Progress bar:** Set the progress bar's fill and background colors.&#x20;

{% hint style="info" %}
**Note*****:*** The block disappears entirely if the product is no longer available.
{% endhint %}


# Line item property

The **Line item property block** is a highly customizable feature in the Product information section that allows store owners to collect additional information from customers during the shopping process. It is particularly useful for stores offering personalized or customizable products (e.g., engraving, gift notes, or custom sizes). Each field created in the **Line item property block** is tied directly to the product being added to the cart, ensuring the additional details are captured and included in the order.

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

### Settings:

1. **Field type:**

{% tabs %}
{% tab title="Text - short" %}
Creates a single-line input field for short text entries. Best for collecting concise information such as names, dates, or short phrases.

<figure><img src="/files/sxbLEsTV23K5741JZFgL" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Text - long" %}
Creates a multi-line input field for longer text entries. Ideal for detailed information, such as instructions or lengthy customization details.

<figure><img src="/files/9IvioNEhhYDS1HwViRRE" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dropdown" %}
Creates a dropdown menu for customers to select one option from predefined values. Useful for product options like sizes, materials, or predefined customization choices.

<figure><img src="/files/abtQeHMwxvpwQ2AbMYOf" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Checkbox" %}
Displays a checkbox that customers can tick to indicate agreement or preference. Often used for agreements, gift-wrapping options, or optional add-ons.

<figure><img src="/files/7QTin4GDwCmEjnue6Mwx" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Radio buttons" %}
Functions like a dropdown, but displays all options at once using radio buttons. Perfect for presenting a visible list of exclusive choices, such as color or design preferences.

<figure><img src="/files/7WJo36NlhLTmHPsGF0yI" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

2. **Label:** Adds a descriptive heading above the field to clarify its purpose. Example: "Add your personalization" or "Select your preferred color."
3. **Placeholder:** Sets placeholder text inside the input field, providing customers with an example of what to enter. Applies to **Text - short** and **Text - long** fields. *Example*: "Enter your message here."
4. **Required:** Marks the field as mandatory. If unchecked, the product can be added to the cart without filling in the field. If checked, customers must complete the field; otherwise, they cannot proceed to the cart.
5. **Dropdown** field setting&#x73;**:**

* **Options:** Enter all the dropdown choices separated by commas (e.g., "Small, Medium, Large"). Each value will appear as a selectable option in the dropdown.

6. **Checkbox** field setting&#x73;**:**

* **Checked value:** Specifies the value that will be recorded when the checkbox is selected. Example: "Gift wrap included."
* **Unchecked value:** Specifies the value that will be recorded when the checkbox is not selected. Example: "No gift wrap."

7. **Radio buttons field settings:**

* **Options:** Enter all the choices separated by commas (e.g., "Option 1, Option 2, Option 3"). Each choice will appear as a visible option with a corresponding radio button.
* **Layout:** Determines whether the radio buttons are displayed in a single row (**horizontal**) or stacked (**vertical**).


# Buy buttons

The **Buy buttons block** displays the **"Add to cart"** button to allow customers can add the product directly to their cart and an optional **Dynamic checkout** button lets customers quickly buy the product they're viewing with a "Buy it now" button that skips directly to the cart or a branded button with the customer's preferred payment method. If **Local pickup** is enabled in the Shopify admin, and block added, the a **local pickup banner** will appear automatically below the buy buttons.

<figure><img src="/files/3fFrShO0DfaSGtGUDOSS" alt=""><figcaption></figcaption></figure>

### Settings:

**1. Quantity selector**

* **Show quantity selector:** If checked, a **quantity selector** appears next to or above the "Add to Cart" button.
* **Quantity type:**

{% tabs %}
{% tab title="Inline" %}
Appears on the same line as the "Add to Cart" button.
{% endtab %}

{% tab title="Separate" %}
Appears above the "Add to Cart" button.
{% endtab %}
{% endtabs %}

**2. Dynamic checkout**

* **Show dynamic checkout buttons:** If checked, displays a **dynamic checkout button** showing the customer's preferred payment option (e.g., PayPal, Apple Pay).

**3. Out of stock notification**

* **Enable “Notify Me” when product is out of stock:** If checked, replaces the "Sold Out" button with **“Notify me when back in stock!”.** Customers can enter their email to subscribe for restock alerts.

**4. Gift Card:**

* **Show recipient information form for gift cards:** If checked, displays a **recipient information form** on the Gift Card product page.

**5. Add to Cart button:**

* **Show cart total:** If enabled, the current cart value is shown next to the Add to Cart button to provide instant feedback on purchase totals.
* **Button style:** Defines the button's visual style: Solid or Outline.


# Flash message

The **Flash message block** creates a sense of urgency by displaying promotional messages with an optional countdown timer. This block is particularly effective for **limited-time offers**, **flash sales**, or **pre-order deadlines**, encouraging customers to make quicker purchasing decisions.

<figure><img src="/files/1rykYVIXQE30TnHHyuKX" alt=""><figcaption></figcaption></figure>

### Settings:

1. **Background image:** If an image is uploaded, it will be used as the block’s background. If no image is provided, the block will use a background color based on your theme settings.
2. **Icon:** Allows merchants to select a decorative icon to display alongside the timer. *Examples*: **Clock, Hourglass, Fire (for urgency), Lightning bolt** **(for flash sales).**
3. **Icon size:** Adjusts the size of the selected icon for better visibility.
4. **Text:**

* **Heading:** Sets the **main title** for this block. Example: **“Limited-Time Offer”**, **“Deal Ends Soon”**, **“Pre-Order Closes In”**
* **Description:** Adds additional context about the **sale or promotion**. Example: **“Hurry! This deal won’t last long.”**

5. **Countdown timer:**

* **Show countdown timer**: If unchecked, only the promotional message will appear without a timer.
* **Countdown end date:** Specifies the exact **date** when the countdown expires.
* **Countdown end time:** Defines the **exact time** the countdown ends. Uses the **Shopify store’s timezone settings** for accuracy.
* **Hide when countdown reaches zero:** Automatically removes the block from the product page when the timer reaches zero. Ensures that expired timers do not clutter the page.
* **Show timer labels:** If unchecked, the labels such as **Days, Hours, Minutes, and Seconds** will be removed, leaving only numerical values.


# Complementary products

The Complementary products block enhances cross-selling by recommending related or frequently bought together products directly on the product page. This strategy increases Average Order Value (AOV) and improves customer experience by making relevant product suggestions.

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

### Learn how to use the **Shopify Search & Discovery app** to choose complementary products for your website’s product pages.

{% stepper %}
{% step %}
In the Shopify Search & Discovery app, click **Product recommendations**, and then click **Add recommendations**.
{% endstep %}

{% step %}
Select a product that you want to customize product recommendations for.
{% endstep %}

{% step %}
Select up to 10 **Complementary products**.
{% endstep %}

{% step %}
Select up to 10 **Related products** to recommend.&#x20;

Set the product to display only the custom recommendations or to display both custom recommendations and automatically generated recommendations.
{% endstep %}

{% step %}
Click **Save**.
{% endstep %}
{% endstepper %}

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

### Settings:

1. **Heading:** Defines the **title** of the Complementary products block. Example: **“Complete the look”**, **“Pair it with”**, **“You may also like”.**
2. **Maximum products to show:** Controls the **number of complementary products displayed** in the block: from 1 to 10 products.
3. **Product card settings**

* **Image ratio:** Adjusts the **aspect ratio** of product images to ensure visual consistency.
* **Enable quick view:** If checked, enables **Quick view**, allowing customers to **preview product details** in a drawer without leaving the page.


# Image

In the Product information section, you can add Image blocks. Upload an image and customize the size, position, and alignment to create a visually appealing product page.

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

### Settings:

1. **Image**: Select/Upload an image to display.
2. **Image width**: Adjust the size of the image (10% → 100%).
3. **Image alignment**: Set the alignment of the image: Left, Center, Right.
4. **Link**: Assign a clickable link to the image, directing customers to relevant pages or products.


# Divider

The Divider block serves to break up long segments of information or create a visual separation between content sections within the Product information section, enhancing readability and layout structure.

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

### Settings:

1. **Show line:**

* If checked, a visible horizontal line will appear between content sections.
* If unchecked, the Divider block will only create empty space without any visual element.

2. **Line opacity:**

Adjusts the transparency of the divider line. Lower opacity creates a subtle separation, while higher opacity makes the divider more prominent.


# Pickup availability

Local pickup is a Shopify feature and is not controlled by the theme.

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

If you've set up **local pickup** in your Shopify admin, and the **Pickup availability** block added, Poetic Theme automatically displays a banner below the buy buttons that tells customers whether the product is available at your location.


# Product vendor

Product vendor refers to the *supplier or manufacturer* of a product. This information helps you manage your product catalog, categorize items by their origin, and enhance product filtering for customers. Displaying the product vendor can provide transparency, build trust, and make it easier for customers to explore other products from the same brand or supplier.

SKUs *(Stock Keeping Unit)* are unique alphanumeric codes assigned to each product or product variant in a store. They help businesses track inventory, identify products, and manage stock levels more efficiently. SKUs are essential for inventory management systems and are commonly used in product barcodes.

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

### Settings:

1. **Show vendor:** If enabled, the **vendor name** is displayed alongside the product information. Clicking the vendor name will navigate to a **collection page** that lists all products from the same vendor — improving product discoverability.
2. **Show SKU:** If enabled, the **SKU code** appears on the product page, helping customers identify product variants or reference items when contacting customer support.


# Sticky add to cart

The Sticky add to cart block ensures your customers can always access the "Add to Cart" button—no matter where they are on the product page. When the main Buy buttons block is out of view, this sticky bar appears either at the top or bottom of the screen, helping reduce friction and improve conversion.

*<mark style="color:red;">(screenshot)</mark>*

### Settings:

{% hint style="info" %}
**Note**: The sticky Add to Cart bar appears when the regular **Buy buttons** block is out of view.\
When customers click this sticky bar, the page automatically scrolls down to the full **Buy buttons** block.
{% endhint %}

* **Sticky position:**
  * **Top:** Appears below the header and announcement bar (or at the top if those are not present).
  * **Bottom:** Appears at the bottom of the screen.
* **Devices:** Specifies which devices will display the sticky button: Mobile, Desktop or all devices.
* **Mobile layout settings:**
  * **Show cart total:** When enabled, the total cart value (e.g., "$75.00") will appear beside the **Add to cart** label inside the sticky button on mobile.


# Product recommendations

This section lets customers discover new/viewed products and can increase sales.

In the Product page, the **Product recommendations** section displays **related products** are automatically generated based on products in related collections, products that are commonly purchased together, or similar product descriptions and **recently viewed products**.&#x20;

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

### **1. Definition:**

* **Related products:** Dynamically generated recommendations based on frequently bought-together items, product descriptions, and related collections. Accuracy improves progressively with increased order and product data.
* **Recently viewed products:** Displays a history of products a customer has interacted with, facilitating recall and driving conversions by encouraging purchase completion.

### **2. Section settings:**

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

* **Products per row on desktop:** Defines the number of products displayed per row on desktop layouts from 2-4 products.
* **Product card settings:**
  * **Image ratio:** Configures product image aspect ratio for visual consistency: *Adapt to image, Portrait, Square.*
  * **Show color swatches**: Enables color swatch previews for product variants.
  * **Enable quick add button:** Activates Quick view functionality, allowing users to preview product details without navigating away from the page.
* **Mobile layout settings: Products per row on mobile:** Defines mobile display structure for an optimized browsing experience.

### **3. Block settings**

* **Related products:** *(Maximum: 1 instance)*
  * **Heading** – Customizable block title for contextual clarity.
  * **Maximum products displayed:** Defines the upper limit for product recommendation&#x73;*: from 2 to 12 products.*
* **Recently viewed products:** *(Maximum: 1 instance)*
  * **Heading**: Customizable block title.
  * **Maximum products displayed:** Determines the number of recently viewed items retained for user reference: *from 2 to 12 products.*

{% hint style="info" %}
**Note**: If no heading is provided, the respective block remains hidden.
{% endhint %}


# Collection banner

The Collection banner is a prominent visual and informational element that sits at the top of a collection page.

Collection pages display products grouped into collections in a grid format, offering a structured way for customers to browse products. Customizing these pages allows you to highlight featured content, improve navigation with filters, and insert promotions for a more engaging shopping experience.

The collection banner's primary purpose is to provide context, branding, and a clear introduction to the collection. It creates an impactful first impression and encourages customers to explore the products further.

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

### **1. How to add a description or image to your collection?**

To add a description or featured image to a collection banner, follow these steps:

{% stepper %}
{% step %}
From your Shopify admin, go to **Products > Collections**.
{% endstep %}

{% step %}
Select an existing collection or click **Create collection** to create a new one.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/ff84b714-80ad-4493-a8cd-681b39b1074a/Screenshot%202024-12-17%20at%202.04.25%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
On the collection details page: Enter a new **description** in the "Description" field. Click **Add image** to upload a featured image.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/19d457af-e9b4-411f-8b78-7ba11272a115/image.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Click **Save** to apply the changes.

*The image and description will now display within the **Collection banner** section.*
{% endstep %}
{% endstepper %}

### **2. Collection banner section settings:**

* **Show breadcrumbs:** When checked, breadcrumbs will be displayed on the collection page. This helps customers navigate back to previous pages.
* **Show collection image:** Determines whether the collection image (uploaded in Shopify admin) will display. Use a 16:9 aspect ratio for optimal results.
* **Image:** Upload a custom image to replace the default collection image.
* **Desktop banner height:**
  * **Adapt to image size:** Displays the original image size without adjustments.
  * **Small:** Compact banner for minimal content.
  * **Medium:** Balanced size for images and text.
  * **Large:** Prominent banner height to highlight visuals.
* **Desktop content alignment:** Aligns the title and description content: Left, Center or Right.
* **Desktop content width**: Adjusts the width of the content area inside the banner with options: *Small, Medium, Large.*
* **Mobile layout:**
  * **Show collection image on mobile**: If enabled, the collection image will be displayed on mobile.
  * **Mobile banner height:** Adjusts the height of the banner image for mobile devices from Small to Large. With "**Adapt to image size":** Retains the original image dimensions.
  * **Mobile content alignment:** Aligns the collection title and description horizontally on mobile screens: Left, Center or Right.

### **3. Collection title block settings:**

The **Collection title block** controls the display of the collection title within the banner section. This block must be added for the title to appear.

**Settings:**

* **Size:** Adjusts the font size of the collection title to match the store’s design style: **Small, Medium, Large, Extra large, Extra extra large.**
* **Color:** Customize the color of the collection title to align with your branding.

### **4. Collection description block settings:**

The **Collection description block** controls the display of the collection description. This block must also be added for the description to appear.**Settings:Color:** Customize the color of the collection description text to match your store’s aesthetic.

### 5. **Subcollections** block settings:

This block enhances navigation by displaying **related collections** within a **carousel format** on the collection page. So customers can discover more relevant products by linking to similar collections.

**Settings:**

* **Subcollections:** Select **up to 12 collections** to display as **subcollections** under the collection description.


# Product grid

The Product grid section organizes and displays products on collection pages, allowing customers to browse efficiently while using filtering and sorting options.

This section improves product discoverability and enhances the shopping experience by offering customization for desktop and mobile layouts.

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

### 1. Section settings:

* **Products per page**: Controls the number of products displayed per page. Options: **8 to 48 products per page**.
* **Number of columns on desktop**: Determines how many products appear in a row on desktop: **2, 3, or 4 columns**.
* **Show product total**: Displays the total number of products in the collection. If **unchecked**, the product count is hidden.
* **Filtering and sorting settings:**
  * **Enable sorting**: Allows customers to **sort** products by options such as: Best selling; Alphabetically, A-Z; Alphabetically, Z-A; Price, low to high; Price, high to low; Date, old to new; Date, new to old.
  * **Enable filters**: Displays filtering options to help customers refine their search.
  * **Open filters by default**: If **enabled**, filter options are expanded by default.
  * **Filters layout**:

{% tabs %}
{% tab title="Sidebar" %}
Filters appear next to the product grid.
{% endtab %}

{% tab title="Drawer" %}
Filters appear in a hidden panel that expands when clicked.
{% endtab %}
{% endtabs %}

* **Product card settings:**
  * **Image ratio:** Adjusts the shape of product images for consistency: *Adapt to image (original size); Portrait; Square.*
  * **Show product rating**: Displays customer star ratings if reviews are enabled.
  * **Show color swatches**: Enables **color swatches** to indicate available product variations.
  * **Enable quick add button**: Allows customers to preview and add items to their cart without leaving the page.
* **Mobile layout:**
  * **Number of columns on mobile**: Select how many products display in a row: 1 product or 2 products.

<details>

<summary>How to set up filters?</summary>

In the Product grid section, customers can filter products based on:

✅ **Availability**

✅ **Price range**

✅ **Product type**

✅ **Vendor**

✅ **Variant options**

By default, the **filter drawer** includes a **price slider** and **Availability** option (screenshot).You can add more filter options with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery). Steps:

* In the [Shopify Search & Discovery app](https://admin.shopify.com/apps/search-and-discovery), go to **Filters**, and then click **Add filter**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/d86f4875-389c-4476-936b-efb9b5a4cbab/Screenshot%202025-03-12%20at%202.57.44%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Select a **Source** for the filter options. Sources can be variant options, tags, or metafields.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/3d3cca94-fcf0-43e3-b38f-d4e3ebbe489a/Screenshot%202025-03-12%20at%202.59.57%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Add a **Filter label** to change the filter group name that appears when filter is opened.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/7e94cd98-b1ab-4578-ac83-11b687fb7a45/Screenshot%202025-03-12%20at%203.02.50%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Click **Save**.

</details>

### 2. **Promotion image** block settings:

* **Image**: Select an image to promote the **collection**.
* **Position in grid**: Choose where the block appears (1–49).
* **Desktop image width**: Determines how much space the promotion image takes up relative to other product cards in the collection.: 1 column, 2 columns or Full width
* **Text settings:**
  * **Heading**: Enter a title for the promotion (e.g., “Spring Sale” or “New Arrivals”).
  * **Heading size**: Select from *Small, Medium, or Large* font sizes.
  * **Description**: Add supporting text below the heading.
  * **Content position**: Adjust content placement within the image: Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.
* **Button settings**: Customize the button label, assign link and select button style.
* **Mobile layout:**
  * **Mobile image width**: Control how a **promotion image** appears within the product grid on mobile devices: the image spans **one column** or stretches across **two columns**, occupying the **full width** of the screen.


# Cart page

The Cart page provides customers with a summary of the items they intend to purchase before proceeding to checkout.

It allows them to review product details, update quantities, and apply discount codes, ensuring a smooth and informed shopping experience. Additionally, it can display cross-sell recommendations, or shipping incentives to encourage higher order values. *Customers can reach the Cart page via the "View cart" button in the purchase confirmation quick view. If the quick view is disabled, clicking the cart icon in the header will redirect customers directly to the Cart page.*

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

### **Cart section settings:**

In the **Cart page**, click on the **Cart section** to access the following settings:

1. **Show continue shopping link:** If checked, a "Continue shopping" link will be visible, encouraging customers to return to browse more products.
2. **Continue shopping link:** Allows you to set the destination for the "Continue shopping" link. **Default**: Redirects customers to the [**Collection list page**](/collection-list-page), but you can assign any custom page, such as the All products page or a specific Collection.

You can choose to display a free shipping bar, cross sells, **cart notes,** etc at [**Cart** in Theme settings](/cart). When enabled, these features are displayed in both the **Cart drawer** and on the **Cart page**. [See our guides](/cart).


# Collection list page

A central location to display and organize collections.

The **Collection list section** in the **Collection list page** provides a central location to display and organize collections in a visually appealing and structured format. It allows store owners to showcase **all collections** or a curated selection, depending on their preferences.

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

### **Section settings:**

**1. Select collections to show:**

* **All:** Displays all collections in the store.
* **Selected:** Displays specific collections chosen by the store owner.

**2. Selected collections:** Allows you to pick specific collections to display in the section. *Applies only when “Selected” is chosen in “Select collections to show.”*

**3. Image ratio:** Adjusts the height of collection images.

* **Portrait:** Creates a vertical rectangle for images.
* **Square:** Ensures all images are displayed in a square format for uniformity.

**4. Number of columns on desktop:** Determines how many collections are displayed per row on desktop screens: from 2 to 4 collections.

**5. Pagination style:**

* **Number:** Displays numbered pagination to navigate through multiple pages of collections.
* **Click to load:** Adds a "LOAD MORE" button below the current collections, allowing users to load additional collections dynamically.

**6. Text settings:** allow you to add and customize a header for the section.

* **Heading:** Add a header to the section, such as "Our Collections" or "Shop Categories."
* **Heading size:** Adjust the font size of the heading: **Small, Medium, Large, Extra large, Extra extra large.**
* **Description:** Add supplementary information below the heading to provide context or additional details about the collections displayed.
* **Desktop content alignment:** Aligns the heading and description text horizontally.

**7. Mobile layout:**

* **Number of columns on mobile:** Adjust the number of collections displayed per row on mobile devices.
  * **1 column:** Displays one collection per row for a compact design.
  * **2 columns:** Displays two collections per row for a grid-like format.


# Blog post

This section controls the layout, content display, and sharing options for each post.

To customize individual blog posts, navigate to a blog post and click on the **Blog post section** in the theme editor.&#x20;

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

### **1. S**ection settings:

* **Content width:** Adjust the width of the blog post content: **Custom:** Set a specific content width, **Page width or Full width padded.**
* **Custom content width** (Only applies when "Custom" is selected): You can further refine the content width using: **Small, Medium** and **Large**.
* **Image width**: Controls the width of the featured blog post image: Page width, Full width padded, Full width.

### 2. Block settings:

* **Title block**: controls the visibility and placement of the blog post title.
  * **Size**: allows you to adjust the font size of the blog title to match your design preferences.
  * **Content alignment:** Adjusts the alignment of the title (Left or Center).
  * **Show tags:** Displays blog post tags, helping users browse related topics.
  * **Show author**: Displays the author's name.
  * **Show date**: Shows when the post was published.
  * **Show excerpt**: Displays a brief summary of the post (if provided).
* **Featured image block**: If this block is not added, the featured image will not be displayed.
  * **Desktop height**: Choose how tall the image appears on desktop (Adapt to Image, Small, Medium, Large).
  * **Mobile height**: Adjusts the image height on mobile devices (Adapt to Image, Small, Medium, Large).
* **Content block**: Displays the full content of the blog post. This block must be included for the post content to be visible.
* **Share block**: allows visitors to share blog posts across different platforms.
  * **Text:** Customize the default "Share" text.
  * **Sharing options:**
    * **Share on Facebook**: Adds a quick-share link to Facebook.
    * **Tweet on X**: Allows users to share the post as a tweet.
    * **Pin on Pinterest**: Enables users to pin the post’s featured image.
    * **Share by Email**: Opens the default email app to send a link.
    * **Share by Link**: Provides a direct link for easy sharing.


# How to create a Coming Soon page in Shopify?

Shopify makes it easy to create a basic Coming soon page, perfect for keeping your site hidden from the public while building or preparing for launch.

A **Coming soon** page is a pre-launch landing page designed to generate excitement and anticipation for an upcoming product or store launch. It informs potential customers about your brand and when it will go live. This page is typically password-protected, ensuring no access to other parts of the website until the store is officially launched.

<figure><img src="/files/6XNe3HnoAY20B8eG3UL5" alt=""><figcaption></figcaption></figure>

### **Step 1: Enable password protection**

* Log in to your **Shopify admin dashboard**.
* Navigate to **Online Store > Preferences**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/e8529336-56a5-430c-a9fc-47d08b13fb1c/Screenshot%202024-12-19%20at%201.50.49%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Scroll down to the **Password protection** section.
* Check the box next to **Restrict access to visitors with the password**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/12da1f94-cb9e-495a-ab26-d97edf6537c9/Screenshot%202024-12-19%20at%201.54.01%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* In the **Password** field, enter the password that you want to add to your online store and restrict access with. Don't use the same password that you use to log in to your Shopify admin. In the **Message to your visitors** field, enter the message that you want to display to visitors on the password page. If you don't want to display a message, then leave this field blank.
* Save your changes.

{% hint style="info" %}
**Note:** This process ensures that visitors can only access the Coming Soon page with a password, restricting access to the rest of your store.
{% endhint %}

### **Step 2: Navigate to the theme editor to customize your Coming soon page**

* From your Shopify admin dashboard, go to **Online Store** and click on **Themes**. In the **Current theme** section, click the “**Customize**” button.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/9e5c9223-f2ae-4b64-a78e-603e3f51e93f/Screenshot%202024-12-19%20at%201.55.56%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* In the theme editor, click into the dropdown menu of pages at the top, select **Password.**

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/efb74a44-6ff9-4790-8235-34e6a6dbd112/Screenshot%202024-12-19%20at%201.57.31%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

### **Step 3: Customize sections on your Coming soon page.**

The Coming Soon page can include various sections to engage visitors and provide essential information. Below are 3 sections of Coming soon page:

1. [Password header section](/coming-soon-page/header)
2. [Email signup banner section](/coming-soon-page/email-signup-banner)
3. [Password footer section](/coming-soon-page/footer)


# Header

The first element of the Coming soon page, designed to provide key information and an entry point for visitors to access the online store.

This section displays the store’s logo, a message for visitors, and a link to a password input popup. If users enter the correct password, they gain access to the store.

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

### **Section settings:**

1. **Logo image:** Choose a logo to represent your brand on the Coming Soon page.
2. **Desktop logo width:** Adjust the logo size on desktop, ranging from **50px to 350px**.
3. **Transparent header:**

* **Enable transparent header:** When enabled, the header becomes transparent, allowing the background image or video to remain visible behind it.
* **Text color:** Customize the color of text and icons within the transparent header to ensure readability. This setting overrides the **Color scheme** setting of the Password header section.


# Email signup banner

The main content section of the Password page.

The **Email signup banner section** encourages potential customers to subscribe their emails for updates and follow social media channels, helping build an audience before the store opens.

<figure><img src="/files/85ip5WQDz8KqeGNAIe4A" alt=""><figcaption></figcaption></figure>

### 1. Section settings:

* **Background image**: Upload a background image to enhance visual appeal.
* **Image overlay opacity**: Adjust the transparency of the overlay on the background image to improve readability.

### 2. Blocks settings:

* **Heading block**:
  * **Heading:** Enter a title that grabs attention.
  * **Heading size**: Customize the heading font size: *Small, Medium, Large, Extra large, Extra extra large.*
* **Text block**:
  * **Text:** Add a description to provide more context or encouragement for visitors to subscribe.
* **Email form block**: When added, displays an email signup form for customers to subscribe
  * **Show social media links**: If enabled, social media icons will appear below the email form, allowing visitors to connect on different platforms.


# Footer

The final touchpoint on the Coming Soon page.

This section provides both essential information and navigation options. It ensures functionality and professionalism while maintaining a cohesive aesthetic for the page.

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

* The statement **"This shop will be powered by Shopify"** reassures visitors that the store is hosted on a reliable and reputable platform. This can build trust with potential customers even before the store is live.
* The **"Are you the store owner? Log in here"** link provides a direct and convenient entry point for store owners, ensuring they can easily access the store for updates or final preparations without needing to navigate elsewhere.

### **Section settings**

**Transparent footer setting:**

* **Enable transparent footer:** When checked, the footer becomes transparent, allowing the background of the page to remain visible behind it.
* **Text color:** Use the color picker to customize the text and icon colors in the transparent footer. This setting overrides the **Color scheme** settings for the footer, ensuring contrast and readability.


# Blog posts

The central hub for showcasing all blog posts under a specific blog in your Shopify store.

Blog posts section provide a structured and organized layout for blog content, helping visitors easily browse through your posts. Blogs allow businesses to share stories, updates, guides, and promotional content, enriching the customer experience and boosting engagement.

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

### Section settings

**1. Show title:** Choose whether to display the blog title.

<details>

<summary><strong>What is a blog title?</strong></summary>

A blog title categorizes a set of blog posts under a specific theme or topic (e.g., "News," "Recipes," "Fashion Updates").

</details>

<details>

<summary><strong>How to create a blog title in Shopify?</strong></summary>

1. In the Shopify admin, navigate to **Online Store > Blog Posts**.
2. Click **Add blog post**.
3. Enter a title and content for your blog post.
4. Under the **Organization** section, from the **Blog** drop-down menu, select **Create a new blog**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/a98af354-02c1-4e4f-8a8a-a0d54ba3827d/Screenshot%202024-12-18%20at%202.35.51%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

5. In the **Blog title** field, enter your desired title.
6. Click **Save**.

</details>

**2. Show tags:** Displays category filters, allowing visitors to filter blog posts by tags or article categories. Enhances navigation and improves the discoverability of blog posts based on specific topics or themes.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/a5b7c952-ecce-47ce-a8a4-aa8b28616454/Screenshot%202024-12-18%20at%202.32.32%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

**3. Image ratio:**

* **Adapt to image:** Maintains the original aspect ratio of uploaded images.
* **Square:** Displays all blog images in a square format for uniformity.
* **Portrait:** Displays all blog images in a vertical rectangular format.
* **Landscape:** Displays all blog images in a horizontal rectangular format.

**4. Blog posts per page:** Set the maximum number of blog posts displayed. From 12 to 36 posts per page.

**5.** **“Read more” button style**: Customize the " Read more" button style: Solid, Outline or Text.


# Customer account

Customer accounts allow your customers to log in to view and manage their personal details, such as orders, profile information, and saved addresses.

This feature enhances the shopping experience by enabling faster checkouts, as stored account information is automatically filled during the checkout process.

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

### If you want to show the account icon, check the following steps:

1. From your **Shopify Admin >** go to **Settings** **> Customer accounts.**
2. In Login links **>** Enable **Show login link in the header of online store and at checkout.**

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/7371de2c-242b-4c7d-8727-d8594b2122cd/Screenshot%202024-12-23%20at%201.51.37%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

3. Select which version of customer accounts to link to:

* **Customer accounts** is the newest version of customer accounts, and lets your customers log in using a one-time 6-digit verification code sent by email. A password isn't required to log in.
* **Legacy** lets your customers log in using an email and a password.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/84d09429-c6ed-4e19-b7ad-06600ec44158/Screenshot%202024-12-23%20at%201.55.48%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

Customers can log in using an email and a password. Customers accept account invites or create a new account from the login page. Customers can edit the name associated with the shipping address, which doesn't change the customer profile name in your admin.


# FAQs

{% content-ref url="/pages/yNqaO1FJZjq71CMj3bDH" %}
[Set up local pickup](/others/faqs/set-up-local-pickup)
{% endcontent-ref %}

{% content-ref url="/pages/Wo26CXrhktzUDaUdZ6OR" %}
[Where do submissions of Email signup form go?](/others/faqs/where-do-submissions-of-email-signup-form-go)
{% endcontent-ref %}

{% content-ref url="/pages/yGm99zGbcdFdkf7ctkCK" %}
[View contact form submissions](/others/faqs/view-contact-form-submissions)
{% endcontent-ref %}

{% content-ref url="/pages/QVjgHvzwoaXudZDIA2g9" %}
[How to add or edit your store policy pages?](/others/faqs/how-to-add-or-edit-your-store-policy-pages)
{% endcontent-ref %}

{% content-ref url="/pages/8PL8qwEmg11dVkLZIbL8" %}
[Setting a focal point on an image](/others/faqs/setting-a-focal-point-on-an-image)
{% endcontent-ref %}


# Set up local pickup

To offer this service, you must configure pickup settings for each eligible location.

In-store pickup allows your customers to place orders online and collect them directly from designated store locations.&#x20;

### **1. How to set up In-Store Pickup?**

* From your Shopify admin, go to **Settings** > **Shipping and delivery**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/faf82f78-05e6-4bdb-a25a-b1be443f2eb7/Screenshot%202024-12-23%20at%202.10.32%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* In the **Pickup in store** section, click **Set up** or the **›** icon.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/a0aff45b-2605-488a-a5b7-52447f740759/Screenshot%202024-12-23%20at%202.11.52%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Select a location for in-store pickup:
  * If you have a single location, then click a location where you want to set up pickup in store.
  * If you have multiple locations, then click **Add location**, and then click a location where you want to set up pickup in store.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/ed0032cc-44bc-4a0c-8cbd-e990b7a43ee8/Screenshot%202024-12-23%20at%202.15.00%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* In the **Expected pickup date** section, select a processing time for in-store pickup from the drop-down menu. This information is displayed to your customers.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/16d392a6-5c3d-4cb5-8480-71fbbc7ddfbd/Screenshot%202024-12-23%20at%202.16.41%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* In the **Store transfers** section, select the locations that you want to transfer inventory from when inventory is unavailable at the in-store pickup location.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/5c39f3d3-00fe-4d18-8f1b-1b80fece6c2a/Screenshot%202024-12-23%20at%202.19.07%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* In the **Ready for pickup notification** section, enter pickup instructions for your customers.
* In the **Checkout preview** section, preview how your in-store pickup option displays at checkout.
* Click **Save**.

### **2. Show pickup availability to your customers**

Poetic Theme lets you show customers whether a product is available for local pickup. On each product page, a pickup availability section shows whether the product is available, and the estimated time frame for pickup. This information appears only for products that are stocked in at least one pickup location and have **This is a physical product** selected in the **Shipping** section of a product variant's details.

**Steps:**

* From your Shopify Admin, go to **Products**.
* Select a product.
* Under **Variants**, select a variant.
* Under **Inventory**, select locations that stock the selected variants.
* Under **Shipping**, check **This is a physical product**.
* **Save** the settings.

If you have local pickup enabled for only one location, then the location and pickup availability is displayed for that location. Customers can click **View store information** to learn more about the pickup location.

If you have local pickup enabled for more than one location, then the pickup availability section displays the location and pickup availability for one of your stores. Customers can click **Check availability at other stores** to check the product's availability at all of your locations that have pickup enabled.


# Where do submissions of Email signup form go?

Email signup forms are an essential tool for collecting customer email addresses directly through your online store.&#x20;

* When a customer submits an email through the signup form, their email address is automatically collected.
* This data is stored in the **Customers** section of your Shopify admin panel.

### **How to access your customer emails:**

* Navigate to your Shopify admin and go to **Customers**.
* You'll see a list of all email addresses collected through the signup forms.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/1e85bf75-5022-495e-b2e5-ce0909671220/Screenshot%202024-12-23%20at%202.39.03%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: Email signup forms are a simple yet effective way to grow your marketing list and maintain ongoing engagement with your customers. By leveraging the email data stored in Shopify, you can enhance your business's outreach and build lasting relationships.
{% endhint %}


# View contact form submissions

When a customer submits a contact form on your Shopify store, the submission details are sent directly to the **sender email address** associated with your store.

### **1. View submission emails:**

* Check your email inbox associated with the sender email address to view all contact form submissions.
* Submissions will include details such as the customer's message, name, and email address.

### **2. Update the sender email address:**

* Log in to your **Shopify admin**.
* Navigate to **Settings** > **Notifications**.
* Locate and edit the **Sender email** field.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/119aa724-60b4-4b6e-ab65-1153a8fbaf1e/Screenshot%202024-12-23%20at%202.44.01%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

* Save your changes to ensure future contact form submissions are directed to the updated email address.


# How to add or edit your store policy pages?

You can add or edit policies for your store. Although Shopify can generate templates, you're responsible for following your published policies. Review your policies carefully before adding them.

### **Steps:**

1. From your Shopify admin, go to **Settings** > **Policies**.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/b634b692-c6a0-4feb-b67e-7b3cc7ca2c2c/Screenshot%202024-12-23%20at%202.48.42%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

2. Enter your store policies, or click **Create from template** to enter the default template.
3. Edit your store policies, use the rich text editor to add style and formatting to your policies, and add links and images.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/cc2b25d8-8c1d-43b5-844f-f24546ea3857/Screenshot%202024-12-23%20at%202.50.13%E2%80%AFPM.png" alt=""><figcaption></figcaption></figure>

4. Click **Save**.

{% hint style="info" %}
**Note***:* Your policy pages are automatically linked in the footer of your checkout pages.

{% endhint %}

<figure><img src="/files/2u4DUaK5TdtnU5A2JioL" alt=""><figcaption></figcaption></figure>

*Customers might need to see your policies before they check out, so it's a good idea to link your policy pages in your store navigation.*


# Setting a focal point on an image

You can use focal points to define the most important part of an image on your online store. When you set a focal point on an image, you make it the area of focus.

Focal points always display in frame, even if you have a theme that crops your image to fit the layout.You can only have one focal point per image, but you can change the focal point or remove it at any time. If you add a focal point to an image, and then use the image in multiple places on your online store, then the same focal point applies wherever you use the image.

<figure><img src="/files/8Bs5OvoE6lIFZkiF35vL" alt=""><figcaption></figcaption></figure>

### 1. Add a focal point to an image

Depending on the way your theme crops and resizes your images, the focal point might not always be visually centered.

#### Steps:

* Click an image from any of the following locations in your Shopify admin:
  * In the **Content** > **Files** section.
  * In the theme editor.
  * In the **Media** section of your product listings in the **Products** section.
  * In the Shopify Email editor.
  * In the **Metafields** section of any resource that has a **File reference** type metafield for adding an image.
* To select the part of the image where you want to set a focal point, either click the image or drag the blue dot.
* Click **Save**.

### 2. Remove a focal point from an image

#### Steps:

* Click an image from any of the following locations in your Shopify admin:
  * In the **Content** > **Files** section.
  * In the theme editor.
  * In the **Media** section of your product listings in the **Products** section.
  * In the Shopify Email editor.
  * In the **Metafields** section of any resource that has a **File reference** type metafield for adding an image.
* Click **Remove**.
* Click **Save as new**.


# Search page

The **Search page** appears when visitors submit a search using the search bar, providing them with relevant results for products, blog posts, or other content. This feature enhances the shopping experience by making it easier to find specific items, improving navigation, and increasing conversion rates.

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

### **Search results section settings:**

* **Results per page**: Set the number of search results displayed on one page, adjustable between 8 to 48 results.
* **Products per row on desktop:** Define the number of products shown per row on desktop, with options from 2 to 4 products per row.
* **Display total results**: If checked, the total number of search results will be displayed.
* **Product card:**
  * **Image ratio**: Adjust the aspect ratio of product images for a consistent look: Adapt to image (Maintains the original aspect ratio of the uploaded product images), Portrait, Square.
  * **Show product rating**: If checked, product ratings (star reviews) will be displayed.
  * **Show color swatches**: displays available color swatches for products with color variants.
  * **Enable quick add button**: activates the "Quick Add" button, allowing customers to view product details and add to cart without leaving the search results page.
* **Mobile layout**:
  * **Products per row on mobile**: Determines how many product columns appear per row on mobile devices: 1 product or 2 products.