​

Theme “Pilot” Sections

Hero Image Hero Image section features a prominent full-screen visual element such as images, custom illustrations, or engaging banners that serve as the first touchpoint for visitors to the webpage. This commanding feature shows the brand’s aesthetic, making it essential for creating strong first impressions and effectively communicating your key message.

1. General settings:

• Slide: Set the position, width, or vertical padding to the content block.
• Background: Select or change the background image, background fit, and position.
• Overlay: Adjust properties for the overlay on the slide background.

2. Section’s elements:

• Subheading: Set subheading properties such as text content, HTML tags, color, size, and alignment.
• Heading: Configure the heading with customizable HTML tags, text content, color, size, alignment, and letter spacing.
• Paragraph: Enter descriptive text for your slide’s main content. You can customize the HTML tag, color, size, and text alignment.
• Button: Customize the primary call-to-action button by setting its style, target link, and text.

Image with Text The Image with Text section combines visually striking imagery with compelling text content to create powerful marketing messages. This versatile section allows merchants to showcase product features, highlight promotional campaigns, or tell brand stories through a harmonious blend of visual and textual elements. Perfect for creating engaging content blocks that capture attention while delivering key information to visitors.

1. General settings:

• Layout: Settings for grid spacing among items, border radius, and width.
• Background: Upload or select the section background, set the background image position and fit.

2. Section’s elements:

2.1. Image

• Image: Set the main image and its properties including ratio, width, background fit, and border radius.

2.2. Content Set the text content and its styles with configurable settings.

• Subheading: Configure subheading text properties, including HTML tags, content, color, size, and alignment.
• Heading: Customize heading properties such as HTML tags, text content, color, size, alignment, and letter spacing.
• Paragraph: Add descriptive text for the slide content. Configure text properties including HTML tag, color, size, and alignment.
• Button: The primary call-to-action button. Choose button styles and customize the link destination and button text.

Hero Video Hero Video section combines dynamic video content with compelling text overlays, providing an immersive and engaging way to showcase your products or brand story. This powerful visual presentation allows you to demonstrate product features, share brand narratives, or highlight special collections while maintaining viewer attention through seamless video integration and strategic content placement.

1. General settings:

• Video: Set your video link and section height for the hero video.
• Layout: Configure layout properties including width, spacing, and vertical padding.
• Overlay: Configure overlay properties for the section.

2. Section’s elements:

• Subheading: Set text properties for the subheading including HTML tags, subheading content, color, size, and alignment.
• Heading: Modify the properties for the section’s headings HTML tags, subheading content, color, size, alignment, and letter spacing.
• Paragraph: Enter the description or main text of the section. Settings for HTML tag, text color, size, and alignment are also configurable.
• Button: The section’s main call-to-action button. Customize the button style, target link, and text.

Slideshow Slideshow section provides a dynamic and visually appealing way to showcase your featured products or collections through an interactive carousel. Perfect for featuring new arrivals, seasonal collections, bestsellers, or special promotions, the slideshow helps create an engaging and professional presentation of your store’s key products.

1. General settings:

• Slideshow: General settings for section “Slider”, slider loop, and auto sliding.
• Navigations & controls: Settings for shapes, colors, display for slider arrows, and pagination dots.

2. Section’s elements:

2.1. Slide: General settings:

• Slide: Set the position, width, or vertical padding to the content block.
• Background: Select or change the background image, background fit, and position.
• Overlay: Adjust properties for the overlay on the slide background.

Slide’s child elements:

• Subheading: Configure subheading properties including text content, HTML tags, color, size, and alignment.
• Heading: Customize the heading’s HTML tags, text content, color, size, alignment, and letter spacing.
• Paragraph: Add descriptive text for the slide’s main content. Customize the text’s HTML tag, color, size, and alignment.
• Button: Configure the slide’s primary call-to-action button by customizing its style, target link, and text.

Featured Collections Featured Collections section showcases and highlights the store’s most important collections. This versatile section helps storeowners spotlight seasonal collections, bestselling categories, or themed product groupings, making it easier for customers to discover and explore the store’s key merchandise selections.

1. General settings:

• Featured collections: Select the featured collection from the store.
• Layout: Configure layout properties including width, spacing, and vertical padding.

2. Section’s elements:

2.1. Subheading: Set text properties for the subheading including HTML tags, subheading content, color, size, and alignment. 2.2. Heading: Modify the properties for the section’s headings HTML tags, subheading content, color, size, alignment, and letter spacing. 2.3. Paragraph: Enter the section’s description or main text. Settings for HTML tag, text color, size, and alignment are also configurable. 2.4. Collection items: Select each collection item for the corresponding settings.

• Collection items: Set grid size and spacing among collection items.
• Collection card: Configure image, content, overlay, and button properties.

Promotion Grid Promotion Grid section empowers store owners to create visually striking promotional displays by highlighting their products or collections through an organized grid layout. This section combines customizable images with compelling promotional messages, allowing merchants to create eye-catching displays that showcase special offers, new arrivals, seasonal promotions, or featured categories.

1. General settings:

• Grid: Set the grid size for items and gaps among them.
• Layout: Settings for grid spacing among items, border radius, and width.
• Background: Upload or select the section background.
• Overlay: Configure overlay properties for the section.

2. Section’s elements:

2.1. Promotion: General settings:

• Layout: Set the position for the content block and promotion card radius.
• Background: Select or update the card background and its overlay.

Child elements settings:

• Subheading: Set text properties for the subheading including HTML tags, subheading content, color, size, and alignment.
• Heading: Modify the properties for the slide’s headings HTML tags, subheading content, color, size, alignment, and letter spacing.
• Paragraph: Enter the description or main text of the slide content. Settings for HTML tag, text color, size, and alignment are also configurable.
• Button: Select your button styles, and set the button target link and the button text.

Hotspots Hotspots section enables merchants to create interactive and engaging product displays by adding clickable hotspots to images. This powerful feature allows store owners to showcase products in context through visual demonstrations or real-life customer usage scenarios, making it easier for shoppers to understand product features and applications.

1. General settings:

• Layout: Settings for the section’s main image, image ratio, content spacing, and section width.
• Heading: Set text properties for the subheading including HTML tags, subheading content, color, size, and alignment.

2. Section’s elements:

Hotspots item:

• Icon: Select the hotpot icon style, size, and icon position on the image.
• Product: Select and set a product with the corresponding hotspot icon. Show/hide the product price and “view details” link.

Columns with Images The Columns with Images section offers a smart way to showcase your store’s key features, unique selling points, and core benefits. This section allows you to create visually appealing layouts that combine compelling imagery with descriptive text, making it perfect for highlighting product advantages, service offerings, or brand values in an easily digestible format.

1. General settings:

• Layout: Set the position for the content block and promotion card radius.
• Background: Select or update the section background or background color.
• Overlay: Configure overlay properties for the section.

2. Section’s elements:

• Column: Set column size, image, description for each column, and optional button.

Countdown The Countdown section adds an engaging timer feature to your store, creating excitement around time-sensitive events such as flash sales, limited-time promotions, product launches, or seasonal campaigns. This dynamic element helps drive customer engagement and motivates immediate action by visually displaying the remaining time until the event begins or ends.

1. General settings:

• Layout: Settings for grid spacing among items, border radius, and width.
• Background: Upload or select the section background, set the background image position and fit.
• Overlay: Configure overlay properties for the section.

2. Section’s elements:

• Subheading: Set text properties for the subheading including HTML tags, subheading content, color, size, and alignment.
• Heading: Configure the heading’s properties including HTML tags, text content, color, size, alignment, and letter spacing.
• Paragraph: Enter the description or main text of the slide content. Settings for HTML tag, text color, size, and alignment are also configurable.
• Button: The primary call-to-action button. Choose button styles and customize the link destination and button text.
• Timer: Select the start/end date and time.

Image Gallery Image Gallery section allows merchants to present their products from multiple angles, demonstrate real-world usage scenarios, or build social proof through authentic customer photos, creating a more immersive and compelling shopping experience.

1. General settings:

• Layout: Settings for grid spacing among items, border radius, and width.
• Background: Upload or select the section background, set the background image position and fit.
• Overlay: Configure overlay properties for the section.

2. Section’s elements:

2.1. Subheading: Configure the subheading’s text properties, including HTML tags, content, color, size, and alignment. 2.2. Heading: Customize the heading with HTML tags, text content, color, size, alignment, and letter spacing. 2.3. Paragraph: Add a description or main text for the content. Customize HTML tag, text color, size, and alignment settings. 2.4. Button: This is a customizable call-to-action button. You can select button styles and set the link destination and button text. 2.5. Images: General settings:

• Images: Users can set the spacing between the image items and their height.

Child elements:

• Image: Set the image and column span, border radius, and visibility on mobile.

Maps The Maps section allows merchants to display their business addresses with precise location markers on an interactive, user-friendly map interface. This feature helps customers easily find your brick-and-mortar stores while providing a seamless navigation experience through an embedded, dynamic map visualization.

General settings:

• Layout: Settings for grid spacing among items, border radius, and width.
• Address box: Edit or set your address, opening hours or description, and styles for the text and button.

Testimonials Testimonials section showcases authentic customer experiences, reviews, and feedback, providing social proof and building trust with potential customers. This feature allows merchants to display real customer stories and testimonials for product quality, service excellence, and overall customer satisfaction.

1. General settings:

• Layout: Settings for grid spacing among items, border radius, and width.
• Background: Upload or select the section background, set the background image position and fit.
• Overlay: Configure overlay properties for the section.

2. Section’s elements:

2.1. Subheading: Set text properties for the subheading including HTML tags, subheading content, color, size, and alignment. 2.2. Heading: Configure the heading’s properties including HTML tags, text content, color, size, alignment, and letter spacing. 2.3. Paragraph: Enter the description or main text of the slide content. Settings for HTML tag, text color, size, and alignment are also configurable. 2.4. Button: This is the primary call-to-action button. You can choose button styles and customize the link destination and button text. 2.5. Items: General settings:

• Items gap: Adjust the spacing between the testimonials.

Child elements:

• Testimonial: Set the testimonial’s text content, heading, author details, and picture.

Newsletter The Newsletter section helps store owners build and maintain strong relationships with their customer base. By enabling email list signup functionality, this section allows merchants to connect directly with their audience, and keep customers informed about new products, promotions, and updates while fostering long-term engagement through regular communication channels.

1. General settings:

• Layout: Settings for grid spacing among items, border radius, and width.
• Background: Upload or select the section background, set the background image position and fit.
• Overlay: Configure overlay properties for the section.

2. Section’s elements:

2.1. Subheading: Set text properties for the subheading including HTML tags, subheading content, color, size, and alignment. 2.2. Heading: Configure the heading’s properties including HTML tags, text content, color, size, alignment, and letter spacing. 2.3. Paragraph: Enter the description or main text of the slide content. Settings for HTML tag, text color, size, and alignment are also configurable. 2.4. Button: This is the primary call-to-action button. You can choose button styles and customize the link destination and button text. 2.5. Form:

• Form: Configure your newsletter input, and placeholder, add the help text, or customize button text.

Footer - Klaviyo subscription form This form allows customers to subscribe to the latest news from the store. The subscription emails will be saved in klaviyo profile.

1. Obtain Klaviyo API Token

1.1. Log in to your Klaviyo account. 1.2. Navigate to Settings:

• Click on your account name in the bottom-left corner.
• Select Settings → API Keys.

1.3. Click Create Private API Key. 1.4. Copy the generated API key.

2. Add Env in storefront settings

2.1. In Hydrogen app, select Storefront settings 2.2. Select Environments and variables -> Add variable 2.3. Input key: KLAVIYO_PRIVATE_API_TOKEN 2.4. Paste the API key in value input and save.