Noble Theme Documentation

Swatch styles in Noble let you choose product swatches as circles,squares or default.

How To Showcase Product Color Swatches:
Noble color swatches showcase all available product colors clearly and visually. They improve the shopping experience by making color selection faster and easier.

Noble’s Search page lets you control the color schemes,number of products per page and the number of products per column.
You can also configure filters, filter layout, product card settings, quick view, and quick view position.

The Filter Layout setting on the search page allows you to adjust the product filter layout. You can set it to vertical or drawer.
Click on the Filter button to open filter drawer

Vertical filter layout

Noble’s Collection page includes three main sections: Collection Banner, Collection List, and Collection, allowing you to create a complete and flexible product browsing experience.

Collection Banner section is used to display the collection title and description. It helps create a strong visual introduction for the collection page.

Collection List section includes settings for color scheme, container width, heading, and layout customization. You can control the number of columns, aspect ratio, and showcase featured or trending collections.

Collection section displays products with filtering and sorting options. It includes settings for product cards, image ratio, quick view, and layout controls to enhance product visibility and usability.

The collection page also supports filters (such as availability, color, and category) and sorting options like “Best Selling” to help users easily find products.

The Nobles product page offers flexible settings for media, spacing, and color schemes, and provides a variety of blocks within section. These blocks include the variant selector, title, price, quantity selector, add-to-cart buttons,discount,complementary products and more. The product page also includes a Recently Viewed section.

The Variant Selector setting offers two options: Button and Dropdown.

Button

Note: If you want the variant picker to display only as buttons or dropdowns (not swatches), please set the Swatch Shape to Default in the theme settings.

Dropdown

How To Showcase Product Color Swatches:
Noble color swatches showcase all available product colors clearly and visually. They improve the shopping experience by making color selection faster and easier.

The product page also includes Complementary Products block and Related Products sections which help you recommend additional products to customers. These recommendations improve product discovery and encourage customers to purchase more items from your store.

Both Complementary Products and Related Products are managed using the Shopify Search & Discovery App. This free Shopify app allows you to manually control which products appear as recommendations on the product page.

Step 1: Install the Shopify Search & Discovery App

To configure product recommendations, you first need to install the Shopify Search & Discovery app from the Shopify App Store.

1. Go to your Shopify Admin.
2. Click on Apps in the left sidebar.
3. Click Shopify App Store.
4. Search for Shopify Search & Discovery.
5. Click Install and add the app to your store.

Step 2: Set Complementary Products

Complementary products are items that pair well with the current product. For example, if a customer is viewing a face cream, you may recommend a cleanser or toner as complementary products.

Follow these steps to add complementary products:

1. Open the Search & Discovery App from your Shopify admin.
2. Click on Product Recommendations.
3. Select the product you want to edit.
4. In the Complementary Products section, click Add products.
5. Choose the products you want to recommend.
6. Save the changes.

These products will now appear in the Complementary Products block on the product page.

Step 3: Set Related Products

Related products show items that are similar to the current product, helping customers explore alternative or similar options.

To configure related products:

1. Open the Search & Discovery App.
2. Navigate to Product Recommendations.
3. Select the product you want to edit.
4. In the Related Products section, choose the products you want to display.
5. Save your changes.

Once configured, these products will appear in the Related Products section on the product page.

The Footer is the bottom section of your Shopify store and appears consistently across all pages of the website. It is commonly used to provide important navigation links, store information, customer support resources, and newsletter subscriptions. A well-structured footer helps improve user experience by allowing customers to quickly access important pages such as policies, collections, and contact information.

The Nobles theme provides flexible footer customization options allowing you to control its layout, content, and design. You can easily add menus, images, text content, newsletter signup forms, and social media links. Additionally, several built-in settings allow you to enable payment icons, language selectors, country selectors, and other useful elements to improve store functionality.

The footer contains the following settings:

1. Color Scheme – Choose a color scheme for the footer section to match your store branding.
2. Enable Logo – Allows you to display your store logo in the footer area.
3. Select Image – Upload or select an image that will be shown in the footer when the logo option is enabled.
4. Show Social Icons – Displays social media icons in the footer allowing customers to visit your social profiles.
5. Payment Icons – Displays supported payment method icons such as Visa, Mastercard, PayPal, etc., helping build trust with customers.
6. Enable Country Selector – Allows customers to select their country or region if your store supports international markets.
7. Enable Language Selector – Enables a language switcher for stores that support multiple languages.
8. Enable Follow on Shop – Allows customers to follow your store through the Shop app.
9. Copyright Section Background – Customize the background color of the copyright area displayed at the bottom of the footer.
10. Section Inner Padding – Controls the spacing inside the footer section (top and bottom).
11. Section Padding – Adjust the outer spacing of the footer section for better layout alignment.

A Blog is a powerful way to share articles, updates, guides, and stories related to your brand or products. It allows you to provide helpful content to your customers while improving your store's visibility in search engines. Blogs can be used for product guides, beauty tips, industry news, brand announcements, and other informative content that keeps customers engaged with your store.

The Nobles theme displays blog posts using visually appealing article cards. Each card includes the featured image, blog title, excerpt, and additional article information. You can customize the appearance of these blog cards using the available section settings.

The blog section includes the following customization settings:

1. Heading Color Scheme – Allows you to select the color style for the blog page heading.
2. Color Scheme – Choose the overall color scheme used for the blog section background and content area.
3. Section Border Radius – Adjust the rounded corners of the blog section container to match your store design.
4. Heading Alignment – Control the alignment of the blog page heading. Available options include Left, Center, and Right.
5. Heading Size – Select the size of the blog heading based on your typography preference.

Article Card Settings

1. Aspect Ratio – Defines the shape of the blog article image (such as Landscape or Square).
2. Image Size – Controls how the blog image fits inside the article card. The options include Cover or Contain.
3. Blog Title Style – Allows you to change the typography style used for blog titles.
4. Content Position – Choose where the article content appears relative to the image. Content can appear on the Right side of the image or at the Bottom below the image.
5. Number of Blogs Per Page – Control how many blog articles should be displayed on a single page.
6. Show Author – Enable or disable the display of the blog author name.
7. Show Date – Displays the publishing date of each blog post.
8. Show Content – Shows a short excerpt from the blog article within the card.
9. Show Tags – Displays tags associated with each blog post.

The blog article card includes a Content Position setting, allowing you to place the article content either to the right of the image or below the image depending on your preferred layout style.

To display blog content on this page, you need to create blog posts from the Shopify admin panel.

How to Create a Blog Post

1. Go to your Shopify Admin.
2. Click on Content.
3. Select Blog posts.
4. Click Add blog post.
5. Add the Title and Content for the article.
6. Upload a Featured Image.
7. Click Save or Publish.

After creating blog posts, they will automatically appear on the blog page using the selected layout and settings.

A Blog Post is an individual article published within your store's blog. Each blog post allows you to share valuable content such as tutorials, product insights, beauty tips, industry news, or brand stories. Blog posts help you engage with your audience while improving your store's search engine visibility.

The Nobles theme provides a clean and structured blog article layout that presents your content in a visually appealing way. Each blog post page highlights important elements such as the featured image, article title, author information, publishing date, and social sharing options.

The blog post template includes several settings that allow you to control the appearance of the article page.

Blog Post Settings

1. Color Scheme – Select the color scheme used for the blog article section.
2. Section Border Radius – Adjust the rounded corners of the blog post container.
3. Heading Font Size – Choose the heading size for the blog title (H1, H2, H3, H4, or H5).
4. Image Height – Control the height of the featured image displayed at the top of the blog post.
5. Show Author – Enable or disable the display of the blog author name.
6. Show Date – Display the publishing date of the article.
7. Show Tags – Show tags associated with the blog post.
8. Show Comments Count – Display the number of comments on the article.
9. Show Social Icons – Display social media icons that allow readers to share the blog post.
10. Section Spacing – Adjust the top and bottom spacing of the blog post section.

How to Create a Blog Post

To display content on the blog page, you first need to create blog posts from the Shopify admin panel.

1. Go to your Shopify Admin.
2. Click Content from the left sidebar.
3. Select Blog Posts.
4. Click the Add Blog Post button.
5. Enter the Title of the blog post.
6. Add the Article Content using the editor.
7. Upload a Featured Image for the article.
8. Add Tags if needed for better categorization.
9. Choose the blog category and click Save or Publish.

After publishing the article, it will automatically appear on the blog page using the layout defined by the blog template settings.

A well-designed homepage captures attention, builds trust with visitors, and smoothly guides shoppers to the products or information they need. It reflects your brand identity, highlights key offerings, and helps turn visitors into customers. The homepage generally includes the following sections:

Header & Hero Banner Section

Collection list Section

Horizontal Scroller Section

Featured collection Section

Countdown Timer Section

Before And After Section

Product Step Section

Collection Tab Section

Featured Product Section

Image With Text Section

The Hero Banner section helps you create a visually appealing full-width banner for your store. It supports background images or videos, overlay customization, scrolling text, and call-to-action buttons. This section is ideal for highlighting key messages, promotions, or branding elements on your homepage.

Color Scheme: Allows you to select a predefined theme color scheme for the hero banner content to match your store design.

Section Overlay: Enables an overlay layer on top of the banner to improve text visibility and enhance visual appearance.

Show Background Media: Lets you enable or disable the display of background images or videos in the hero banner.

Overlay Color: Defines the color applied over the background image or video for better contrast.

Overlay Opacity: Controls the transparency level of the overlay color, allowing you to adjust its intensity.

Banner Height: Sets the height of the hero banner. Selecting full screen makes it occupy the entire viewport height.

Scroll Heading: Adds a moving text animation across the banner to highlight key messages.

Scroll Direction: Determines the direction of the scrolling text, such as right to left.

Transparent Banner Image: Allows you to add a foreground image that appears above the background for a layered visual effect.

Content Max Width: Controls the maximum width of the content area within the hero banner.

Heading: Lets you add the main title text displayed on the banner.

Heading Size: Defines the size of the heading, typically ranging from H1 to H6.

Text: Adds supporting description or subtext below the main heading.

Enable Explore More: Activates a button that scrolls to the next section or acts as a call-to-action.

Button Label: Specifies the text displayed on the call-to-action button.

Button Style: Allows you to choose between primary and secondary button styles.

Content Alignment: Sets the position of the banner content, such as bottom center.

Top Spacing: Adjusts the space above the hero banner section.

Bottom Spacing: Adjusts the space below the hero banner section.

The Collection List section allows you to showcase multiple product collections in a visually appealing layout. It helps users quickly explore different categories such as skincare, makeup, or new arrivals, improving navigation and product discovery.

Color Scheme: Allows you to choose a predefined color scheme to match the overall theme of your store.

Container Width: Sets the layout width of the section, such as full width or boxed.

Heading: Adds a title to the collection list section.

Heading Size: Controls the size of the heading text.

Text Style: Allows you to transform the heading text style, such as uppercase.

Text: Adds a description below the heading to provide more context about the collections.

Heading Alignment: Controls the alignment of the heading and text (left, center, or right).

Content Max Width: Defines the maximum width of the text content area.

Number of Columns per Row: Sets how many collection items are displayed in a single row.

Aspect Ratio: Controls the shape of collection images (e.g., square).

Inverse Step Slides: Adjusts the visual order/layout style of collection cards.

Top Spacing: Adds space above the section.

Bottom Spacing: Adds space below the section.

Collection Block: Each block represents an individual collection item displayed in the section.

Select Collection: Allows you to choose a collection to display. The selected collection provides default data like image and title.

Image: Lets you upload a custom image for the collection card. If selected, this image overrides the default collection image.

Title: Allows you to enter a custom title for the collection. This overrides the default collection title.

Fallback Behavior: If both custom image and custom title are not provided, the section will automatically use the default collection image and title.

The Horizontal Scroller section allows you to display short text content in a scrolling (marquee-style) layout. It is ideal for highlighting key messages such as promotions, brand statements, or important announcements in a visually engaging way.

Color Scheme: Allows you to select a predefined color style that matches your store’s branding.

Section Width: Defines whether the section is displayed in full width or within a contained layout.

Enable Marquee: Toggles the scrolling animation effect for the text. When disabled, the text remains static.

Marquee Speed: Controls how fast the text scrolls across the screen.

Marquee Direction: Sets the scrolling direction of the text (left or right).

Text Size: Adjusts the size of the text (e.g., H1, H2, H3).

Text Style: Allows you to modify the appearance of the text, such as uppercase formatting.

Top Spacing: Adds space above the section to control layout separation.

Bottom Spacing: Adds space below the section for better visual balance.

Text Block: Each block represents a single message displayed inside the horizontal scroller.

Text: Allows you to enter the content that will appear in the scrolling area.

Show Image: Enables or disables an optional icon/image alongside the text.

Select Image: Lets you upload or choose an image to display next to the text for better visual emphasis.

Fallback Behavior: If no image is selected, only the text will be displayed in the scroller.

The Featured Collection section allows you to showcase selected products in a clean and visually appealing grid layout. It is ideal for highlighting trending products, new arrivals, or curated collections to attract customer attention and drive conversions.

Color Scheme: Lets you choose a predefined color style that aligns with your store’s overall branding.

Heading: Allows you to set the title of the section (e.g., “Trending Products”).

Heading Size: Controls the size of the heading (H1–H6) to match your design hierarchy.

Text Style: Enables styling options like uppercase to enhance visual appearance.

Content: Add a short description below the heading to provide context about the products.

Content Max Width: Defines the maximum width of the content area for better readability.

Content Alignment: Adjusts alignment of text (left, center, or right).

Select Collection: Choose which product collection will be displayed in this section.

Number of Columns: Controls how many products are displayed per row.

Number of Products: Sets how many products to show in the section.

Enable Slider: Turns the product grid into a slider for better interaction on smaller screens.

Show Arrows: Displays navigation arrows when the slider is enabled.

Aspect Ratio: Defines the shape of product images (square, portrait, etc.).

Image Size: Controls how the product image fits within its container (cover or contain).

Text Alignment: Adjusts alignment of product titles and prices.

Show Image Background: Enables a background behind product images for better contrast.

Image Background Color: Allows customization of the background color behind product images.

Show Variant Option: Displays available product variants like size or color.

Show Quick View: Enables a quick preview option for products without leaving the page.

Secondary Image on Hover: Shows an alternate product image when hovered.

Top Spacing: Adds space above the section for layout control.

Bottom Spacing: Adds space below the section to maintain proper visual balance.

The Countdown Timer section is designed to create urgency and boost conversions by displaying time-sensitive offers. It combines a visually engaging banner with a live countdown and interactive product hotspots, making it ideal for promotions, limited-time deals, and special campaigns.

Color Scheme: Select a predefined color style that matches your store’s branding.

Section Width: Choose between full width or container width layout.

Section Border Radius: Controls the roundness of the section corners.

Background Image Height: Adjusts the height of the background image (auto/adapt/custom).

Heading: Set the main promotional heading text.

Heading Size: Define the size of the heading (H1–H6).

Content Max Width: Controls the width of the text content area.

Content Alignment: Align content left, center, or right.

Text Style: Apply styles like uppercase for better visual emphasis.

Countdown Date: Set the target date and time for the countdown timer.

Button Label: Customize the call-to-action button text (e.g., “Explore Offers”).

Button Link: Assign a link to redirect users when the button is clicked.

Open in New Tab: Option to open the link in a new browser tab.

Button Style: Choose between primary or secondary button styles.

Top Spacing: Adds space above the section.

Bottom Spacing: Adds space below the section.

Block (Hotspot Product): Each block represents a product hotspot displayed on the image. These hotspots allow users to interact with specific products directly from the banner.

Image: Upload the main product or visual image used in the hotspot.

Color Image: Add an additional image (e.g., texture or color swatch) for visual variation.

Color Picker: Select a color associated with the product (useful for variants like shades).

Select Product: Link a product to the hotspot for quick access.

Horizontal Position: Adjust the horizontal placement of the hotspot on the image.

Vertical Position: Adjust the vertical placement of the hotspot.

Multiple Blocks: You can add multiple hotspot blocks to highlight different products within the same section.

The Before and After section is designed to visually showcase product effectiveness by comparing two images side by side. It is ideal for beauty, skincare, fitness, and transformation-based products, helping build trust and improve conversions through real visual results.

Color Scheme: Choose a predefined color scheme that aligns with your store branding.

Heading: Set the main title for the section (e.g., “Our Makeup Bootcamp”).

Heading Size: Select the heading size from H1 to H6.

Content: Add descriptive text to explain the transformation or product benefits.

Content Max Width: Control the maximum width of the text content area.

Content Position: Align the content to the left or right side of the section.

Text Style: Apply styling such as uppercase for enhanced readability and emphasis.

Top Spacing: Adjust the space above the section.

Bottom Spacing: Adjust the space below the section.

Block (Image Comparison): Each block represents a before-and-after comparison set. You can add multiple blocks to showcase different transformations or products.

Tab Title: Add a label for the block (e.g., Foundation, Lipstick, Serum) to organize multiple comparisons.

Image Card Background: Select a background color for the image container.

Before Image: Upload the image representing the “before” state.

Before Title: Customize the label for the before image (e.g., “Before”).

After Image: Upload the image representing the “after” result.

After Title: Customize the label for the after image (e.g., “After”).

Select Preview Image: Choose an image that represents the selected tab or variation.

Select Product Image: Add a product image to visually connect the transformation with the product.

Multiple Blocks: Add multiple comparison blocks to highlight different products or results within the same section.

The Product Steps section allows you to showcase a step-by-step routine with interactive visuals and linked products. This section is ideal for beauty, skincare, and guided product usage experiences.

Color Scheme: Select a predefined color scheme for the section.

Section Border Radius: Adjust the corner roundness of the section container.

Heading: Add a title such as “How to Apply” or “Customer Favorites”.

Heading Size: Choose heading size from H1 to H6.

Content: Add a short description to introduce the section.

Header Content Width: Control the maximum width of heading and description (e.g., 600px).

Header Alignment: Align the header content (Left, Center, Right).

Text Style: Apply styles such as uppercase formatting.

Product Card Settings

Aspect Ratio: Set product image ratio (e.g., Square).

Image Size: Choose how images fit (Cover or Contain).

Text Alignment: Align product card text (Left, Center, Right).

Show Image Background: Enable or disable background behind product images.

Image Background Color: Select background color for product images.

Show Variant Option: Display product variant options if available.

Show Quick View: Enable quick view popup for products.

Secondary Image on Hover: Show alternate product image on hover.

Banner Settings

Heading Color: Set the text color for banner heading.

Button Background Color: Choose button background color.

Button Text Color: Set button text color.

Button Active Color: Define button background color on hover/active state.

Button Active Text Color: Set text color for active button state.

Banner Text Alignment: Align content inside the banner (Left, Center, Right).

Top Spacing: Adjust space above the section.

Bottom Spacing: Adjust space below the section.

Each Step Block represents an individual step in the routine.

Select Image: Upload a lifestyle image for the step.

Select Product: Choose a product to display alongside the step.

Title: Add a step title such as “How to Apply”.

Short Text: Add a short label (e.g., product name).

Apply Content: Provide a detailed explanation of the step.

Step Navigation: Steps are automatically numbered for easy navigation.

Multiple Steps: Add multiple blocks to create a complete routine.

The Collection Tab section allows you to display multiple collections in a tabbed layout, helping customers easily switch between categories and explore products without leaving the page. This is ideal for showcasing featured categories like Face Care, New Arrivals, or Lipstick.

Color Scheme: Choose a color scheme that matches your store branding.

Card Background Color: Set the background color for product cards.

Heading: Add a section title such as “Shop Our Selection”.

Heading Size: Select heading size from H1 to H6.

Content: Add a short description to introduce the collections.

Content Max Width: Control the width of the heading and description (e.g., 500px).

Content Alignment: Align the content (Left, Center, Right).

Text Style: Apply styles such as uppercase formatting.

Aspect Ratio: Set the product image ratio (e.g., Square).

Image Size: Choose how images fit inside the card (Cover or Contain).

Text Alignment: Align product details (Left, Center, Right).

Show Image Background: Enable or disable background behind product images.

Image Background Color: Select a background color for product images.

Show Variant Option: Display product variants if available.

Show Quick View: Enable quick view popup for products.

Secondary Image on Hover: Show alternate product image on hover.

Number of Products to Show: Control how many products are displayed per tab.

Columns per Row: Set number of product columns (e.g., 4 columns).

Enable Slider: Turn on slider mode for horizontal scrolling.

Show Arrows: Display navigation arrows when slider is enabled.

Top Spacing: Adjust space above the section.

Bottom Spacing: Adjust space below the section.

Each Collection Block represents a tab in the section.

Collection: Select a collection to display products from.

Select Video: Upload or choose a video thumbnail for the collection tab.

Select Image: Upload a custom image if no collection image is available.

Custom Collection Title: Override the default collection name if needed.

Dynamic Tabs: Tabs automatically update based on added collection blocks.

Multiple Collections: Add multiple blocks to showcase different categories in tabs.

The Featured Product section allows you to highlight a specific product directly on your homepage or any other page. This section helps increase product visibility, drive conversions, and provide customers with quick access to purchase without navigating to the product page.

Color Scheme: Choose a color scheme that matches your store branding.

Section Border Radius: Adjust the corner roundness of the section container for a softer or sharper look.

Product: Select the product you want to feature in this section.

Gallery Position: Set the product image gallery to appear on the left or right side.

Media Size: Choose how the product images are displayed (Contain or Cover).

Padding Top: Adjust the spacing above the section.

Padding Bottom: Adjust the spacing below the section.

Custom CSS: Add custom styles to further personalize the section design.

Available Blocks

The Featured Product section includes multiple blocks that allow you to control and organize product information. You can add, remove, and rearrange these blocks based on your requirements.

Tag: Displays product tags or custom labels such as “New”, “Sale”, or “Best Seller” to attract attention.

Title: Shows the product name. This is usually the main heading of the product section.

Description: Displays a short product description to inform customers about key features or benefits.

Price: Shows the product price, including any discounts or compare-at pricing.

Variant Selector: Allows customers to select product variants such as size, color, or style.You can also change the variant selector style.

Quantity Selector: Lets customers choose the number of items they want to purchase.

Add to Cart Buttons: Displays buttons like “Add to Cart” and “Buy Now” for quick purchasing actions.

Separator: Adds spacing or a visual divider between blocks for better layout structure.

Vendor: Displays the product brand or vendor name.

SKU: Shows the product SKU (Stock Keeping Unit) for inventory or identification purposes.

Size Chart: Provides a size guide to help customers choose the correct variant, improving purchase confidence and reducing returns.

Flexible Layout: You can reorder blocks by dragging them, allowing you to create a layout that best fits your product presentation.

The Image With Text section is a bold, eye-catching element that lets you combine stunning visuals with compelling messaging. It includes flexible block types like Image, Heading, Subheading, Content, and Button to effectively present information.

Color Scheme: Choose a color scheme that aligns with your brand identity.

Section Border Radius: Adjust the roundness of the section container corners.

Content Alignment: Align the text content to the left, center, or right.

Content Container: Adjust the width percentage of the content container relative to the section layout.

Section Spacing: Control the top and bottom padding of the overall section.

Available Blocks

Image Block: Upload the main image to be featured in the section.

Heading Block: Add the primary title for the section. You can customize the heading text, heading size, and text style (e.g., uppercase).

Subheading Block: Add a subtitle that appears with the main heading. You can customize the text style.

Content Block: Provide a detailed description using the rich text editor to give context to your image.

Button Block: Add a call-to-action button. You can customize the button label, link, toggle whether it opens in a new tab, and configure the button style (primary or secondary).

The Image Gallery section allows you to showcase multiple images in a visually appealing layout. It is perfect for highlighting team members, products, portfolios, or brand visuals with optional text and social links.

Color Scheme: Choose a color scheme that aligns with your brand identity.

Section Border Radius: Adjust the roundness of the section container corners.

Card Background Color: Set the background color for individual image cards.

Heading: Add a title for the section (e.g., “Makeup Artists”).

Heading Size: Select the heading size (H1–H6).

Content: Add a short description to introduce the gallery.

Content Max Width: Control the maximum width of the content area.

Content Alignment: Align the content to left, center, or right.

Text Style: Transform text style (e.g., uppercase, lowercase, capitalize).

Card Alignment: Align content inside each image card.

Image Aspect Ratio: Choose the image ratio such as portrait or square.

Object Fit: Set how images fit inside the container (cover or contain).

Show Social Icons: Enable to display social media links on each image card.

Enable Slider: Turn on to display images in a slider format.

Top Spacing: Adjust spacing above the section.

Bottom Spacing: Adjust spacing below the section.

Custom CSS: Add custom styles for advanced design control.

The Image Gallery section is built using image blocks. You can add multiple images and customize each one individually.

Image Block: Each block represents a single gallery item.

Image: Upload the image to display in the gallery.

Artist Name: Add a title or name for the image (e.g., team member name).

About Artist: Provide a short description or additional details.

Social Links: Add social media links such as Facebook, Instagram, YouTube, Twitter, and Pinterest.

Flexible Layout: You can reorder image blocks by dragging them to create a customized gallery layout that fits your design needs.

The Feature highlights section helps you highlight key features, benefits, or unique selling points of your product in a structured and visually engaging way. It is ideal for showcasing detailed product information alongside an image.

Color Scheme: Select a color scheme that matches your store branding.

Section Border Radius: Adjust the corner roundness of the section container.

Image: Upload the main product image displayed in the section.

Aspect Ratio: Choose the image ratio (e.g., portrait).

Image Size: Select how the image fits (cover or contain).

Heading: Add a main section title.

Description: Provide a short introduction or summary for the section.

Heading Size: Choose the heading size (H1–H6).

Text Style: Apply text transformation such as uppercase, lowercase, or capitalize.

Heading Alignment: Align the heading to left, center, or right.

Header Max Width: Control the maximum width of the heading area.

Left Block Alignment: Set alignment for left-side content blocks.

Right Block Alignment: Set alignment for right-side content blocks.

Show Count: Enable to display numbering for each insight item.

Top Spacing: Adjust spacing above the section.

Bottom Spacing: Adjust spacing below the section.

Available Blocks

The Feature highlights section includes two types of blocks: Left Block Item and Right Block Item. These blocks allow you to organize content on both sides of the central image.

Left Block Item: Displays content on the left side of the image.

Title: Enter the heading for the insight item.

Content: Add descriptive text explaining the feature or benefit.

Right Block Item: Displays content on the right side of the image.

Title: Enter the heading for the insight item.

Content: Add descriptive text explaining the feature or benefit.

Flexible Layout: You can add, remove, and reorder both left and right blocks to create a balanced and visually appealing layout based on your content needs.

The Trending Collection section allows you to showcase multiple product collections in an interactive and visually appealing slider layout. It is perfect for highlighting popular, featured, or seasonal collections on your homepage.

Color Scheme: Choose a color scheme that matches your store’s branding.

Section Border Radius: Adjust the roundness of the section container corners.

Heading: Add a title for the section to introduce your collections.

Heading Size: Select the heading size (H1–H6) based on your design preference.

Content: Add a short description to provide context or highlight your collections.

Content Max Width: Control the maximum width of the content area.

Content Alignment: Align the text to left, center, or right.

Text Style: Apply text transformations such as uppercase, lowercase, or capitalize.

Aspect Ratio: Choose the image ratio for collection images (e.g., square).

Image Size: Select how images are displayed (cover or contain).

Heading Size (Collection): Adjust the size of the collection title displayed on each item.

Top Spacing: Adjust the space above the section.

Bottom Spacing: Adjust the space below the section.

Collection Block: The Trending Collection section allows you to add multiple collection blocks. Each block represents a single collection item displayed in the slider.

Collection: Select a Shopify collection to display.

Image: Upload or select a custom image for the collection. Using a transparent image is recommended for better design results.

Title: Enter a custom title for the collection (optional).

Remove Block: Remove the selected collection block if not needed.

Flexible Usage: You can add, remove, and reorder collection blocks to control how collections appear in the slider. This allows you to highlight specific categories based on trends, promotions, or seasons.

The Testimonial section allows you to showcase customer feedback in a clean and engaging layout. It helps build trust by highlighting real experiences and reviews from your customers.

Color Scheme: Select a color scheme that aligns with your store branding.

Section Border Radius: Adjust the roundness of the testimonial container.

Heading: Add a title for the testimonial section (e.g., Customer Insights).

Heading Size: Choose the heading size (H1–H6).

Heading Alignment: Align the heading to left, center, or right.

Text Style: Apply text transformation such as uppercase, lowercase, or capitalize.

Content: Add a short description to introduce the testimonials.

Padding Top: Adjust the spacing above the section.

Padding Bottom: Adjust the spacing below the section.

Testimonial Block: The Testimonial section includes a Testimonial block that allows you to add individual customer reviews. You can add multiple testimonial blocks to display a slider or list of feedback.

Image: Upload a customer image or avatar to visually represent the reviewer.

Content: Add the customer’s feedback or review text.

Author Name: Enter the name of the customer.

Author Designation: Add additional details such as the customer’s role, location, or title.

Flexible Usage: You can add, remove, and reorder testimonial blocks to control how reviews are displayed. This helps you highlight your best customer feedback effectively.

The Shop the Look section allows you to showcase products interactively using hotspot markers on an image. This section helps customers easily explore and shop products directly from a styled visual layout.

Color Scheme: Choose a color scheme that matches your store branding.

Section Border Radius: Adjust the roundness of the section container for a softer or sharper look.

Hotspot Banner Image: Upload the main image where hotspot products will be displayed.

Banner Aspect Ratio: Set how the banner image scales (e.g., adapt to image).

Product Card Aspect Ratio: Choose the shape of product cards (e.g., square).

Image Size: Select how product images fit within cards (cover or contain).

Text Alignment: Align product text to left, center, or right.

Show Image Background: Enable or disable background behind product images.

Image Background Color: Choose a background color for product images if enabled.

Show Quick View: Enable quick view option for products.

Show Description: Toggle product description visibility in product cards.

Top Spacing: Adjust the spacing above the section.

Bottom Spacing: Adjust the spacing below the section.

Hotspot Product Block: The Shop the Look section includes Hotspot Product blocks that allow you to place clickable markers on the image. Each hotspot represents a product and can be positioned precisely.

Select Product: Choose the product you want to display in the hotspot.

Horizontal Position: Adjust the horizontal placement of the hotspot on the image.

Vertical Position: Adjust the vertical placement of the hotspot on the image.

Flexible Usage: You can add multiple hotspot products, reposition them, or remove them as needed. This flexibility allows you to create engaging, shoppable visuals that highlight multiple products in a single image.

The Featured Blog section allows you to display recent or selected blog posts from your store. It helps you engage customers by sharing articles, beauty tips, guides, or news in a visually appealing layout.

Color Scheme: Select a color scheme that matches your store branding.

Section Border Radius: Adjust the roundness of the section container.

Heading: Enter a title for the section (e.g., Blog Insights).

Heading Size: Choose the heading size (H1–H6).

Header Alignment: Align the heading to left, center, or right.

Content Max Width: Control the maximum width of the section content.

Text Style: Apply text transformation such as uppercase, lowercase, or capitalize.

Content: Add a short description to introduce your blog section.

Select Video: Upload or select a video to display alongside blog posts.

Select Image: Upload an image if you prefer to display a static visual instead of a video.

Aspect Ratio: Choose how the media (image/video) is displayed (e.g., adapt to image).

Select Blog: Choose which blog to display posts from.

Blog Layout Alignment: Align blog content to left, center, or right.

Post Aspect Ratio: Set the shape of blog post images (e.g., square).

Image Size: Control how images fit within blog cards (cover or contain).

Number of Posts to Show: Select how many blog posts will be displayed in the section.

Show Author: Enable to display the author name for each post.

Show Date: Enable to display the publishing date.

Show Content: Toggle to show a short excerpt from the blog post.

Show Tags: Enable to display blog tags.

Top Spacing: Adjust the spacing above the section.

Bottom Spacing: Adjust the spacing below the section.

Flexible Usage: This section automatically pulls blog posts based on your selection. You can control layout, visibility, and content display options to match your store design and storytelling needs.

The Logo List section allows you to showcase brand logos, partners, or affiliations in a clean and visually appealing layout. It is ideal for building trust by displaying well-known brands or collaborators associated with your store.

Color Scheme: Select a color scheme that matches your store design and branding.

Heading: Add a title for the section (e.g., “Our Partners”).

Heading Size: Choose the size of the heading text.

Content: Add a short description to provide context about the logos or partners displayed.

Heading Max Width: Control the maximum width of the heading area for better readability.

Heading Alignment: Align the heading text to left, center, or right.

Heading Position: Adjust the placement of the heading relative to the logo list.

Text Style: Customize the heading style (e.g., uppercase).

Marquee Settings: Enable scrolling animation for logos to create a dynamic effect.

Left Marquee Direction: Set the scrolling direction for logos moving from left to right.

Right Marquee Direction: Set the scrolling direction for logos moving from right to left.

Marquee Speed: Adjust the speed of the scrolling animation.

Top Spacing: Control the spacing above the section.

Bottom Spacing: Control the spacing below the section.

Logo Blocks: The Logo List section includes image blocks that allow you to upload and display multiple logos.

Left Image Block: Upload logos that will appear in the left scrolling group.

Right Image Block: Upload logos that will appear in the right scrolling group.

Flexible Usage: You can add, remove, or reorder logo blocks as needed. This flexibility allows you to highlight key partners and create a strong visual brand presence.

The Instafeed section allows you to display Instagram-style images in a modern and engaging layout. It helps showcase your brand’s social presence and encourages users to connect with your store on Instagram.

Color Scheme: Choose a color scheme that matches your store branding.

Section Border Radius: Adjust the roundness of the section corners for a modern look.

Section Width: Select between full width or container width layout.

Heading: Add a title for the section (e.g., “Join our Instagram family”).

Heading Size: Control the size of the heading text.

Content: Add a short description to engage users and describe your Instagram presence.

Content Max Width: Adjust the width of the content area for better readability.

Content Alignment: Align the text to left, center, or right.

Text Style: Customize the text style (e.g., uppercase).

Image Aspect Ratio: Choose between square or portrait image formats.

Object Fit: Set how images fit within their containers (cover or contain).

Number of Columns: Define how many images appear in a row.

Inverse Step Slides: Enable or disable reverse sliding animation effect.

Top Spacing: Adjust spacing above the section.

Bottom Spacing: Adjust spacing below the section.

Feed Blocks: The Instafeed section includes multiple image blocks where you can add Instagram images.

Select Image: Upload or choose an image to display in the feed.

URL: Add a link to your Instagram post or profile.

Open in New Tab: Enable this option to open links in a new browser tab.

Flexible Usage: You can add, remove, or reorder feed blocks to create a visually appealing Instagram gallery. This helps increase engagement and build trust with your audience.

The Multicolumn section allows you to display multiple content blocks in a structured column layout. It is ideal for highlighting key features, services, or store benefits such as product quality, delivery, and brand values.

Color Scheme: Choose a color scheme that aligns with your store branding.

Section Border Radius: Adjust the roundness of the section corners for a softer or sharper look.

Content Alignment: Set the alignment of the content inside each column (left, center, or right).

Heading Size: Select the size of the column headings (H2–H6).

Columns per Row: Control how many columns are displayed in a single row.

Top Spacing: Adjust the spacing above the section.

Bottom Spacing: Adjust the spacing below the section.

Custom CSS: Add custom styles to further personalize the section appearance.

Column Blocks: Each column represents a block where you can add an image, heading, and descriptive text.

Show Image: Enable or disable the image display for the column.

Select Image: Upload or choose an image to visually represent the column content.

Heading: Add a title for the column (e.g., “Clean Skincare”, “Fast Delivery”).

Text: Provide a short description to explain the feature or benefit.

Flexible Usage: You can add, remove, and reorder columns to fit your content needs. This makes the Multicolumn section perfect for showcasing store highlights in a clean and organized way.