# Introduction
**Ascent** is a modern Shopify theme meticulously designed by [Webvista Studio](https://www.webvista.studio), aimed at providing exceptional design and functionality support for online stores. This theme combines contemporary design concepts with powerful features, striving to help merchants **improve sales performance** and **achieve customer success**. Ascent is particularly suitable for the **sporting** goods, **apparel**, and **digital** product industries, while also offering high flexibility to meet the needs of various other industries.
### Try Ascent for free
{% embed url="" %}
### Demonstration stores
### **Key Features of the Ascent Theme**
1. **Modern Design**: Keeps up with the latest design trends, offering a visually stunning experience to attract professional and discerning users.
2. **Performance Optimization**: Utilizes high-performance code and speed optimizations to ensure smooth user experiences, enhance search engine rankings, and boost conversions.
3. **Rich Customization Options**: Provides various options for styles, layouts, and content, supporting deep customization to meet individual brand needs.
4. **Sales-Driven**: Includes multiple sales tools to drive product promotions and help merchants increase conversion rates.
5. **Industry-Specific Features**: Especially tailored for the sporting goods, apparel, and digital product industries, while also being flexible enough for other online business needs.
6. **Multi-Language and Multi-Currency Support**: Easily serves global markets by meeting the needs of customers from different regions.
7. **Responsive Design**: Seamlessly adapts to desktop and mobile devices, offering a consistent shopping experience across all platforms.
8. **SEO-Friendly**: Comes with built-in SEO optimizations to help stores rank higher in search engine results and increase brand visibility.
SEO-Friendly
9. **Integration with Third-Party Apps**: Integrates smoothly with Shopify apps and third-party services, making it easier to expand store functionality.
10. **Easy to Use**: Even if you're not a professional designer or your images aren't top-notch, you can still create a high-quality website effortlessly.
### Support
We're here to assist you! Whether you have questions, need guidance, or encounter any issues, our support team is ready to help.
{% content-ref url="/pages/ZxCcLzdRbcY41o9jy813" %}
[Support Policy](/support-policy)
{% endcontent-ref %}
{% hint style="success" %}
The design and features of Ascent are intended to help you effortlessly create a **professional**, **appealing**, and efficient online store, allowing you to stand out in the competitive e-commerce market.
{% endhint %}
### Quick Link
# Support Policy
Thank you for choosing our theme. To ensure a smooth experience, we provide a range of support services. Below is a detailed explanation of our support policy.
{% embed url="" %}
### Free services included
1. **Bug Fixes**\
We will promptly fix any bugs encountered while using the theme, ensuring your store functions correctly.
2. **Ongoing Support During Use**\
Throughout your use of the theme, we provide support to answer any questions related to the theme, helping you get started quickly and resolve any issues to ensure smooth store operation.
### **Paid services**
For the following requests, we offer paid support services:
1. **Custom Functionality**\
If you need additional features or design adjustments that are not included in the default theme, we offer custom development services. These services are charged separately.
2. **Non-Bug Code Modifications**\
If you wish to modify the existing code outside of bug fixes, such as optimizations or functionality changes, we provide professional code modification services. The cost will depend on the scope of the changes.
3. **Store Setup and Design**\
We offer store setup services to help enhance the visual design and user experience of your store, creating a look that aligns with your vision.
4. **App Integration**\
We can assist with integrating Shopify apps or third-party applications into your store to ensure compatibility with your theme and meet your business needs.
### **How to contact us**
You can reach out to us through:
* [Clicking this link to contact us](https://webvista.studio/contact)
* Sending an email to our support team at: [**support@webvista.studio**](mailto:support@webvista.studio)
# Refund Policy
Thank you for your interest in and support of our theme templates! Before making a purchase, we encourage you to carefully review the theme demo, feature descriptions, and documentation to ensure it meets your needs.
As per Shopify’s Terms of Service and our policy, **all theme template sales are final**, and **refunds are not available**. This is due to the copyright licensing and the nature of digital products.
We are committed to ensuring your satisfaction. If you encounter any issues or need assistance, please feel free to reach out to our support team. We will do our best to provide technical support and guidance to help you use the theme successfully.
Thank you for your understanding and support!
### **Contact Us:**
If you have any questions or need assistance, please contact our support team:
* **Email**:
* **Support Hours**: Monday to Friday, 9:00 AM - 6:00 PM （HK TIME）
# Template Installation
### **Template Download Link**
{% embed url="" %}
### **Installation Steps**
{% stepper %}
{% step %}
**Log in to Shopify Admin**
Visit the Shopify login page and enter your account information to log in.
{% endstep %}
{% step %}
**Access the Shopify Theme Store**
In the admin navigation bar, click “Online Store” > “Themes,” then click “Visit Theme Store.”
{% endstep %}
{% step %}
**Search for and Install the Ascent Theme**
In the theme store search bar, enter “Ascent,” find the theme, and click “Add Theme.”
{% endstep %}
{% step %}
**Customize and Preview**
Click “Customize,” set up colors, layouts, etc., as needed, and preview the results after saving.
{% endstep %}
{% step %}
**Publish the Ascent Theme**
Go back to the “Online Store” > “Themes” page in the admin, find the Ascent theme, and click “Publish.”
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
You need to complete the theme purchase before you can publish it for customers to use.
{% endhint %}
### **Technical Support**
{% content-ref url="/pages/ZxCcLzdRbcY41o9jy813" %}
[Support Policy](/support-policy)
{% endcontent-ref %}
If you encounter any issues, please contact Webvista Studio Technical Support or visit the Shopify Help Center.
# FAQs
### General
How to disable the mosaic animation effect when loading images
To disable the lazy-loading effect for images, simply turn off **Enable Image Lazy Loading** in the **Animations** section of **Theme settings**.
[Animations](/global-settings/animations)
Does the Ascent theme support custom badges?
We provide badges for **Sold Out**, **Sale**, **Pre-order**, **New Arrival**, **Gift**, and **Limited Edition**. You can customize the badge text by modifying the **theme's default content**.
If you want to add other custom badges, please contact us, and our technical team will assist you.
[Support Policy](/support-policy)
How to change the background color of a page
You can control the background color, text color, and button color of the entire page by adjusting **Scheme 1** in the **Colors** settings under **Theme settings**.\
How to Add Custom Payment Icons
If you are using a third-party payment service (e.g., Airwallex), Shopify will not automatically display the payment method icons. You need to manually add these icons by modifying the code. Detailed steps can be found [Custom Payment Icons](/footer/custom-payment-icons)
How to Handle Third-Party Plugin Element Obstruction of Mobile Menus
We can resolve the obstruction of mobile menus by third-party plugin elements by increasing the menu's z-index level. [Mobile Menu Obstruction by Third-Party Plugins](/header/mobile-menu-obstruction-by-third-party-plugins)
Why the filter on the collection page is not working?
Shopify limits filtering when a collection contains more than **5,000 products**. We recommend splitting the large collection into smaller collections and distributing the products across them.
### Header
How to prevent dropdown menu links from redirecting to a new page
To disable link redirection for dropdown or Mega menus, you can set the link to "/" or select the homepage as the link.
How to Remove the Underline from a Transparent Header
You can find the "Hide bottom line" option under "Header" > "Transparent header settings." Simply uncheck it to remove the underline.
### Footer
How to remove the "Powered by Shopify" text in the footer
* **Log in to your Shopify Admin:** Use your admin account to log in to your Shopify Admin.
* **Go to Theme Settings:** In the sidebar menu, navigate to **Online Store > Themes**.
* **Access Theme Editor:** Under the **Current Theme** section, click **Actions > Edit default theme content**.
* **Search for "Powered by Shopify":** Use the search bar at the top to type **"Powered by Shopify"**, and locate the corresponding text field.
* **Delete the Text:** First, enter any content into the field and save it. Then, clear the text in the field and enter a single space instead; the "Powered by Shopify" logo will then be removed.
* **Save Changes:** Click the **Save** button in the upper-right corner to apply the changes.
### Product
How to display category metafield data on the product page
Turn on the **Show category metafield table** on the product template page, and the category metafield data will be displayed automatically.
How to display custom metafield data on the product page
Add a block: **Custom Attribute**, then select Dynamic Source for the content and choose the custom meta field to display.
How to display a product size chart using custom metafields
Add a **Popup** block, then set the content to either text or an image, select the **dynamic source**, and choose the created size chart metafield.
[Size Chart](/pages/main-product/size-chart)
How to display color samples and image samples for variants
To enhance the shopping experience, you can display color and image samples for product variants, allowing customers to visualize options more effectively.
For more details, please refer to [Variant Samples](/pages/main-product/variant-samples)
How to Add Complementary Products
Use the **Shopify Search & Discovery** app to add complementary products and enhance the customer shopping experience. For detailed steps, see [Complementary Products](/pages/main-product/complementary-products)
How to Display Related Products
Add a related products section to the product page to showcase related items. For details, see [Related Products](/pages/main-product/related-products)
How to Create a Product A+ Page
Create an Independent and Customizable Product Page.This page will be highly flexible, supporting personalized content layouts and responsive design. For further details, please refer to [Product A+ Page](/pages/main-product/product-a+-page)
How to Set Up Back-in-Stock Notifications?
You can create an automated workflow that sends a notification to subscribed customers when a product is restocked. Here’s how to set it up:
#### **Step 1: Install the Required Apps**
* **Shopify Flow** (for creating automation workflows)
* **Seguno Email Marketing** or **Klaviyo** (for sending email notifications)
#### **Step 2: Create a Flow Automation**
1. Go to **Shopify Admin > Apps > Flow**
2. Use the built-in Flow template by searching for **"Send a back in stock notification"**
3. Follow the setup instructions, including installing **Seguno Email Marketing**
4. In Seguno (or Klaviyo), create an email template for back-in-stock notifications
**If the solution above does not resolve your issue, please contact us.**
{% content-ref url="/pages/ZxCcLzdRbcY41o9jy813" %}
[Support Policy](/support-policy)
{% endcontent-ref %}
# Global Settings
# Layout
### Set Page Width
The page width can be set within the range of 1000px to 1600px.
### Setting Small Border Radius
This setting does not affect fully rounded elements, such as **certain buttons** and **search boxes**.
There are three options available: **small**, **medium**, and **large**. Adjusting this option allows you to create different styles. For example, pet product or children's websites can apply larger rounded corners to give the entire site a softer, more rounded appearance.
# Colors
### Global Color Scheme
The color setting feature allows you to create and apply multiple color schemes for your online store. These schemes help unify the overall visual style of your store and ensure color consistency across different pages or modules. By selecting and customizing color schemes, you can easily adjust the store's colors to match your brand image or specific marketing campaigns. For detailed usage, refer to [Shopify's color scheme guidelines](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme).
### Color Suggestions
* Maintain brand consistency.
* Ensure sufficient contrast between text and background.
* Set different schemes for different pages based on specific needs.
### Custom Colors
1. **Success Color**: This color represents successful operations or a normal status. For example, it is typically displayed after successfully submitting a form or completing a task.
2. **Error Color**: This color indicates a failed operation or error message. It is used to alert users to issues during operations or errors within the system.
3. **Warning Color**: This color prompts users to pay attention to or address certain matters. It is typically used to display notifications that may impact user experience or require user confirmation.
# Typography
In Shopify templates, the font settings allow you to choose and apply header fonts and body fonts for the entire store. By adjusting font styles, you can ensure that the store's visual appearance aligns with your brand image while enhancing content readability. For supported fonts, please refer to the Shopify documentation.
### **Usage Steps**
* **Access Font Settings**
* In the Shopify admin, navigate to the "Customize Theme" page.
* Open the template settings and expand the "Typography" section.
* **Set Header Font**
* In the "Header Font" section, click the "Change" button.
* Choose your preferred font from the font library and adjust the font style (e.g., bold, italic, etc.).
* Set the letter spacing for the header font, with options like Slightly Smaller, Normal, Slightly Larger, or Larger.
* Once selected, click "Save" to apply the changes.
* **Set Body Font**
* In the "Body Font" section, click the "Change" button.
* Select a font suitable for body text and adjust the style.
* Set the letter spacing for the body font, with options like Slightly Smaller, Normal, or Slightly Larger.
* After making your selection, click "Save" to apply the changes.
* **Font Optimization**
* Note that different fonts may affect your site's loading speed. It is recommended to choose faster-loading system fonts or optimized web fonts.
* If you have concerns about font performance, you can click the provided link for more information.
### **Suggestions**
* **Contrast and Harmony**: Ensure the header and body fonts contrast in style while maintaining harmony. A combination of sans-serif and serif fonts often works well.
* **Brand Alignment**: Choose font pairings that match your brand’s tone. For example, luxury brands may opt for classic serif fonts, while tech brands might prefer modern sans-serif fonts.
* **Readability**: Regardless of the font combination, ensure the body font is highly readable, especially on mobile devices.
### **Common Font Pairings**
1. **Playfair Display + Lato**
* **Header Font**: Playfair Display (an elegant serif font, ideal for high-end and fashion brands)
* **Body Font**: Lato (a modern, readable sans-serif font, perfect for long texts)
2. **Montserrat + Merriweather**
* **Header Font**: Montserrat (a stylish sans-serif font, great for modern stores)
* **Body Font**: Merriweather (a highly readable serif font, adding warmth to the text)
3. **Oswald + Open Sans**
* **Header Font**: Oswald (a clean, bold sans-serif font, ideal for large headlines)
* **Body Font**: Open Sans (a widely used sans-serif font, suitable for all types of stores)
4. **Raleway + Roboto**
* **Header Font**: Raleway (a refined sans-serif font, suitable for elegant and modern styles)
* **Body Font**: Roboto (a versatile sans-serif font with excellent readability)
5. **Bebas Neue + Source Sans Pro**
* **Header Font**: Bebas Neue (a bold sans-serif font, perfect for strong visual impact)
* **Body Font**: Source Sans Pro (a clean, functional sans-serif font, ideal for long reading)
6. **Muli + Georgia**
* **Header Font**: Muli (a lightweight sans-serif font, great for fresh, minimalist designs)
* **Body Font**: Georgia (a classic serif font that enhances readability and authority)
# Breadcrumb
### **What is Breadcrumb Navigation?**
Breadcrumb Navigation is a website navigation aid that typically appears at the top or near the top of a webpage, displaying the path from the homepage to the user’s current location in a hierarchical format. It is named after the breadcrumb trail in the story "Hansel and Gretel," where breadcrumbs were used to mark the path.
A typical breadcrumb navigation format looks like this:
`Home > Category > Subcategory > Current Page`
Each ">" (or slash) represents a hierarchical relationship, and users can click any level to return to the corresponding page.
### **Benefits of Enabling Breadcrumb Navigation**
* **Enhances User Experience:**
* Breadcrumb navigation helps users clearly understand their position within the site, especially on websites with multi-level structures. It allows users to quickly return to a higher-level or related page without repeatedly clicking the "Back" button.
* **Improves Website Usability**:
* For content-heavy or complex websites, breadcrumb navigation significantly boosts usability. It allows users to easily switch between different pages, improving navigation efficiency.
* **Reduces Bounce Rate**:
* When users land on a deep page via a search engine, breadcrumb navigation can guide them to explore other related pages, reducing the chances of them leaving the site immediately.
* **Supports SEO Optimization**:
* Breadcrumb navigation not only enhances user experience but also provides search engines with clear structural information. This helps search engines understand the website’s hierarchy, improving page indexing.
* **Minimizes User Confusion**:
* On websites with multi-level content, breadcrumb navigation helps prevent users from getting lost, especially when multiple steps or browsing levels are required.
# Animations
This setting allows you to enable animation effects and image lazy loading for sections as they enter the viewport. By using these features appropriately, you can enhance the page's visual appeal and improve loading performance.
### **Settings Description**
1. **Reveal Sections on Scroll**
When this option is enabled, sections on the page will automatically trigger and display preset animation effects as they enter the user’s viewport.
* **Purpose**: Enhances the page's dynamic presentation, attracts user attention, and improves interactivity and browsing fluidity.
* **Note**: Excessive use of animation effects may consume additional system resources, especially on pages with a lot of animations, which could affect loading performance.
2. **Enable Image Lazy Loading**
When this option is enabled, images on the page will only load when users scroll to their viewport area.
* **Purpose**: Optimizes page loading speed, reduces initial loading resource consumption, and is particularly useful for pages with many images.
* **Options**: Pixel (more 3C-oriented), Breath (more visually universal).
* **Note**: Images may experience slight loading delays as users scroll. It is recommended to plan the layout of critical visual areas carefully to avoid a negative impact on user experience.
### **Usage Recommendations**
* **Enhance User Experience**: Combine animation effects and image lazy loading effectively to create a visually appealing and smooth browsing experience.
* **Resource Management**: Balance the use of animations and lazy loading based on actual needs to prevent performance issues and ensure fast page loading.
* **Reduce Conflicts**: Avoid overusing animation effects and lazy loading on the same page to prevent performance bottlenecks or user confusion.
# Section header
This setting allows you to globally configure the style and layout of section titles to ensure their display aligns with your design needs and brand style.
### **Feature Details**
1. **Content Alignment**:
* You can select the alignment for titles on the desktop. The options include left, center, and right alignment, allowing you to adjust based on the page layout requirements.
* On mobile, titles will always remain center-aligned.
2. **Title Size**:
* Four size options are available: small, medium, large, and extra-large. Choose the appropriate title size based on the section's importance or desired visual impact to ensure the title stands out on the page.
3. **Title Uppercase**:
* Enabling this option will automatically convert the title text to uppercase, increasing visual emphasis. This is ideal for sections where you want the title to stand out.
4. **Bottom Line Display**:
* When enabled, a line will appear beneath the title, visually separating the title from the content, adding more structure and depth to the section.
5. **Button Arrow Display**:
* When enabled, an arrow icon will appear on buttons, helping users identify the button’s functionality and enhancing interactivity.
### **Usage Recommendations**
* **Visual Consistency**:Adjust section title alignment, size, and uppercase settings uniformly according to your brand’s design style to maintain visual consistency across the page.
* **Highlight Key Sections**:Use title size and uppercase settings to make important sections more noticeable on the page.
* **Enhance Readability**:Utilize bottom lines and button arrow icons to improve the user's ability to recognize and interact with section content.
# Product cards
This setting allows you to globally configure the display of product cards, ensuring that product presentation aligns with your brand style and enhances the user experience.
### **Basic Settings**
1. **Display Vendor**:
* Enabling this option will display the vendor name on the product card, helping users learn more about the product’s origin.
2. **Limit Title Length:**
* When this option is enabled, the card product title length is limited to 30 characters.
3. **Enable Quick Add Button**:
* When enabled, a quick add-to-cart button will appear on the product card, allowing users to directly add products to their cart, improving the shopping experience's convenience.
* You can set the add button icon with the following options:
* **Eye**
* **Cart**
* **Bag**
### **Product image settings**
1. Media fit：
* The available fill options are: Cover (stretched to fill the entire space) and Contain (maintains the original image ratio).
2. **Media Image Padding**:
* Use the slider to adjust the padding around the product images, controlling the white space to achieve optimal visual appeal.
3. **Media Image Background Opacity:**
* The background color of the media image matches the text color. This option allows you to adjust the background color's opacity, which is suitable for use when product images have transparent backgrounds.
4. **Hover to Display Second Image**:
* When enabled, hovering over a product image will display the second product image. This feature allows users to view a different angle or color of the product without leaving the current page.
5. **Image transition on hover**
* Supported options are **Fade** and **Push**.
### **Color/Image Sample Settings**
1. **Enable Color/Image Samples**:
* When enabled, the product card will display the first variant associated with the [color metafield](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields), providing users with a visual sample.\
2. **Variant Image Preview Type**:
* When enabled, the product card will show images for product variants, offering a preview of different options.\
* **Note**: Ensure that variant images are added for each variant in the product edit page.
### **Product Rating Settings**
1. **Display Product Ratings**:
* When enabled, product ratings will be shown on the product card, helping users make informed purchasing decisions.
* **Note**: The product rating feature requires the installation of a third-party review app, and the product must have customer reviews to display the rating. Recommended review apps include Alireview, Loox Review, and Judge.me. Ensure that these apps are properly installed and configured to display rating information on product cards.
2. **Star Size**:
* Set the size of the rating stars, with small, medium, and large options available to ensure the rating fits the page design.
3. **Display Rating Value**:
* When enabled, the numeric rating value will be displayed alongside the stars, providing users with more reference information about the product.
# Badges
Badge settings allow you to provide promotional, new product, free gift, and pre-order notifications for different scenarios on the product page. Using badges with different colors and styles can attract customer attention, enhance product visibility, and effectively boost sales.
### Badge Types
1. **Promotion Badge**\
Used to display promotional information. You can choose from a standard style, or styles that show the amount or percentage of the discount.
* **Background Color**: Customize the background color of the promotion badge.
* **Text Color**: Customize the text color of the promotion badge.
sale badge
2. **Free Gift Badge**\
Used to indicate information about free gifts. When enabled, this badge alerts customers that the product comes with a free gift.
* **Background Color**: Customize the background color of the free gift badge.
* **Text Color**: Customize the text color of the free gift badge.
free gift badge
3. **New Product Badge**\
Used to identify newly released products.
* **Background color:** Supports customizing the background color of the new arrival badge.
* **Text color:** Supports customizing the text color of the new arrival badge.
* **Criteria for determining new products:** There are two options: based on the **publish days** or based on **tag**.
* **Setting the new product badge:** It is effective when the criteria are based on **tag**.
* **Setting the number of days since release:** Available options are 7 days, 14 days, or 30 days, effective when the criteria are based on **publish days**.
new badge
4. **Pre-Order Badge**\
Used to display information about pre-order products. When enabled, the badge will appear and a pre-order button will also be displayed on the product page if the product meets pre-order conditions.
* **Background Color**: Customize the background color of the pre-order badge.
* **Text Color**: Customize the text color of the pre-order badge.
pre-order badge and button
5. #### Limited Edition Badge
Used to highlight and display limited edition products.
Set the limited edition product tag.
limited edition badge
6. **Custom Badges**
Custom badges can be added to products by assigning tags. You can set the background color and text color for the custom badge. The format should be \_badge\_name, for example, \_Best Shoes.
### Notes
* **Pre-Order Badge**: The badge and pre-order button will only appear if the product meets the pre-order conditions.
* **Color Customization**: Ensure good contrast between background and text colors for badge readability.
# Social media
This setting allows you to enable social media sharing functionality on your website and link your social media accounts to enhance interaction and sharing with users.
### **Social Sharing Settings**
**Social Media Sharing Options**:\
Users can share product pages to their social media accounts. Supported social media platforms include:
* Facebook
* Twitter
* Pinterest
* LinkedIn
### **My Social Media Settings:**
Display a list of your social media accounts in the footer, allowing users to quickly view your social media profiles. Supported social media platforms include:
* Facebook
* Instagram
* YouTube
* TikTok
* Twitter
* Snapchat
* Pinterest
* Tumblr
* Vimeo
* LinkedIn
* WhatsApp
* Reddit
# Search behavior
This setting allows you to customize the search functionality on your website to provide users with a more precise and convenient search experience.
### **Feature Details**
1. **Enable Search Suggestions**:
* When this option is enabled, the system will automatically provide relevant search suggestions as users type keywords into the search bar, helping them quickly find content or products they may be interested in.
2. **Popular Search Keywords**:
* In this field, you can set a list of popular search keywords. The system will use these keywords to provide search suggestions. These keywords are typically product categories or brands that users frequently search for, improving the relevance and efficiency of search results.
* **Input Format**: Use commas `(,)` to separate multiple keywords. For example: `T-shirts, Shoes, Bags, Accessories, Dresses, Jackets, Watches, Sunglasses, Hats, Scarves`.
### **Usage Recommendations**
* **Enhance User Experience**:\
Enabling search suggestions helps users find what they are looking for more quickly, increasing the usability and interactivity of the website.
* **Optimize Keyword Selection**:\
Regularly update popular search keywords based on user search habits and product popularity to ensure the effectiveness and accuracy of search suggestions.
* **Balance Keyword Quantity**:\
Choose a reasonable number of keywords to cover major product categories without overwhelming users with too many suggestions, which could negatively impact the search experience.
# Currency format
This setting allows you to control whether the currency code is displayed with prices on your website, ensuring that price displays meet user expectations and international standards.
### **Feature Details**
1. **Show Currency Code**:
* When this option is enabled, all prices displayed on the website (including on the cart and checkout pages) will include the corresponding currency code. For example, prices will be shown as $1.00 USD instead of just $1.00. This helps users clearly understand the currency of the pricing, especially when selling to international markets.
### **Usage Recommendations**
* **International Considerations**:\
For stores targeting multiple countries or regions, it is advisable to enable currency code display to avoid confusion caused by similar currency symbols. For example, both USD and CAD use the $ symbol, and displaying the currency code helps distinguish between them.
* **Consistency**:\
If you choose to enable the currency code, ensure it is consistently displayed across all areas involving prices, such as product detail pages, cart, and checkout pages, to provide a uniform user experience.
# Cart settings
This setting allows you to customize the display and functionality of the shopping cart to optimize the user shopping experience and provide relevant information and alerts.
### **Feature Details**
1. **Bubble Style**
You can set the display style of the cart bubble with the following options:
1. Cart
2. Bag
3. Border
4. Text
2. **Cart Type**:
* **Drawer**: Selecting this option will display the cart as a side drawer, allowing users to view and manage their cart items without leaving the current page.
* **Page**: Selecting this option will redirect users to a dedicated cart page when they click the cart icon, where they can manage cart contents on a separate page.
3. **Show Vendor**:
* Enabling this option will display the vendor name for each item in the cart, helping users identify the source of the products.
4. **Gift wrapping product:**
* Set a product as a gift wrap option for the cart page to increase additional order revenue.
5. **Enable Cart Notes**:
* Enabling this option allows users to add notes for each item on the cart page. This feature is useful for orders or items that require special instructions.
6. **Enable Shipping Estimate**:
* Enabling this option will add a shipping estimate tool on the cart page, allowing users to estimate shipping costs by entering their postal code. This helps users understand the total cost before checkout.
### **Free Shipping Progress Bar**:
1. **Enable Free Shipping Progress Bar**
* Enabling this option will show a progress bar on the cart page indicating how much more the user needs to spend to qualify for free shipping. This feature encourages users to increase their purchase amount to meet the free shipping threshold.
2. **Below Free Shipping Threshold**
* Set the text and background colors for the progress bar when the free shipping threshold has not been reached to ensure information is clear.
3. **Above Free Shipping Threshold**
* Set the text and background colors for the progress bar when the free shipping threshold has been met to highlight that the user qualifies for free shipping.
4. **Free Shipping Threshold**:
* Set minimum free shipping amount, **integer**.
5. **Enable Confetti Celebration Effect**:
* Enabling this option will trigger a confetti effect when the cart reaches the free shipping amount. This visual effect enhances the shopping experience, making users feel more accomplished and satisfied.
Free shipping progress bar
### **Usage Recommendations**
* **Enhance User Experience**:Enabling the drawer cart and shipping estimate features allows users to manage their cart without leaving their current page and understand shipping costs upfront, improving their shopping experience.
* **Encourage Spending**:The free shipping progress bar motivates users to increase their cart total to qualify for free shipping, encouraging higher spending.
# Favicon
This setting allows you to upload and set a Favicon (website icon) for your site, which will appear on the browser tab to help users quickly recognize and locate your website.
### **Feature Details**
1. **Website Icon Image**:
* By clicking the “Select Image” button, you can upload an image file from your local device to serve as your Favicon. It's recommended to use a square image with dimensions of **32 x 32 pixels** to ensure clear display across various browsers and devices.
* Alternatively, you can click the “Browse Free Images” button to select a suitable image from the provided library.
2. **Image Scaling**:
* The uploaded image will be automatically scaled to **32 x 32 pixels**, which is the standard size for Favicons, ensuring proper display across different browsers.
### **Usage Recommendations**
* **Clear Recognition**:\
Choose a simple and easily recognizable icon to ensure that users can quickly identify your site among multiple browser tabs.
* **Brand Consistency**:\
Since Favicons contribute to brand recognition, it’s advisable to use an image that aligns with your brand logo or color scheme, enhancing consistency and brand identity.
* **Image Format**:\
Recommended formats are **`.ico`**, **`.png`**, or **`.svg`**, as these formats are widely supported across different browsers.
# Custom CSS
This setting allows you to apply custom CSS styles to your entire online store, giving you finer control over the appearance and layout of the website.
### **Feature Details**
1. **Scope of Impact**:
* Custom CSS will affect all pages of your website. Ensure the code is accurate and appropriate to prevent unintended changes or issues with other page elements.
2. **Add Custom Styles**:
* Enter your CSS code in the provided text box. The code will be added to the global stylesheet, affecting the styles of all pages. For example, you can customize the appearance of specific elements, such as changing button colors, adjusting font sizes, or adding rounded corners to borders.
* Example code to make all elements with the `.card` class have rounded corners with a radius of 30 pixels:
```css
.card {
border-radius: 30px;
}
```
### **Usage Suggestions:**
1. **Preview and Test**: Before applying custom CSS to your live site, it's advisable to preview and test the code in a development or test environment. This ensures that the changes won't disrupt the page layout or negatively affect the user experience.
2. **Keep it Simple and Efficient**: Write clean, efficient CSS code to avoid redundancy and conflicting styles. Keeping your CSS simple not only optimizes website performance but also makes it easier to maintain and update.
3. **Use Selectors Wisely**: Apply specific CSS selectors to target only the elements you want to style. This prevents unintended changes to other elements across your site. For example, use class or ID selectors to limit the scope of your changes.
### **Further Learning:**
* If you're unfamiliar with CSS, consider learning some basic CSS concepts or exploring online resources for more information. You can click the “Learn More” link to access comprehensive guides on how to write and apply CSS effectively.
# Header
Header sections are used to set up and customize the main navigation area of your website, including elements such as the Logo, menu, and contact information. This setting allows you to adjust the overall layout and style of the page to align with your brand image and user experience needs.
**Function Details**
1. Basic Settings:
* **Color Scheme**: Choose or edit the color scheme to define the color styles for all elements on the page, including background color, text color, etc. You can select or adjust according to your brand's visual style.
* **Logo**:
* Upload or change your website's Logo. It is recommended to use a high-resolution image to ensure clarity on various screen sizes.
* **Logo Width**: Adjust the display width of the Logo using a slider to fit different page layout needs.
* **Logo Position**: Choose the display position of the Logo on the page, such as “Logo on the left, menu below,” etc. Select the best position according to the page design to optimize the layout.
2. **Menu**:
* **Select Menu**: Choose an existing menu as the main navigation menu or create a new one. The main navigation menu will appear at the top of the page to help users quickly navigate to the main content of the site.
* **Primary Menu Uppercase**: Enable this option to display primary menu items in all uppercase, suitable for emphasizing and highlighting main menu items.
* **Menu Type (Desktop)**: Select the type of menu to display on the desktop, with options including “Dropdown Menu” and “Drawer Menu.”
* **Allow Hover to Open Menu**: Enable this option to automatically expand sub-menus when users hover over menu items.
3. **Fixed Header**:
* **Fixed Header Type**: Choose the type of fixed header, such as “Shrink Logo Size,” etc. The fixed header remains at the top as users scroll the page, making navigation easily accessible at all times.
* **Enable Transparent Header**: Enable this option to make the header transparent, suitable for a more visually striking page design. Upload a transparent header Logo to match the transparent background.
4. **Account Settings**:
* **Login Method**: Choose how the account icon behaves when clicked.
* **Link to account page** *(default)*: Clicking the icon navigates to the standard Shopify account or login page.
* **Popup (Shopify account)**: Clicking the icon opens a slide-in account panel powered by the native `` web component. Supports passwordless sign-in, Shop recognition, and social login. Requires **New Customer Accounts** to be enabled in Shopify Admin → Settings → Customer accounts.
* **Account Menu** *(visible when Popup mode is selected)*: Select a menu to display inside the account popup. Defaults to the customer account main menu, which includes links to Orders and Profile.
5. **Mobile Settings**:
* **Mobile Logo Width**: Adjust the Logo width on mobile devices to ensure clarity on smaller screens.
* **Show Contact Number**: Enable this option to display the contact number on the header, making it easy for users to contact you directly.
6. **Add Blocks**:
* You can add multiple content modules to the page sections using the “Add Block” feature, such as:
* **Mega Menu - Featured Images**: Adds images to the navigation menu to enhance visual appeal.
* **Mega Menu - Custom Basic Menu**: Create custom menu items suitable for complex navigation structures.
* **Mega Menu - Product List**: Displays specific product lists in the menu, ideal for e-commerce site product promotion.
* **Mega Menu - Article List:** Display a list of articles from a specific blog within the menu.
* **Bubbles**: Used to mark hot-selling items, new products, etc., supporting text and icons.
**Usage Suggestions**
* **Visual Consistency**: Ensure the color scheme, Logo, and menu styles are consistent with the overall design of the website to enhance brand recognition.
* **User Experience**: Improve convenience in navigating the site through reasonable layout and fixed header features. Consider user habits and optimize the menu’s expansion method and content layout.
* **Mobile Optimization**: Ensure that the Logo, menu, and contact information are clear and easy to use on mobile devices.
# Custom Mega Menu
**Mega Menu** is an **advanced navigation menu** designed to display **multi-level content** on a website. Unlike traditional dropdown menus, **Mega Menus** typically expand in a **larger panel format**, allowing **multiple options and categories** to be displayed simultaneously. This enables users to **quickly browse and access more content**. A **custom Mega Menu** can achieve effects like the example shown below, with support for adding **images**.
### **Steps to achieve the effect shown above:**
**Step 1: Add a Custom Mega Menu**
**Step 2: Bind to the Main Menu**
Select the main menu index. The example below binds to the **second main menu**.
**Step 3: Select a Submenu**
Choose the menu and configure its alignment. In this example, the menu is **center-aligned**.
{% hint style="warning" %}
Menu content must be added in advance, and only the **top-level menu list** is displayed here.
{% endhint %}
**Step 4: Add Images**
Include images and configure their aspect ratio. Preview the final effect.
**Repeat the steps above to add custom menus and achieve the desired effect in the example.**
# Mobile Menu Obstruction by Third-Party Plugins
When accessing a website on mobile devices, third-party plugin elements (such as online chat and join membership club buttons.) may obstruct the mobile menu. This can result in the left-bottom corner social media information and other help content being hidden, negatively affecting user experience. Necessary adjustments are required to resolve this issue.
### **Problem Description**
* When the mobile menu is opened, the social media information and help content at the lower left corner may be obstructed by third-party plugin elements.
* This prevents users from accessing important menu information.
### **Solution**
Increase the z-index of the mobile menu to ensure that its contents are not obstructed by third-party plugin elements.
### **Steps to Follow**
1. Access the website's backend management system.
2. Navigate to the **Custom CSS** section under template settings.
3. Add the following code to the custom CSS:
```
.section-header {
z-index: 9999999;
}
.modal,
.product-media-modal {
z-index: 9999999;
}
```
### **Code Explanation**
* `.section-header { z-index: 9999999; }`: Elevates the container of the menu to ensure it appears at the front.
* `.modal, .product-media-modal { z-index: 9999999; }`: Resolves potential obstruction issues for pop-ups and other modal elements.
### **Important Notes**
* Ensure that this does not conflict with other essential page elements.
* It is recommended to thoroughly test after adding the styles to ensure normal functionality of the menu and other page elements.
* If any obstruction persists, consider adjusting the `z-index` value accordingly.
### **Verification Steps**
1. Open the website on a mobile device.
2. Click the menu button and confirm that all menu contents are displayed correctly.
3. Check for any remaining obstruction issues. If none are found, the settings are successful.
### **Conclusion**
By making the above simple CSS z-index adjustments, the issue of mobile menu obstruction by third-party plugin elements can be effectively resolved, thereby improving the user experience.
# Side Drawer
**Features of the Side Drawer:**
1. **Instant Display**: Without requiring a page reload, the side drawer can instantly display relevant information, enhancing the user experience.
2. **Simple and Intuitive**: The drawer-style design presents information in a more concise way, allowing users to access additional product details without leaving the current page.
3. **Easy Navigation**: Customers can easily browse and select recommended products or search results within the drawer, offering a user-friendly experience.
4. **Recommended Product Display**: Based on customer search or shopping behavior, the drawer can showcase recommended products relevant to their needs, boosting conversion rates.
5. **Flexible Configuration**: Merchants can customize the content and display options within the drawer, such as choosing to show or hide recommended products and selecting which products to feature.
6. **Enhanced Interaction Experience**: The design of the drawer improves user interaction efficiency, helping customers quickly find the desired products and complete purchases.
# Search Drawer
The search drawer is a simple and efficient way to display product search results. When customers perform a search on the website, the search drawer quickly displays relevant search results on the side of the page without redirecting to a new search results page, greatly enhancing the user experience.
### **Enabling the Search Drawer:**
1. **Display Recommended Products**: By selecting the "Display Recommended Products" option, related recommended products can be shown in the search drawer to help customers quickly find items they may be interested in.
2. **Select Product List**: By clicking the "Change" button, you can manually select a range of recommended products to ensure that specific items are displayed to customers in the search drawer.
### **Recommended Product Settings:**
* Recommended products can be chosen based on the merchant's promotional strategy.It is advised to select products that are related to the customer's search behavior, such as displaying items relevant to the search keywords or showcasing popular and cross-sell products you want to promote.
* Recommended products can be set to automatic recommendation, where the system will automatically generate related products.
You can manually adjust related product recommendations in **Search & Discovery**.
### **Usage Suggestions:**
* **Increase Conversion Rates**: By displaying recommended products, you can help customers find items they might be interested in faster, thereby increasing conversion rates.
* **Precise Recommendations**: The recommended products should closely align with the customer's search behavior, which helps improve customer satisfaction and encourages further purchases.
* **Combine with Promotions**: Incorporating promotions, such as adding limited-time offers or promotional badges to recommended products, can encourage customers to place orders immediately, boosting store sales.
# Shopping Cart Drawer
The shopping cart drawer is a quick way to view and manage the shopping cart, allowing customers to easily see the items they've added without leaving the current page. The cart drawer enhances the user experience, making it easier for customers to continue browsing and shopping.
### **Enabling the Shopping** **Cart Drawer:**
1. Go to the **template settings**, find the cart-related settings, and select the cart type as "drawer."
2. Enable **Display of Recommended Products**: By checking this option, recommended products will appear in the cart drawer, increasing cross-selling opportunities and enhancing the shopping experience.
### **Recommended Product Settings:**
* You can set which recommended products are displayed in the cart drawer by selecting the "Product List." Click the "Change" button to choose the recommended products you'd like to showcase in the cart drawer.
* Recommended products can be set to automatic recommendation, where the system will automatically generate related products.
You can manually adjust related product recommendations in **Search & Discovery**.\
* Recommended products are typically items you'd like customers to add to their cart before checkout. These products are often related to the items already in the cart (such as complementary items, bestsellers, etc.).
### **Common Uses:**
* **Increase Average Order Value**: By displaying recommended products in the cart drawer, customers may add more items before checking out, helping to increase your average order value.
* **Improve User Experience**: The cart drawer allows customers to quickly view their cart without leaving the page, while continuing to browse other products, offering a smoother shopping flow.
### **Usage Suggestions:**
* The recommended products should be highly relevant to the items already in the customer's cart to increase the success rate of cross-selling.
* Set limited-time offers or discounts to encourage customers to add more recommended products to their cart from the cart drawer.
# Sections
# Seamless scroll
The seamless scrolling section allows you to create a continuously scrolling content area on your page, ideal for showcasing announcements, promotions, or brand slogans. This effect can effectively capture user attention and provide a smooth visual experience.
### **Function Details**
1. **Color Scheme**:
* Choose an existing color scheme for the seamless scrolling section. To edit or change the color scheme, click “Edit” to make adjustments. The color scheme will affect the color of the scrolling text, background color, and other visual elements.
* For adjustments to the color scheme of the entire template, go to “Template Settings.”
2. **Scrolling Direction**:
* Select the direction of the content scroll. Default options include:
* **Left**: Content scrolls from right to left.
* **Right**: Content scrolls from left to right.
* Choose the direction that best fits your page layout and content display needs.
3. **Scrolling Speed**:
* Adjust the scrolling speed using a slider; a higher value will increase the speed. Adjust the speed according to the length of the content and user reading habits to ensure that the content is easy to read and not too fast or too slow.
4. **Show Border Blur**:
* Enable this option to display a blur effect at the edges of the scrolling content, simulating a fade-in and fade-out effect. This can add depth to the scrolling effect and enhance the visual experience.
**In the seamless scrolling section, you can use the “Add Block” feature to include the following types of blocks:**
1. **Text Block**:
* Used to add text content such as announcements, promotional information, or brand slogans. The content of the text block will scroll along with the effect.
2. **Icon Block**:
* Used to add icons, typically used in conjunction with text. Icons can enhance the visual effect or provide additional information.
3. **Image Block**:
* Used to add images, which can display product pictures, brand logos, or other visual content, increasing the attractiveness of the scrolling area.
### **Usage Suggestions**
* **Information Display**: Seamless scrolling sections are ideal for displaying short, important information that needs to be repeatedly read, such as the latest offers or store announcements. Ensure the content is concise and clear so that users can easily get the information while scrolling.
* **Visual Effects**: The choice of color scheme and scrolling direction should be consistent with the overall style of the page to avoid color clashes or direction inconsistencies. The border blur effect can add depth to the scrolling content, and it is recommended to enable this effect when you want to highlight the content.
* **Speed Adjustment**: Set the scrolling speed appropriately based on the length and importance of the content. Slower speeds are suitable for longer content, while faster speeds are better for short content or attention-grabbing headlines.
# Announcement bar
The Announcement Bar section is used to display important notices, promotional information, or brand messages at the top of the page. You can set options like carousel speed and social media icons to make the announcement bar an effective tool for guiding users. This section can only be used in the header.
### Feature Details
1. **Color Scheme**:
* Choose or edit the color scheme to define the color styles for the announcement bar, including text color and background color. Adjust according to your brand’s visual style.
2. **Enable Auto-Carousel**:
* Enabling this option will automatically cycle through multiple announcements in the announcement bar.
* **Auto-Carousel Speed**: Adjust the carousel speed using a slider to set the interval time (in seconds) for switching content, ensuring users have enough time to read each announcement.
3. **Social Media**:
* Enable this option to display social media icons in the announcement bar, allowing users to click these icons to visit your social media pages.
* **Social Style**: Choose from three styles for the social media icons:
* **Icon**: Displays only the social media icons.
* **Border**: Icons with borders.
* **Wrap**: Icons wrapped with background color.
4. **Add Blocks**:
* You can add multiple blocks to the announcement bar to showcase different types of content. Available block types include:
* **Announcement**: For adding text content such as promotional information or news announcements.
* **Quick Links**: For adding text with links, allowing users to quickly navigate to specific pages.
### **Usage Suggestions**
* **Keep it Clear and Concise**:Ensure the content in the announcement bar is clear and to the point, highlighting key information so users can quickly grasp important details.
* **Optimize User Experience**:Set the carousel speed appropriately to give users enough time to read the content. Use social media icons to guide users to follow your social accounts, enhancing brand interaction.
* **Regular Updates**:Update the announcement bar regularly according to seasonal promotions, events, or important announcements to keep users engaged and informed.
# Countdown
The Countdown Timer section is used to display a countdown clock, typically for promotions, product launches, or other significant events. This feature helps capture user attention and create a sense of urgency, encouraging users to take action promptly.
### Feature Details
1. **Content Settings**
* **Enable Full Width** (`enable_full_width`): By enabling this option, the countdown timer will span the full width of the page, making it suitable for display at the top or bottom of the page to ensure visibility for all users.
* *Default:* Enabled
2. **Color and Background**
* **Color Scheme** (`color_scheme`): Choose or edit the color scheme to define the text color, background color, and other visual elements of the countdown timer. Adjust according to your brand’s visual style.
* *Default:* Inverse
* **Background Image** (`texture_image`): Upload an image to use as a background texture for the countdown section.
* **Image Opacity** (`texture_alpha`): Adjust the transparency of the background texture image, from 0% (fully transparent) to 100% (fully opaque).
* *Default:* 90%
3. **Text Content**
* **Icon** (`icon`): Select an icon to display next to the countdown text, adding a visual element to your message.
* *Default:* Sale
* **Caption** (`subheading`): Enter a short caption or subheading to appear above the main heading.
* **Heading** (`heading`): Set a title for the countdown timer to briefly describe the upcoming event or promotional activity.
* *Default:* Limited-Time Offer
* **Heading Size** (`heading_size`): Choose the size of the main heading: Small, Medium, or Large.
* *Default:* Medium
* **Decorative Heading** (`heading_decorative`): Enable this option to apply a decorative font style to the heading.
* *Default:* Disabled
* **Description** (`description`): Add a detailed description or message below the heading.
4. **Countdown Settings**
* **End Time** (`end_time`): Set the target date and time for the countdown, formatted as `yyyy-mm-dd hh:mm`. The countdown will stop once this end time is reached.
* *Default:* 2024-12-31 15:23
* **Message After End** (`end_text`): Enter a custom message to be displayed when the countdown ends, notifying users that the event has concluded or providing next steps.
* *Default:* Timer complete message
* **Hide Countdown After End** (`hide_when_end`): Enable this option to automatically hide the countdown timer once it has ended.
* *Default:* Disabled
* **Timer Background Color** (`timer_background_color`): Set the background color for the countdown timer digits.
* *Default:* #FFFFFF
* **Timer Foreground Color** (`timer_foreground_color`): Set the color for the countdown timer digits and labels.
* *Default:* #103F2A
5. **Button Settings**
* **Button Label** (`button_label`): Set the text for the button next to the countdown timer. This button typically guides users to view more details or take immediate action.
* *Default:* View details
* **Button Link** (`button_link`): Enter the link for the button, directing users to a specified page when clicked. You can provide a full URL or a relative path link.
6. **Discount Code** (`discount_code`): If the countdown is related to a promotional event, you can enter a discount code here. Users can use this code at checkout to receive a discount.
* *Default:* NEWUSER
7. **Section Spacing**
* **Top Margin** (`margin_top`): Adjust the spacing above the section.
* *Default:* 0px
* **Bottom Margin** (`margin_bottom`): Adjust the spacing below the section.
* *Default:* 0px
**Usage Suggestions**
* **Clear End Time**: Ensure that the end time for the countdown is set accurately to avoid confusing users or missing out on promotional opportunities.
* **Engaging Text Content**: Use a clear and compelling heading, an optional caption, and a descriptive message to direct user attention to the upcoming event or offer. Consider adding a relevant icon and adjusting the heading size and style for visual impact.
* **Visual Emphasis**: Choose a color scheme that makes the countdown timer stand out on the page. Enhance the visual appeal by adding a background image and adjusting its opacity, and customize the timer's background and foreground colors to align with your brand.
* **Timely Updates**: Update the countdown settings based on the actual timing of events to ensure users receive accurate information.
# Collection thumbnails
The **Category Icon List** feature is designed to display multiple product categories on a page, each with an icon and a name. This functionality helps users quickly browse and navigate to the product categories they are interested in.
### Feature Details
1. **Adapt for transparent image**
If the collection image has a transparent background, it is recommended to enable this option for optimal display.
2. **Layout Style**:
You can choose the layout style for the Category Icon List:
* **Horizontal**: Arrange all category icons and titles horizontally. This layout is suitable for a landscape orientation.
* **Vertical**: Arrange all category icons and titles vertically. This layout is suitable for a portrait orientation.
3. **Icon Block Settings**:
Each icon block represents a product category. For each category, you can set the following:
* **Image**: Upload an image for the product category. This is often used to showcase featured products within that category.
* **Select Product Series**: Choose a product series from existing ones to serve as the content source for the category.
* **Custom Series Title**: Optionally, set a custom title for the product series, which will be displayed below the icon.
### **Usage Suggestions**
* **Clear Navigation**:Use the category icon list to help users quickly identify and navigate to their desired product categories. Ensure that icons and titles are clear and easily understandable for users.
* **Consistent Style**:Maintain consistency in the color scheme and icon style to enhance brand image and user experience.
* **Regular Updates**:Update category icons and product series content according to product updates or promotional events to keep the content fresh and relevant.
# Narrow banner image
**Narrow Banner Image Section** is used to display a narrow horizontal image on the page, often showcasing promotional content, brand slogans, or other important information. This section allows you to effectively utilize page space to convey key messages.
### Feature Details
1. **Enable Full Width**:
When this option is enabled, the narrow banner image will span the entire width of the page, making it ideal for display at the top or bottom, ensuring maximum visibility for all users.
2. **Image Upload:**
Click the "Choose Image" button to upload the image you want to display. You can select an image from your local files or browse a free image library.
3. **Fixed Image Position**:
Enabling this option will lock the image in place, ensuring it does not move with the rest of the page content when users scroll.
4. **Banner Height**:
Adjust the banner image's height using the slider, measured in pixels. You can set an appropriate height to ensure the best display based on your page design.
5. **Link**:
Set a link for the banner image, allowing users to be redirected to a specific page or resource when they click on the image. You can input a full URL or link to an internal page.
### **Usage Suggestions**
* **Visual Appeal**: Ensure that the uploaded image is of high quality and matches the overall style of the page to capture users' attention effectively.
* **Clear Link Target**: Set a clear destination for the image link to ensure that users are quickly directed to relevant content or product pages.
* **Adaptive Adjustments**: Adjust the banner image's height based on the page layout and user devices (e.g., desktop or mobile) to ensure optimal display across all screen sizes.
# Image banner
The image banner module is used to add a full-width or fixed-width banner image to your website. It can be used to display promotions, products, or brand information. This module offers a rich set of configuration options to help you customize the image display and content styles.
### Configuration Options
1. **Layout Settings**
* **Enable Full Width (`enable_full_width`)**
* **Purpose**: Decides whether the banner image will occupy the full width of the page. If unchecked, the image will be displayed according to its content width.
* **Default**: `true`
* **Show Shadow (`show_shadow`)**
* **Purpose**: Display a shadow effect around the banner when it's not full width.
* **Default**: `true`
* **Visibility**: Only visible if "Enable Full Width" is unchecked.
2. **Image Settings**
* **Image (`image`)**: Upload or select the image to be displayed in the banner. Recommended image size for optimal display.
* **Image Overlay Opacity (`image_overlay_opacity`)**: Adjust the opacity to add a transparent overlay on the image, enhancing text readability.
* **Default**: `10%`
* **Image Height (`image_height`)**: Choose the height of the banner image.
* **Options**: `Adapt to image`, `Small`, `Medium`, `Large`
* **Default**: `Medium`
* **Adapt to Transparent Header (`enable_adapter_transparent_header`)**: Enable this option to add top padding for transparent headers to prevent content overlap.
* **Default**: `false`
3. **Content Settings**
* **Color Scheme (`color_scheme`)**: Choose the color scheme for the banner content to ensure it matches the background image and overall page design.
* **Default**: `Background 1`
* **Position (`desktop_content_position`)**: Set the alignment of the content within the banner.
* **Options**: `Top left`, `Top center`, `Top right`, `Middle left`, `Middle center`, `Middle right`, `Bottom left`, `Bottom center`, `Bottom right`
* **Default**: `Bottom right`
* **Content Width (`content_width`)**: Control the maximum width of the content area within the banner.
* **Options**: `Narrow`, `Normal`, `Wide`
* **Default**: `Normal`
* **Show Content Box (`show_text_box`)**: Check this option to display a content box on the image, containing text or other content.
* **Default**: `true`
* **Content Box Opacity (`text_box_opacity`)**: Adjust the opacity of the content box to ensure adequate contrast between the text and background.
* **Default**: `100%`
* **Visibility**: Only visible if "Show Content Box" is checked.
* **Enable Blur Effect (`enabled_blur_effect`)**: Add a blurred background to the content box to highlight the text.
* **Default**: `false`
* **Visibility**: Only visible if "Show Content Box" is checked.
* **Text Alignment (`desktop_content_alignment`)**: Set the alignment of the text within the content box (left, center, or right).
* **Default**: `Center`
4. **Animation Settings**
* **Image Behavior (`image_behavior`)**: Select the animation effect for the image.
* **Options**: `None`, `Ambient movement`, `Fixed background position`, `Zoom on scroll`, `Parallax scrolling`
* **Default**: `None`
5. **Mobile Settings**
* **Mobile Cover Image (`image_mobile`)**: Upload or select a cover image for display on mobile devices, ensuring the best visual effect across different screen sizes. Recommended image size for optimal display on mobile.
* **Mobile Content Position (`mobile_content_position`)**: Set the alignment of the content within the banner on mobile devices.
* **Options**: `Top center`, `Middle center`, `Bottom center`
* **Default**: `Middle center`
* **Mobile Content Alignment (`mobile_content_alignment`)**: Set the alignment of the text within the content box on mobile devices.
* **Default**: `Center`
6. **SEO Optimization**
* **Primary Above-the-Fold Area (`if_as_main_area`)**: If set as the main above-the-fold area, optimization will be applied to improve SEO performance, making it easier for search engines to identify and index the page content.
* **Default**: `false`
7. **Margin Settings**
* **Margin Top (`margin_top`)**: Adjust the top margin of the section.
* **Default**: `0px`
* **Margin Bottom (`margin_bottom`)**: Adjust the bottom margin of the section.
* **Default**: `80px`
### Addable Blocks
The image banner module supports adding various types of content blocks. You can select the appropriate block to enhance the banner display. The following block types are supported:
1. **Caption (`caption`)**
* **Purpose**: Adds a small title to highlight secondary information or complement the main title.
* **Limit**: 1
* **Settings**:
* **Caption (`caption`)**: Text content for the caption.
* **Default**: `Add a Caption`
2. **Heading (`heading`)**
* **Purpose**: Adds a primary title to prominently display important information.
* **Limit**: 1
* **Settings**:
* **Heading (`heading`)**: Rich text content for the heading.
* **Default**: `
Image banner
`
* **Heading Size (`heading_size`)**: Choose the size of the heading.
* **Options**: `Small`, `Medium`, `Large`
* **Default**: `Small`
* **Heading Decorative (`heading_decorative`)**: Enable decorative styling for the heading.
* **Default**: `false`
* **Enable Italic Gradient (`enable_italic_gradient`)**: Apply a gradient effect to italicized text within the heading.
* **Default**: `false`
* **Italic Gradient (`italic_gradient`)**: Select the gradient color for italicized text.
* **Default**: `linear-gradient(90deg, rgba(40, 184, 242, 1) 1%, rgba(159, 30, 236, 1) 53%, rgba(225, 15, 239, 1) 100%, rgba(255, 255, 255, 0.55) 100%)`
* **Visibility**: Only visible if "Enable Italic Gradient" is checked.
3. **Image (`image`)**
* **Purpose**: Add an image within the banner content area.
* **Settings**:
* **Image (`image`)**: Upload or select an image.
* **Image Width (`image_width`)**: Set the width of the image.
* **Range**: `100px` to `500px`
* **Default**: `300px`
4. **Description (`description`)**
* **Purpose**: Add a text description to provide detailed information about the banner or offer additional content.
* **Limit**: 3
* **Settings**:
* **Text (`text`)**: Rich text content for the description.
* **Default**: `
Placeholder description for image banner
`
5. **Button (`button`)**
* **Purpose**: Add interactive buttons to guide users to take specific actions. This block supports up to two buttons.
* **Limit**: 1
* **Settings**:
* **Primary Button Header**
* **Button Label (`button_label`)**: Text for the primary button.
* **Default**: `Button label`
* **Button Link (`button_link`)**: URL for the primary button.
* **Button Style (`button_style`)**: Style of the primary button.
* **Options**: `Primary`, `Secondary`
* **Default**: `Primary`
* **Button Arrow (`button_arrow`)**: Show an arrow icon on the primary button.
* **Default**: `false`
* **Secondary Button Header**
* **Secondary Button Label (`secondary_button_label`)**: Text for the secondary button.
* **Default**: `Button label`
* **Secondary Button Link (`secondary_button_link`)**: URL for the secondary button.
* **Secondary Button Style (`secondary_button_style`)**: Style of the secondary button.
* **Options**: `Primary`, `Secondary`
* **Default**: `Secondary`
* **Secondary Button Arrow (`secondary_button_arrow`)**: Show an arrow icon on the secondary button.
* **Default**: `false`
### Usage Tips
* **Full Width vs. Non-Full Width**: The decision to enable full width depends on the purpose of the banner image. Full-width effects are suitable for large visual displays meant to capture the user’s attention.
* **Image Overlay**: By adjusting the overlay opacity, you can balance the visibility of the background image and the readability of the foreground text, ensuring clear communication of information.
* **Animation Effects**: Moderately using animation can add dynamic elements to the page but should be used sparingly to avoid distracting the user experience.
### Common Issues
* **Image Not Displaying Fully**: Check the image height settings to ensure the image’s proportions fit the banner size.
* **Text Not Clear**: Try adjusting the content box opacity or enabling the blur effect to enhance contrast between the text and the background.
* **Mobile Display Issues**: In the mobile settings, select a suitable smaller image to ensure the best visual effect across different devices.
By configuring these settings, your image banner will have excellent visual appeal and maintain a consistent user experience across different devices.
# Video banner
The video banner module is used to display video content on a page, offering multiple customization options to control the video’s display and appearance. This feature is suitable for stores looking to enhance their page with dynamic visual elements.
### Configuration Options
1. **Layout Settings:**
* **Enable Full Width (`enable_full_width`):**
* **Purpose**: Selecting this option will display the video banner at full width, covering the entire screen.
* **Default**: `true`
* **Note**: Full-width display is ideal for layouts that emphasize video content.
* **Show Shadow (`show_shadow`):**
* **Purpose**: Displays a subtle shadow effect around the video banner. This setting is only visible when "Enable Full Width" is disabled.
* **Default**: `true`
2. **Video Settings:**
* **Video URL (`video_url`):**
* **Purpose**: Embed a video from YouTube or Vimeo by pasting its URL.
* **Default**: `https://www.youtube.com/watch?v=_9VUPq3SxOc` (Example YouTube URL)
* **Note**: This option is ideal for using externally hosted videos for better performance and reliability.
* **Video (`video`):**
* **Purpose**: Click the button to select a video file from your media library. This option is for uploading videos directly to your store.
* **Enable Video Controls (`enable_controls`):**
* **Purpose**: Choose this option to display player controls (play/pause buttons, volume control, etc.), allowing users to interact with the video.
* **Default**: `false`
* **Enable Video Autoload (`enable_autoload`):**
* **Purpose**: When selected, the video will automatically buffer and be ready to play as soon as the page loads.
* **Default**: `false`
* **Recommendation**: If the video is located in the main above-the-fold area, it’s recommended to disable this option to improve SEO scores and page load performance.
* **Enable Video Looping (`enable_looping`):**
* **Purpose**: When enabled, the video will automatically replay after it finishes, suitable for continuously playing content.
* **Default**: `false`
3. **Cover Image:**
* **Select Cover Image (`cover_image`):**
* **Purpose**: Click the button to upload or choose a cover image. This image will display in place of the video before it starts playing.
* **Note**: A cover image provides visual content before the video loads, keeping the page clean and attractive.
4. **Video Height (`video_height`):**
* **Purpose**: Controls the height of the video banner.
* **Options**:
* **Adapt (`adapt`)**: The video height will automatically adjust based on the content.
* **Small (`small`)**: Suitable for embedding smaller video content within the page.
* **Medium (`medium`)**: Standard video height, fitting most use cases.
* **Large (`large`)**: A larger video height for content that needs emphasis.
* **Default**: `medium`
5. **Content Settings:**
* **Color Scheme (`color_scheme`):**
* **Purpose**: Choose a color scheme for the video banner content to ensure it aligns with the overall page design.
* **Default**: `background-1`
* **Content Width (`content_width`):**
* **Purpose**: Sets the maximum width of the text content within the banner.
* **Options**:
* **Narrow (`narrow`)**: Content will occupy a smaller width.
* **Normal (`normal`)**: Standard content width.
* **Wide (`wide`)**: Content will occupy a larger width.
* **Default**: `normal`
* **Heading (`heading`):**
* **Purpose**: Set a main heading for the video banner, such as “Product Showcase.” This field supports rich text formatting.
* **Default**: `Talk about your brand`
* **Heading Size (`heading_size`):**
* **Purpose**: Choose the font size for the heading.
* **Options**: `small`, `medium`, `large`
* **Default**: `large`
* **Heading Decorative (`heading_decorative`):**
* **Purpose**: Select this option to apply a decorative font style to the heading for added visual impact.
* **Default**: `false`
* **Enable Italic Gradient (`enable_italic_gradient`):**
* **Purpose**: When enabled, applies a gradient color to italicized text within the heading.
* **Default**: `false`
* **Italic Gradient (`italic_gradient`):**
* **Purpose**: Choose the gradient colors for italicized text in the heading. This setting is only visible when "Enable Italic Gradient" is selected.
* **Default**: `linear-gradient(90deg, rgba(40, 184, 242, 1) 1%, rgba(159, 30, 236, 1) 53%, rgba(225, 15, 239, 1) 100%, rgba(255, 255, 255, 0.55) 100%)`
* **Description (`description`):**
* **Purpose**: Input a description to provide more background information about the video content. This field supports rich text formatting.
* **Default**: `
Share information about your brand with your customers
`
6. **Mobile Settings:**
* **Video (Mobile) (`video_mobile`):**
* **Purpose**: Select a separate video file from your media library specifically for mobile devices. This allows for optimized video content on smaller screens.
* **Mobile Cover Image (`cover_image_mobile`):**
* **Purpose**: Set a separate cover image for mobile devices to ensure optimal video display on smaller screens.
7. **SEO Optimization:**
* **Mark as Main Area (`if_as_main_area`):**
* **Purpose**: Enabling this option will mark the video banner as the main content area of the page, helping to improve SEO scores.
* **Default**: `false`
8. **Margin Settings:**
* **Margin Top (`margin_top`):**
* **Purpose**: Adjust the spacing above the video banner.
* **Default**: `0px`
* **Range**: `0 - 100px`
* **Margin Bottom (`margin_bottom`):**
* **Purpose**: Adjust the spacing below the video banner.
* **Default**: `80px`
* **Range**: `0 - 100px`
### Usage Tips
* **Test Video Loading**: Ensure that the video plays properly and that all settings are effective before publishing the page.
* **Color Coordination**: Choose a color scheme that ensures sufficient contrast between the video background and text to maintain readability.
* **SEO Optimization**: If the video is placed above the fold, it is recommended to disable autoplay (`enable_autoload`) to avoid impacting page load speed, especially when "Mark as Main Area" is enabled.
### Common Issues
* **Video Not Playing or Loading Slowly**: Check the video file size and format, and ensure the appropriate video settings are enabled. Consider using the `video_url` option for externally hosted videos for better performance and reliability.
* **Cover Image Display Issues**: Try adjusting the cover image size or using a different image file to ensure proper display.
* **Text Alignment Problems**: Check the text alignment options in the content settings to ensure the correct alignment has been selected.
By following these settings, your video banner will not only look visually appealing but also perform efficiently across different devices.
# Slideshow
The slideshow section is a dynamic module designed to showcase multiple **images** or **videos**, allowing for automatic or manual slide transitions. It is ideal for visually appealing areas on the homepage or product pages, effectively enhancing the user experience and conveying content visually.
### Basic Settings
* **Enable Full Width**: When enabled, the slideshow will display across the full width of the page.
* **Slideshow Height**:
* **Auto**: The height of the slideshow adjusts automatically based on content.
* **Small**: Sets a small height for the slideshow.
* **Medium**: Sets a medium height for the slideshow.
* **Large**: Sets a large height for the slideshow.
* **Adapt to Transparent Header**: If the header has a transparent background, enabling this option will add padding at the top to prevent content overlap.
#### Carousel Settings
* **Enable Autoplay**: Automatically loops the slideshow when enabled.
* **Autoplay Speed**: Use the slider to set the interval of the slideshow, measured in seconds.
* **Show Navigation Buttons (Desktop)**: When enabled, navigation buttons will appear on desktop.
* **Show Pagination Dots**: Displays pagination dots indicating the current slide.
* **Navigation & Pagination Colors**: Customize the color of navigation buttons and pagination dots.
#### SEO Optimization
* **Set as Main Content in Above-the-Fold Area**: When enabled, the slideshow is considered the primary content area of the page, which helps improve SEO scores by optimizing the template accordingly.
#### Image Settings (For Image Slide)
* **Image**: Upload or select an image to display in the slideshow.
* **Image Overlay Opacity**: Adjust the transparency of the image overlay using a slider, ranging from 0% to 100%.
#### Video Settings (For Video Slide)
* **Video**: Upload or select a video to display in the slideshow.
* **Video Overlay Opacity**: Adjust the transparency of the video overlay using a slider, ranging from 0% to 100%.
#### Content Settings
* **Color Scheme**: Choose the color scheme for the content in the slideshow.
* **Position**: Set the position of the content (e.g., “Bottom Center”).
#### Text Alignment
* **Text Alignment**: Choose how the text is aligned within the slide: left-aligned, centered, or right-aligned.
#### Caption
* **Caption**: Add a brief caption.
#### Heading
* **Heading**: Enter the heading for the slideshow.
* **Heading Size**: Set the size of the heading (small, medium, large).
* **Decorative Heading**: When enabled, the heading will use a [decorative font](/global-settings/typography).
#### Description
* **Description**: Enter a detailed description for the slideshow content.
#### Button Settings
* **Button Text**: Enter the text to be displayed on the button.
* **Button Link**: Set the URL to which the button will redirect users. This can be an internal or external link.
* **Button Style**:
* **Primary**: The button will appear in the primary style.
* **Secondary**: The button will appear in the secondary style.
* **Show Button Arrow**: When enabled, an arrow icon will appear on the button.
#### Mobile Settings
* **Image**: Upload or select a separate image for mobile devices to ensure the slideshow displays optimally on smaller screens.
# Image with text
The Image and Text Introduction section is used to showcase detailed information about products, services, or brands, attracting users' attention through a combination of images and text. This section is ideal for storytelling, highlighting specific features, or emphasizing brand values. It supports the addition of two images, allowing for more flexible and rich content presentation.
### Configuration Options
**Image Settings**
Upload one or two images to serve as the main visual elements for this section.
\| Setting ID | Purpose
# Image-text list
The **Image-text list** section is used to create multiple column blocks on the page, which can be displayed as a grid or a slider. Each block displays an image, title, descriptive text, and an optional button. It is suitable for showcasing products, services, or blog content. Users can customize the content and layout of each column block.
### **Configuration Options:**
* **Block Title Settings:**
* **Show Section Header** (`show_section_header`): Choose whether to display the title and description area at the top of the section.
* **Heading** (`heading`): Enter the main heading for the section.
* **Enable Italic Gradient** (`enable_italic_gradient`): Apply a gradient effect to italicized text within the heading.
* **Italic Gradient** (`italic_gradient`): Choose the gradient color for italicized text in the heading.
* **Description** (`description`): Add descriptive text to introduce the main content or purpose of the section.
* **Watermark Background Text** (`water_text`): Add watermark text to the section background for an enhanced visual effect.
* **Decorative Icon** (`decorative_icon`): Select a decorative icon to display next to the section heading.
* **Button Label** (`button_label`): Set the text for the button at the bottom of the section header.
* **Button Link** (`button_link`): Set the link address that the button redirects to upon clicking.
* **Slider Settings:**
* **Enable desktop slider** (`enable_desktop_slider`): When enabled, items will display as a slider on desktop, overriding the 'Columns on desktop' setting.
* **Show navigation buttons** (`show_nav_buttons`): Display navigation arrows for the slider.
* **Show pagination dots** (`show_page_dots`): Display dots indicating slider progress.
* **Grid Settings:**
* **Columns on desktop** (`columns_on_desktop`): Select the number of columns to display per row on desktop devices when the slider is disabled. Supports 2-5 columns.
* **Card Settings:**
* **Image Ratio** (`image_ratio`): Select the display ratio of the image within each column block (adapt, square, portrait, landscape).
* **Text Alignment** (`alignment`): Set the alignment of the text within each column block; options include left, center, or right alignment.
* **Show content wrapper** (`show_content_wrapper`): Choose whether to add a wrapper effect around the column block content for enhanced visual separation.
* **Color Scheme** (`color_scheme`): Choose the color scheme for the column block content wrapper to match the overall page style.
* **Show Border** (`show_border`): Display a border around each column block.
* **Border Color** (`border_color`): Choose the color or gradient for the border around each column block.
* **Mobile Settings:**
* **Enable mobile slider** (`enable_mobile_slider`): When enabled, items will display as a slider on mobile, with the second column pre-displayed and scrollable.
* *Note: If the mobile slider is disabled, the items will display in a grid layout.*
* **Columns on mobile** (`columns_on_mobile`): Set the number of columns per row on mobile devices when the slider is disabled.
* **Margin Settings:**
* **Margin Top** (`margin_top`): Adjust the top margin of the section.
* **Margin Bottom** (`margin_bottom`): Adjust the bottom margin of the section.
### **Individual Column Block Configuration Options:**
* **Image** (`image`): Add an image to the column block. This will serve as the primary visual element.
* **Heading** (`heading`): Set a title for the column block to highlight its main theme.
* **Description** (`description`): Add descriptive text to provide further details or additional information for the column block.
* **Button Settings:**
* **Button Label** (`button_label`): Set the text for the button within this column block.
* **Button Link** (`button_link`): Set the link address that the button redirects to upon clicking.
### **Usage Notes:**
* When the desktop slider is enabled, it operates independently of the 'Columns on desktop' setting.
* Maintain a consistent style across multiple column blocks by selecting the same image ratio, color scheme, and text alignment.
* Set clear link paths for buttons to guide users through the next steps.
### **Common Issues:**
* **Inconsistent content display**: Ensure that all column blocks have the same image ratio and text alignment to keep the page layout clean and organized. Consider using the 'Show Border' option for better visual separation.
* **Button not displaying**: Check whether the button text and link are filled in for both the section header button and individual column block buttons. The button may not display if the content is incomplete.
# Video with Text
The **Video with Text section** allows you to combine video content with text, providing a more engaging way to highlight your brand, showcase products, or present campaigns.
### 🎥 Video Settings
\| Setting ID | Type | Label | Description
# Collage with Text
The **Collage with Text** section allows you to showcase multiple stacked images combined with text, creating a visually engaging storytelling or promotional layout. It’s ideal for brand storytelling, product showcases, or campaign highlights.
### 🎨 Color Scheme
* **Choose or edit a color scheme** to define the styles for all section elements, including background colors, text colors, and more.
* Adjust according to your brand’s visual identity for a consistent look and feel.
***
### 🖼 Image Settings
* **Image Width**: Options include **Small / Medium / Large**.
* When using multiple stacked images, **Small** is recommended for balance and aesthetics. (Default: Small)
* **Image First**: Check this option to display images on the left side and text content on the right side on desktop. By default, images are displayed first.
* **Angle Style**:
* **Clean**: Straight vertical angles.
* **Scattered**: Images tilt toward the center for a dynamic effect. (Default)
* **Tilt Left**: Images lean to the left.
* **Tilt Right**: Images lean to the right.
* **Show Image Frame**: Enable frames to add depth and a 3D feel to the images. (Default: Enabled)
***
### ✍️ Content Settings
* **Content Alignment (Desktop)**: Choose from **Left, Center, or Right alignment** for text and content on desktop. (Default: Center)
* **Content Alignment (Mobile)**: Choose from **Left, Center, or Right alignment** for text and content on mobile devices. (Default: Center)
***
### 📏 Layout Settings
* **Padding Top**: Adjust the spacing above the section content. (Default: 36px)
* **Padding Bottom**: Adjust the spacing below the section content. (Default: 36px)
* **Margin Top**: Adjust the outer spacing above the entire section. (Default: 0px)
* **Margin Bottom**: Adjust the outer spacing below the entire section. (Default: 80px)
***
### 📦 Section Blocks
The section supports the following blocks:
* **Image**: Upload up to **5 images**. The collage automatically adapts to the number of images for different stacking layouts.
* **Image Ratio**: Select the aspect ratio for the image: **Adapt to image**, **Square (1:1)**, **Portrait (2:3)**, or **Landscape (3:2)**. (Default: Square)
* **Caption**: Short supporting text or label.
* **Heading**: Highlight the main message.
* **Heading Size**: Choose the size of the heading: **Small**, **Medium**, or **Large**. (Default: Medium)
* **Decorative Heading**: Enable a decorative style for the heading.
* **Enable Italic Gradient**: Apply a gradient effect to italicized text within the heading.
* **Italic Gradient**: Choose the gradient colors for italicized text.
* **Text**: Add product details, brand stories, or campaign descriptions.
* **Text Light**: Enable to display the text in a lighter color, which can be useful for contrast against certain backgrounds. (Default: Disabled)
* **Limit Description Height**: Enable to limit the height of the text content, adding a scrollbar if content exceeds the limit.
* **Button**: Insert up to two call-to-action buttons with links.
* **Button Label**: Enter the text for the primary button.
* **Button Link**: Set the URL for the primary button.
* **Button Style**: Choose between **Primary** or **Secondary** button styles. (Default: Primary)
* **Show Arrow**: Display an arrow icon next to the primary button.
* **Secondary Button Label**: Enter the text for the secondary button.
* **Secondary Button Link**: Set the URL for the secondary button.
* **Secondary Button Style**: Choose between **Primary** or **Secondary** button styles for the secondary button. (Default: Secondary)
* **Show Secondary Button Arrow**: Display an arrow icon next to the secondary button.
* **Social Media List**: Showcase links to social platforms for brand engagement.
* **Style**: Choose the display style for social media icons: **Icon**, **Border**, or **Wrapper**. (Default: Wrapper)
***
### 💡 Best Practices
1. **Image Selection**: Use images with a consistent style or theme to ensure harmony.
2. **Optimize Width**: For multi-image collages, use the **Small** size for better balance.
3. **Add Depth**: Turn on image frames to create a layered, 3D-like effect.
4. **Balance Visuals & Text**: Keep text concise and focused to complement the strong visuals.
5. **Mobile Experience**: Utilize the separate mobile content alignment setting to ensure your text is well-presented on smaller screens.
6. **Call to Action**: Leverage the option for two buttons to guide customers through different stages of their journey or offer multiple options.
# Rich text
The Rich Text section is used to display detailed text content on a page, including titles, descriptive text, buttons, and highlight statistics. This section can be customized with a background image and color schemes to match the store's overall style. Additionally, the Rich Text section supports various content alignment options and display effects, making it suitable for a wide range of text presentation scenarios.
### Configuration Options
\| Setting ID | Purpose
# Newsletter
The Email Subscription section is designed to encourage website visitors to subscribe to your email list, allowing them to receive updates on new products, promotions, and other relevant information. This section allows you to add a background image, adjust opacity, and customize content.
### Configuration Options
1. **Enable Full Width**
* **Purpose**: When enabled, the Email Subscription section will automatically expand to the full width of the page, ideal for emphasizing the importance of subscribing.
2. **Color Scheme**
* **Purpose**: Select the color scheme for the section to ensure it aligns with the overall style of the page.
3. **Background Image**
* **Purpose**: Set a background image for the section to enhance visual appeal.
* **Image Opacity**: Adjust the opacity of the background image using a slider to make the text more prominent.
* **Fixed Image Position**: Check this option to keep the background image fixed as the page scrolls, adding to the visual effect.
### Addable Blocks
* **Description**: Used to briefly explain to visitors why they should subscribe to your email list.
* **Title**: Set a title for the email subscription form, such as "Subscribe to Our Newsletter."
* **Text Content**: Provide more detailed information or benefits of subscribing, encouraging visitors to enter their email addresses.
* **Email Form**: The main subscription form area where visitors can enter their email addresses to subscribe.
* **Social List**: Add social media icons with links to encourage visitors to follow you on different platforms.
### Usage Considerations
* **Background Image Selection**: Choose a background image that matches the overall style of the page and adjust the opacity to ensure that the subscription form’s text is clearly visible.
* **Color Scheme Coordination**: Ensure that the color scheme of the subscription form aligns with the overall page design to avoid color conflicts.
* **Test the Subscription Form**: Test the subscription form before publishing to ensure all fields and functionalities are working correctly.
### Common Issues
* **Background Image Not Clear or Affects Readability**: Try adjusting the image opacity or use an image with higher contrast.
* **Subscription Form Not Aligned or Displaying Incorrectly**: Check the "Text Alignment" options to ensure the correct alignment is selected.
# Text with icons
The Icon Text section allows users to add multiple content items on the page, each featuring an icon, title, and description. This section is suitable for showcasing services, product features, or any content that benefits from a combination of text and icons. It adapts to both desktop and mobile displays to ensure a consistent user experience.
### Configuration Options
1. **Color Scheme**
* **Purpose**: Choose the overall color scheme for the section to match the design of other parts of the page.
* **Note**: To modify the colors across all templates, go to template settings.
2. **Number of Columns (Desktop)**
* **Purpose**: Set the number of columns to display on desktop, with a maximum of 4 columns.
* **Note**: Ensure the number of columns fits your content layout requirements.
3. **Text Alignment**
* **Purpose**: Set the alignment of the text, with options for left, center, or right alignment.
4. **Enable Icon Wrapping**
* **Purpose**: Choose whether to enable icon wrapping, which tightly associates the icon with the title and description content.
5. **Icon Size**
* **Purpose**: Set the display size of the icon, with options for small, medium, or large.
6. Mobile Settings
* **Mobile Layout**
* **Purpose**: Choose the layout for mobile display: Grid or Carousel. The Grid layout arranges icons and text in columns, while the Carousel layout displays content as a slider.
* **Show Pagination Dots**
* **Purpose**: When selecting the Carousel layout, choose whether to show pagination dots to help users understand their current position.
* **Hide Description on Mobile**
* **Purpose**: Check this option to hide the description content on mobile devices, displaying only the icon and title.
### **Mobile Layout**
* **Purpose**: Choose the layout for mobile display: Grid or Carousel. The Grid layout arranges icons and text in columns, while the Carousel layout displays content as a slider.
1. **Show Pagination Dots**
* **Purpose**: When selecting the Carousel layout, choose whether to show pagination dots to help users understand their current position.
2. **Hide Description on Mobile**
* **Purpose**: Check this option to hide the description content on mobile devices, displaying only the icon and title.
### Block Unit Settings
* **Icon Text**
* **Icon**: Select an appropriate icon to represent the current content. You can choose from system-provided icons or upload custom icons.
* **Image**: Upload or select an image to serve as the visual element for the current block, enhancing content expression.
* **Title**: Add a title to the current block to summarize the content's main idea.
* **Description**: Add detailed text to further explain the content covered by the title.
### Usage Considerations
* **Mobile Layout Selection**: Choose an appropriate mobile layout based on user access data. If most users access through mobile devices, the Carousel layout might offer a better user experience.
* **Icon and Text Coordination**: Ensure that icons are clearly related to the text content to avoid using ambiguous or unrelated icons.
### Common Issues
* **Icon Not Displaying**: Check if the icon file is uploaded correctly and ensure the icon size setting is appropriate.
* **Content Display Issues on Mobile**: Try adjusting the mobile layout and hiding the description option to improve the display.
# Logo list
The Logo List section is used to display a series of brand or partner logos, commonly for showcasing affiliated brands or trademarks. Through various settings, you can customize the style of the Logo List to match the overall website design.
### Configuration Options
1. **Section Title Settings**
* **Show Section Title**
* **Purpose**: Enabling this option will display a title at the top of the Logo List.
* **Configuration**: Enter a custom title as needed, such as "Our Partners."
* **Title**
* **Purpose**: Set the title for the Logo List section.
* **Configuration**: Enter the text for the title.
* **Description**
* **Purpose**: Add a description to the Logo List section to provide further explanation.
* **Configuration**: Enter specific descriptive text in the description area.
* **Watermark Background Text**
* **Purpose**: Add watermark text to the background, typically for branding purposes.
* **Configuration**: Enter the text to be displayed as a watermark.
* **Button Text**
* **Purpose**: Set the text for an action button, often used to prompt user interaction.
* **Configuration**: Enter the text displayed on the button, such as “Learn More.”
* **Button Link**
* **Purpose**: Set the URL for the button to link to a specific page when clicked.
* **Configuration**: Paste the URL or enter search keywords to select the link.
* **Button Style**
* **Purpose**: Choose the style of the button, differentiated as primary or secondary.
* **Configuration**: Select either “Primary” or “Secondary” button style.
2. **Content Settings**
* **Enable Grayscale**
* **Purpose**: Display the logos in grayscale to enhance visual effect.
* **Configuration**: Check this option to enable grayscale.
* **Enable Spotlight Effect**
* **Purpose**: Apply a spotlight effect to grayscale images that highlights the image when hovered over.
* **Configuration**: Check this option to activate the spotlight effect after enabling grayscale.
* **Light Interval**
* **Purpose**: Set the frequency of the spotlight effect in seconds.
* **Configuration**: Adjust the interval time using a slider.
### Usage Considerations
* **Grayscale and Spotlight Effects**: After enabling grayscale, decide whether to activate the spotlight effect to provide a more dynamic visual experience during user interaction.
* **Watermark Background Text**: Ensure the contrast between the watermark text and background image is sufficient for readability.
* **Button Link**: Verify the accuracy of the button link address to avoid redirecting users to incorrect pages.
### Common Issues
* **Spotlight Effect Not Working**: Confirm that the grayscale option is enabled, as the spotlight effect will not work otherwise.
* **Logo Appears Blurry**: Check if the uploaded logo images are of high resolution to ensure they display clearly on the page.
* **Button Not Clickable**: Ensure that the button link is correctly configured and check if other elements are obstructing the button area.
# Contact form
The Contact Form section helps store customers easily reach out to the business. This section allows for the addition of a contact form and related contact information, such as address, phone number, and email. It is suitable for display on a store's contact page or homepage, making it easy for users to obtain contact details quickly.
### Configuration Options
1. **Form Title Settings**
* **Form Title**
* **Purpose**: Set the title for the form, such as “Get in Touch.”
* **Form Description**
* **Purpose**: Provide a brief description introducing the form’s purpose or offering instructions for filling it out.
* **Show Phone Number Field**
* **Purpose**: Check this option to add a phone number input field to the form.
* **Form Priority**
* **Purpose**: Check this option to make the form appear first when the page loads.
2. **Additional Contact Information**
* **Contact Address**
* **Purpose**: Enter the business’s physical address to help customers locate the business.
* **Phone Number**
* **Purpose**: Enter the business’s phone number so customers can contact the business by phone.
* **Contact Email**
* **Purpose**: Provide an email address for customers to reach the business via email.
* **Business Hours**
* **Purpose**: Enter the business’s operating hours so customers know when they can contact or visit.
3. **Social Options**
* **Show Social Media**
* **Purpose**: Check this option to display the business’s social media icons.
* **Social Media Style**
* **Purpose**: Choose the style for social media icons. Options include “Icon,” “Border,” and “Wrap,” to match the store’s visual style.
### Usage Considerations
* **Accuracy of Form Content**: Ensure that the contact information and business hours are accurate so that customers can effectively reach the business.
* **Validity of Social Links**: If social media icons are enabled, make sure each icon is correctly linked to the corresponding social media page.
* **Clarity of Form Description**: The description provided should be clear and to the point, helping customers quickly understand the form’s purpose.
### Common Issues
* **Form Fields Not Displaying**: Ensure that options like “Show Phone Number Field” and “Form Priority” are checked to display all form fields correctly.
* **Social Media Icon Style Mismatch**: If the social media icon style does not match the overall design, adjust the social style settings to select a style that fits the overall design.
# FAQs
The Frequently Asked Questions (FAQ) section is designed to display common questions and their answers, helping customers quickly find the information they need and reducing repetitive customer service inquiries. This section can display multiple questions and answers in a clear, organized manner, and provides primary and secondary action buttons to enhance the customer experience.
### Configuration Options
1. **Color Scheme**
* **Color Scheme**
* **Purpose**: Choose the overall color scheme for the section to ensure consistency with the website’s design style.
2. **Title**
* **Title**
* **Purpose**: Add a title for the FAQ section, such as “Frequently Asked Questions.”
* **Description**
* **Purpose**: Add a brief description to help users understand the purpose or content of this section.
3. **Content Settings**
* **Open First FAQ Item**
* **Purpose**: Check this option to have the first FAQ item expanded by default when the page loads.
* **Show Order Numbers**
* **Purpose**: Check this option to display order numbers for each FAQ item, making it easier for users to identify and reference questions.
4. **Primary Button**
* **Icon**
* **Purpose**: Choose an icon for the primary button, such as “Chat” or another suitable icon.
* **Button Text**
* **Purpose**: Set the text for the primary button, such as “Contact Us.” Leave this field empty to hide the primary button if not needed.
* **Button Link**
* **Purpose**: Add a link or search path for the button, so customers are directed to the relevant page when clicked.
5. **Secondary Button**
* **Icon**
* **Purpose**: Choose an icon for the secondary button, such as “Phone” or another suitable icon.
* **Button Text**
* **Purpose**: Set the text for the secondary button, such as “Call Us.” Leave this field empty to hide the secondary button if not needed.
* **Button Link**
* **Purpose**: Add a link or search path for the button, so customers are directed to the relevant page when clicked.
### **Unit Block Settings**
* **Question:Purpose**: Enter the text for each frequently asked question, such as “How can I contact customer support?”
* **Answer:Purpose**: Provide detailed answers to the questions, ensuring the content is clear and accurate.
* **Page Content:Purpose**: Display content from the selected page, which takes priority over the answer input field.
The FAQ page can significantly improve search engine rankings by covering more keywords, enhancing page authority, improving user experience and page dwell time, and increasing internal links.
### Usage Suggestions
* Use natural long-tail keywords.
* Focus on user search intent.
* Use clear and concise titles.
* Regularly update content.
* Add internal links.
### Common Issues
* **FAQ Items Not Expanding:Solution**: Ensure the “Open First FAQ Item” option is correctly configured and check if JavaScript is running properly.
* **Button Links Not Working:Solution**: Verify that the correct link or search path is entered in the button link fields.
# Multicolumn
The **multi-column block** is used to create multiple column blocks on a page, with each block displaying an image, title, descriptive text, and a button. It is suitable for showcasing products, services, or blog content. Users can customize the content and layout of each column block.
### **Configuration Options:**
#### **Section Header Settings**
\| Setting ID | Description
# Image comparison banner
The image comparison banner is used to display two different images, allowing users to compare the differences between them by sliding. This feature is ideal for showcasing "before and after" effects, such as product upgrades, renovations, or cleaning results.
### **Configuration Options:**
1. **Enable Full Width**
* Purpose: When enabled, the banner will occupy the full width of the page, providing a more impactful visual effect.
2. **Image Height**
* Purpose: Set the height of the banner image in pixels to adjust the visual size of the banner.
3. **Comparison Direction**
* Purpose: Choose the direction of image comparison.
* Horizontal Comparison: Slide left and right to compare images.
* Vertical Comparison: Slide up and down to compare images.
### **Before Settings:**
1. **Before Image**:
* Usage: Upload or select the image for the "before" comparison. This image will appear on one side of the slider.
2. **Before Title**:
* Usage: Add a title for the "before" image, such as "Before."
* **Title Color**: Set the title color to ensure it is clearly visible on the image.
### **After Settings**
1. **After Image**:
* Usage: Upload or select the image for the "after" comparison. This image will appear on the other side of the slider.
2. **After Title**:
* Usage: Add a title for the "after" image, such as "After."
* **Title Color**: Set the title color to ensure it is clearly visible on the image.
### **Usage Notes:**
* **Image Selection**: Ensure that the uploaded images have the same resolution and aspect ratio for the best comparison effect.
* **Title Color**: When selecting the title color, it is recommended to choose a color that contrasts with the image background to enhance readability.
### **Common Issues:**
1. **Comparison Slider Not Working**: Ensure the images are correctly uploaded and that the browser supports the related functionality.
2. **Title Not Clear**: You may need to adjust the title color or choose more suitable images.
# Image hotspots banner
The **image hotspot banner module** is used to mark specific product hotspots on an image and provide quick links to guide users to view those products. This feature is particularly useful for displaying scene images with multiple products, allowing users to click on hotspots to directly navigate to the relevant product detail pages.
### **Configuration Options:**
1. **Enable Full Width**
* Purpose: When enabled, the banner will occupy the full width of the page, creating a more impactful visual effect.
2. **Background Image**
* Purpose: Set the background image for the banner, which serves as the base for displaying hotspots.
3. **Automatically Open the First Hotspot**
* Purpose: If this option is enabled, the first hotspot will automatically open when the page loads, displaying the associated product information.
* Note: If not enabled, users need to manually click on the hotspots to view the related information.
4. **Image Ratio**
* Purpose: Set the display ratio for the background image.
* Options:
* Square
* Portrait
* Panorama
### **Hotspot Unit Settings:**
Each hotspot can be positioned on the image and linked to a product. Up to 5 hotspots can be added.
* **Vertical Position**:
* Usage: Adjust the vertical position of the hotspot on the image.
* Action: Adjust the position percentage using a slider.
* **Horizontal Position**:
* Usage: Adjust the horizontal position of the hotspot on the image.
* Action: Adjust the position percentage using a slider.
* **Select Product**:
* Usage: Choose the product associated with the hotspot. When the user clicks the hotspot, they will be redirected to the product page.
* Action: Click the "Select Product" button and choose the product from the product selector popup.
### **Usage Notes:**
* **Hotspot Positioning**: The hotspot position should be adjusted according to the actual product's location in the background image to ensure users can accurately locate the relevant product when clicking the hotspot.
* **Image Selection**: The background image should be clear and visually guiding, making it easy for users to spot the hotspots.
* **SEO Optimization**: Ensure that detailed and relevant product descriptions are filled out on the product pages linked to the hotspots to improve search engine optimization (SEO).
### **Common Issues:**
* **Hotspot Misalignment**: If the hotspot appears in the wrong location, adjust the vertical and horizontal position percentages to align the hotspot with the correct product position.
* **Exceeding Hotspot Limit**: The module supports a maximum of 5 hotspots. Ensure the number of hotspots stays within this limit. If more hotspots are needed, consider splitting the image or reorganizing the display content.
# Map
The **map banner module** allows you to display a banner containing either an image or an embedded Google Map on a webpage, suitable for use on contact pages or location display pages.
### **Configuration Options:**
* **Enable Full Width:**
* Purpose: Choose whether the map banner should display in full width on the page.
* **Banner Height:**
* Purpose: Set the display height of the banner.
* Options:
* Small
* Medium
* Large
* **Map Image:**
* Purpose: When Google Map embed code is not provided, the map image will be used as a fallback display.
* Action: Click the "Select Image" button to upload or select an existing image.
* **Google Map Embed Code:**
* Purpose: Embed a Google Map into the banner to provide an interactive map feature.
* Action: Paste the embed code from Google Maps into this text box, using the \ format.
* **How to Get the Embed Code:**
1. Open [Google Maps](https://www.google.com/maps/).
2. Find the address or location you want to embed.
3. Click the "Share" button on the left side of the page, then select "Embed map."
4. Copy the provided iframe code and paste it here.
### **Usage Notes:**
* **Priority**: If Google Map embed code is added, the map image will be ignored, and the embedded Google Map will be displayed.
* **Embed Code Format**: Ensure the embed code is in complete iframe format, or the map may not display correctly.
* **Fallback Image**: When the Google Map embed code is unavailable or fails to load, the fallback image will serve as a static map display, ensuring users can still view your location.
### **Common Issues:**
* **Map Not Displaying**: If the map does not appear, check whether the embed code is correctly pasted and that it is enclosed in iframe tags.
* **Image Not Displaying**: If both embed code and an image are added, the embedded map will take priority. The image will only display if the embed code is removed.
# Featured collection
The **Featured Collection Section** allows merchants to showcase specific product collections by setting collection images, titles, and product card layouts, effectively enhancing the visual impact and display efficiency. This section supports custom collection content, carousel functionality, color schemes, and layout options to ensure a consistent user experience on both desktop and mobile devices, helping to increase user engagement and sales.
### Detailed Instructions
**1. Collection Image Settings**
* **Display Collection Image:** Check this option to enable the display of collection images, enhancing the section’s visual appeal.
* **Color Scheme:** Select an appropriate color scheme for the collection image background and text to improve the display effect.
* **Collection Image Position (Desktop):** Choose the position of the collection image on desktop, either left or right.
* **Image Upload:** Click the "Select Image" button to upload or browse available images to use as the main collection image.
* **Collection Image Opacity:** Adjust the opacity slider to control the transparency of the image according to different visual needs.
* **Custom Collection Title:** Enter a custom collection title; if not set, the default title will be used.
* **Title Uppercase:** Check this option to display the collection title in uppercase for greater prominence.
**2. Content Settings**
* **Select Collection:** Choose the product collection to display from the dropdown menu.
* **Number of Products Displayed:** Use the slider to set the number of products displayed in the featured collection.
* **Desktop Carousel Settings:** Enable the carousel function to display the collection in a carousel format on desktop.
* **Navigation Buttons:** Enable navigation buttons to help users browse the product collection easily on desktop.
* **Pagination Dots:** Enable pagination dots so users can navigate between product sets.
**3. Product Card Settings**
* **Image Ratio:** Choose the image ratio for product cards, either square or portrait, to align with the overall design.
* **Content Wrap:** Enable this option to wrap content within the product cards for a more compact display.
* **Content Wrap Color Scheme:** Select a suitable color scheme for the content wrap’s background and text.
* **Text Alignment:** Set the alignment of text within the product cards, choosing between left, center, or right alignment.
**4. Mobile Settings**
* **Enable Mobile Carousel:** Ensure the carousel function is also enabled for mobile, enhancing the mobile user browsing experience.
### Usage Suggestions
**1. Visual Consistency**
* Choose images and color schemes that match the brand's visual identity to ensure that the collection display aligns with the brand image, increasing user recognition.
* Make good use of the image opacity feature to enhance contrast between images and text, making the titles and descriptions stand out.
**2. Collection Image Selection**
* The collection image should relate to the product collection and convey the product features, attracting user attention. For example, use images showcasing key products or product scenarios.
* Ensure high-quality images with sufficient clarity to display well on both desktop and mobile.
**3. Product Quantity Control**
* It is recommended to limit the number of displayed products to a reasonable range (e.g., 6 to 10) to avoid overwhelming users and causing browsing fatigue.
* If the collection contains many products, enabling the carousel function can improve page efficiency while enhancing the browsing experience.
**4. Mobile Friendliness**
* As mobile screens are smaller, enabling the carousel and pagination dots can better display the collection, making it easier for users to browse.
* Test the appearance of images and text on mobile to avoid layout issues caused by long text or improper image ratios.
**5. Navigation and User Experience**
* Enable navigation buttons on desktop, allowing users to quickly switch between product collections, improving usability and interactivity.
* For special promotions or limited products, highlight relevant information in the collection title and description to increase purchasing interest.
**6. Content Richness**
* Use the content wrap feature in product cards to display detailed product information, helping users better understand the product’s features and benefits, thereby increasing conversion rates.
* Flexibly use text and content alignment features to make product card layouts more aesthetically pleasing and organized, enhancing the visual comfort for users.
# Featured product
The Featured Product Section can be used to showcase a single product along with its related details and media resources. Through this section, users can prominently display important items and customize the product layout, media configuration, and interactive features on the page to attract consumer attention.
### Key Features
1. **Media Settings**: Allows for fixed media on desktop and includes a carousel layout with side thumbnails. Users can also customize the size, padding, and position of the media.
2. **Hide Media Files**: Provides the option to hide specific media files on desktop or mobile as needed, offering flexible display options.
3. **Video Looping**: When enabled, videos in the media section will automatically loop, enhancing the user experience.
4. **Share Functionality**: Products can be shared via social platforms, allowing users to interact with friends and increase product exposure.
### Customizable Blocks
The Featured Product Section supports various customizable blocks to enrich product page content. Available blocks include:
* Custom Liquid
* Countdown Timer
* Image
* Divider
* Text
* Heading
* Price
* SKU (Stock Keeping Unit)
* Inventory Notification
* Variant Selector
* Buy Button
* Product Description
* Popup
### Usage Recommendations
1. **Combine Carousel and Thumbnails**: When displaying multiple product images, it’s recommended to enable a desktop carousel with side thumbnails, allowing users to quickly browse different product views, enhancing the shopping experience.
2. **Enable Social Sharing**: Activate the share feature so users can share their favorite products on social platforms, expanding the product’s reach and increasing visibility.
3. **Hide Unnecessary Media Files**: To keep the page clean and focused, selectively hide certain media files based on the design requirements.
4. **Video to Boost Interaction**: Add video content for the product and enable video looping to create more interactive engagement and provide a more vivid product display.
# Collection list
The Product Series List Module is a powerful tool for showcasing multiple product series. By configuring various images, titles, and display styles, merchants can present product series on the homepage or other pages, guiding users to view and purchase items from different series. This module supports carousel, navigation buttons, and other features to enhance the user experience.
### Configuration Guide
**1. Section Title Settings**
\| Setting ID | Description
# Custom liquid
The **Custom Liquid Module** allows merchants to add Liquid code snippets to achieve more customized functionality. This module is highly flexible, enabling the insertion of custom logic, dynamic content, or advanced features that can't be accomplished through standard configurations.
### Configuration Guide
**1. Liquid Code Input**
* **Liquid Code**: Enter your custom Liquid code in the text box provided. Using Liquid, you can dynamically render content, interact with backend data, or implement specific business logic.
* For example, Liquid can be used to display specific products, generate dynamic content, or pull Shopify data.
* It is recommended to have a basic understanding of Liquid to ensure code accuracy.
**2. Color Scheme**
* **Color Scheme**: Choose a color scheme for this custom module. This option is designed to align with the overall page design for visual consistency.
* Click "Edit" to customize the color scheme.
* The color settings will affect the module's text, background, and other styles, so it's recommended to match them with the rest of the page.
### Usage Recommendations
1. **Ensure Code Accuracy**:
* When writing custom Liquid code, make sure it follows Shopify's Liquid syntax standards to avoid display errors.
* Test your code in a development environment or code editor to ensure it works correctly before applying it to your live page.
2. **Leverage Custom Page Features**:
* With Liquid, you can create dynamic displays like product showcases, promotional events, or personalized content for users.
* Make use of Liquid’s data interaction capabilities to deeply integrate with your Shopify store's database.
3. **Appropriate Use of Color Schemes**:
* Choose the right color scheme to ensure that the custom Liquid content blends well with the overall page design, improving user experience and visual appeal.
4. **Combine with Other Modules**:
* The Custom Liquid Module can complement other page modules to enhance interactivity and flexibility.
* Use it to provide personalized services, such as dynamic product recommendations or customized user information displays.
5. **Optimize Code Performance**:
* Avoid using complex loops or nested operations in Liquid code, especially when working with large data sets.
* Ensure the page load speed is not negatively impacted by the code, keeping the user experience smooth.
# Composite display
The **Composite Display Module** allows users to combine different types of content into one area for display. You can showcase products, images, videos, and rich text all in a single section. This feature helps merchants create more diverse and dynamic page layouts, enhancing the user experience.
### Feature Overview
The Composite Display Module supports the following content types:
* **Products**: Display one or more products from the store.
* **Images**: Insert and display images in various formats.
* **Videos**: Embed local videos.
* **Rich Text**: Insert custom text content with basic formatting options such as bold, italic, links, etc.
### Steps to Add and Configure
**1. Add the Composite Display Module**
In the page editor, locate the “Composite Display” option and click the “Add Block” button. A module selection window will appear, where you can choose to add an image, video, product, or rich text block.
**2. Configure Each Content Block**
* **Image Block**
* **Upload Image**: Click the “Select Image” button to upload or choose an existing image.
* **Custom Image Size**: Adjust the size and aspect ratio of the image to match the overall page design.
* **Video Block**
* **Video Source**: Upload local video files.
* **Video Settings**: Configure options like autoplay and loop playback.
* **Product Block**
* **Select Product**: Click the “Select Product” button to choose products from the store's product list.
* **Product Display Options**: Choose whether to display details such as product price and stock status.
* **Rich Text Block**
* **Custom Text**: Enter the desired text in the rich text block. Supports various formatting options and hyperlinks.
### Usage Recommendations
1. **Enhance Page Interactivity**:
* By mixing images, videos, products, and text, you provide users with a rich visual and content experience. This helps grab attention and encourages users to explore the page further.
2. **Tell Your Brand Story**:
* Combining rich text with images and videos helps merchants tell their brand story or convey specific marketing messages, increasing emotional resonance with the brand.
3. **Product Recommendations**:
* Use the product block alongside the rich text block to embed product recommendations within a narrative or story, guiding users toward making a purchase.
4. **Flexible Layout Design**:
* The Composite Display Module offers significant layout flexibility, allowing merchants to combine various content types as needed to meet different page design requirements.
5. **Maintain Visual Consistency**:
* When adding multiple blocks, ensure consistency in the style and size of images and videos to maintain a cohesive visual experience that enhances user satisfaction.
### Best Practices
* **Avoid Overcrowding**: While it's possible to combine many content types, it’s recommended not to overload one area with too many blocks. Overcrowding may make the page look cluttered and negatively impact readability and user experience.
* **Optimize Content for Target Audiences**: The Composite Display Module is ideal for showcasing new products, promotional items, or brand-related content. Adjust the displayed content dynamically according to specific marketing goals and audience preferences.
# Confetti trigger
The **Confetti Trigger** is a tool designed to add dynamic effects to a webpage. It allows users to create animated confetti effects at specific locations on the page, enhancing interaction and fun. This feature is particularly useful for promotional events, holidays, and special celebrations, capturing visitor attention effectively.
### Feature Description
**1. Trigger Location Settings**
Confetti effects can be triggered in different areas of the page. You can choose from the following locations:
* **Top of the Page**: The confetti effect is triggered when the user loads or scrolls to the top of the page.
* **Middle of the Page**: Trigger the effect when the user scrolls to the middle section of the page.
* **Bottom of the Page**: The confetti effect is triggered when the user reaches the bottom of the page.
**2. Effect Options**
There are various confetti effects available, allowing you to choose the best fit for your event:
* **Cannon**: Simulates a celebratory cannon, suitable for occasions like product launches or major celebrations.
* **Fireworks**: A colorful firework effect, ideal for holiday celebrations.
* **School Celebration**: Mimics a lively campus celebration, adding a playful atmosphere.
* **Dancing Ribbons**: Creates a floating ribbon effect, bringing a soft, elegant feel to the page.
**3. Additional Settings**
* **Trigger Only Once**: When enabled, the confetti effect will only trigger once per page visit, avoiding repeated activations that could distract users.
### Usage Suggestions
1. **Pair with Promotions and Events**:\
Use the confetti trigger during promotions or festive events to create a joyful atmosphere, enhancing user engagement and encouraging purchases.
2. **Trigger on Page Load**:\
You can set the confetti effect to trigger at the top of the page, immediately grabbing visitors’ attention as they enter the site.
3. **Scroll-Based Interaction**:\
Set the confetti effect to trigger when users scroll to the middle or bottom of the page, encouraging them to explore more of the content and increasing time spent on the site.
4. **Use Moderately**:\
Avoid overusing the confetti effect on the same page, as too many dynamic animations might distract users and negatively impact their browsing experience.
The **Confetti Trigger** is a simple yet effective tool for adding festive or event-related animations to your website, helping to increase user engagement and satisfaction.
# Custom section header
The Custom section header feature allows users to flexibly configure titles, descriptions, and buttons, helping personalize the content display based on specific needs. By setting a title, description, watermark, and button, you can provide clear guidance or display information for different sections of the page.
#### Feature Overview
**1. Title Settings**
* **Title**: Set a custom title for the block to summarize the main theme of the section.
* **Description**: Enter a specific description to help users understand the function or purpose of the block.
* **Watermark Background Text**: This optional setting allows you to add content that will appear as a watermark in the block’s background, often used for aesthetic purposes or subtle hints.
**2. Button Settings**
* **Button Text**: Set the text displayed on the button, such as "View More" or "Learn More," to guide users to take a specific action.
* **Button Link**: Add a link or a search URL to the button so that users are redirected to a designated page when clicked.
* **Hide Button**: If a button is not needed, you can leave the field empty to hide it from the display.
#### Usage Suggestions
1. **Enhance Visual Guidance**:\
Use clear and prominent titles and descriptions to give users a better understanding of the content presented in the block. Watermark background text can be used for brand slogans or promotional messages to improve the overall visual impact.
2. **Increase Page Interactivity**:\
Set appropriate button text and links to direct users to product detail pages or promotional sections, increasing engagement and conversion rates.
3. **Block Segmentation**:\
Utilize custom block titles in different sections of the page to improve readability and ensure clear content categorization, helping users quickly locate the information they need.
4. **Brand Promotion**:\
If the page is for brand promotion, consider adding the brand slogan or promotional details as watermark background text, enhancing brand visibility.
# Quote
The Quote section allows you to highlight impactful statements or testimonials, with options to include the author’s name, role, and photo, providing an authentic and personalized touch to your website. This feature is ideal for showcasing customer testimonials, expert opinions, or any key messages that reinforce your brand values.
**How to Use**
1. **Color Scheme**
* Select your preferred color scheme. You can edit the overall color template in the "Theme Settings."
2. **Content Settings**
* **Quote Content**: Enter the text of the quote you wish to display. This is the main highlight of the section.
* **Author Name**: Input the name of the person being quoted.
* **Author Role**: Specify the role or position of the author, which adds credibility to the quote.
* **Author Image**: Upload a picture of the author to make the quote more relatable and trustworthy.
**Best Practices**
* Choose quotes that align with your brand's message and values.
* Use authentic testimonials or statements to build credibility.
* Ensure the author’s image is of high quality and represents the brand's professionalism.
This feature can effectively add depth and authenticity to your website, making it more engaging for visitors.
# Testimonials
The **Customer Reviews Block** is designed to showcase customer feedback and reviews, enhancing trust among potential customers and encouraging purchasing decisions. This block allows for customizable titles, descriptions, images, and star rating colors for a tailored visual presentation.
#### Key Features
1. **Customizable Block Title and Description**: Allows you to input custom titles and descriptions, making it adaptable for various scenarios.
2. **Watermark Background Text**: Add background watermark text to enhance the visual appeal of the block.
3. **Custom Star Colors**: You can customize the color of the star ratings to align with your brand’s color scheme.
4. **Scroll Speed Settings**: Adjust the speed of the customer review scrolling (distance moved per second), offering different visual experiences.
5. **Image Support**: Enables the addition of images alongside customer reviews, enhancing the visual appeal and impact.
6. **Auto Scroll**: When there are enough customer reviews, the block can enable auto-scroll, allowing reviews to be displayed in a continuous loop.
7. **Color Scheme Options**: Choose and edit multiple color schemes to match the overall design of the website.
#### Usage Suggestions
* **Enhance Content Richness**: Add a sufficient number of customer reviews to activate the auto-scroll function. Reviews can include both text and images to give users a comprehensive understanding of the product experience.
* **Pair Images with Reviews**: For each customer review, include relevant images to make the reviews more tangible and credible.
* **Star Rating Display**: Customize the star rating colors to enhance the visual appeal of the block, helping build trust through high customer ratings.
* **Regular Updates**: To maintain relevance, periodically update the review content, ensuring that the most recent feedback and experiences are displayed.
This block provides a dynamic and engaging way to feature customer testimonials, creating trust and supporting customer decision-making.
# Shop the feed
The **Shop the Feed** section integrates social media content with e-commerce functionality to create an immersive shopping experience. It supports displaying accounts from major social media platforms as well as custom-uploaded images or videos., with embedded product links to drive conversions.
### 🎯 Key Features
* Upload and display social media images and videos.
* When the **Floating Window** is enabled, users can swipe through content vertically, similar to TikTok or Instagram Reels.
* Videos support sound playback.
* Each feed item can include a product with a purchase option directly within the content.
***
### ⚙️ Configuration Options
#### 🎨 Color Scheme
* Customize background, text, and button colors to match your site's branding.
#### 🪟 Floating Window
* When enabled, clicking on an image or video opens a floating window at the bottom-right corner of the page.
* Users can swipe vertically to switch between content for an immersive browsing experience.
#### 📝 Titles and Descriptions
* Add **subtitles, main titles, and descriptions** to help users better understand the featured content.
#### 👤 Social Information
* When enabled, displays **profile avatar, display name, and username** from the social media account associated with the content.
#### 🔗 Follow Button Settings
* Add “Follow” or “Visit” buttons linking to social media profiles.
* Supported platforms: `Facebook`, `Instagram`, `Twitter`, `TikTok`, `YouTube`, `LinkedIn`.
* Customize button background color and text color.
#### ⏱️ Slider Settings
* Enable **auto-play** and configure the **interval time** (in seconds) between content transitions.
#### 📏 Section Padding
* Adjust top and bottom padding to ensure smooth visual integration, especially when this section uses a different background color than the main page.
***
### 🧱 Block Setup: Feed Content
Each **feed block** (item) can be configured with the following:
* Upload an image or video.
* Add a product at the bottom of the feed content (with name, price, and purchase button).
* Multiple feed items can be added and sorted for sequential display.
***
### ✅ Suggested Use Cases
* **Homepage or campaign landing pages**, showcasing the connection between social content and products.
* **Brand storytelling or influencer collaboration sections**, enhancing credibility through social proof.
* **Pop-up events or fashion trend sections**, where high interactivity and visual engagement are key.
# Reading Text
The **Reading Text** section is designed to dynamically display slogans, promotional messages, or any rich text content. It features four built-in animation effects that bring your website to life and draw user attention to key information.
***
### 🎯 Overview
* Ideal for showcasing brand taglines, announcements, or campaign highlights.
* Includes **four animation styles** for engaging and lively text presentation.
* Flexible configuration options for colors, layout, and buttons to match any page design.
***
### ⚙️ Configuration Options
#### 🎨 Color Scheme
* Customize **background color, text color, and button styles** to align with your website's overall theme.
#### 📝 Titles & Descriptions
* Add a **subtitle, main title, and description** to clearly convey your message to users.
#### 🔘 Button Settings
* Add call-to-action buttons linking to campaign pages, featured products, or custom URLs.
* Choose from **solid or secondary button styles**.
* Optionally include an **arrow icon** for enhanced visual guidance.
#### 🎞️ Animation Effects
Choose from four dynamic text animations to create an engaging user experience:
1. **Float in** – Text smoothly enters from different directions.
2. **Deepen** – Text gradually becomes bolder and more prominent.
3. **Change color** – Text transitions from one color to another with a gradient effect.
4. **Cutout** – Text outlines are revealed progressively for a modern, stylized appearance.
**🎨 Color Shift Options:**
* Set distinct **start and end colors**.
* A **gradient blend** will automatically be displayed in the middle area of the text, creating a smooth visual transition.
***
### ✅ Suggested Use Cases
* Presenting brand slogans, mission statements, or introductory messages.
* Highlighting campaign announcements or promotional highlights on landing pages.
* Adding a visually striking section in the middle or footer of a page to reinforce brand identity or drive user actions.
# Image gallery
The image gallery section allows merchants to display multiple images on the page with customizable layout options for each image. By setting the width and height columns of the images, you can create a visually impactful display. This section is suitable for promoting product images, showcasing brand stories, or enhancing the visual atmosphere of the page.
### Key Features
1. **Customizable Image Columns**: Each image can have its own width and height column settings, providing flexible layouts. On desktop, up to **4 width columns** and **2 height columns** are supported, while on mobile, up to **2 width columns** and **4 height columns** are available.
2. **Responsive Design**: The image layout automatically adjusts based on the device (desktop or mobile), ensuring consistent display quality across all screen sizes.
3. **Multiple Image Display**: Upload multiple images to showcase products, brand stories, or other visual elements, creating a rich and engaging media wall.
4. **Image Scaling and Ratio Control**: Control the size and proportions of images by adjusting the column settings, allowing for regular or irregular grid effects.
### Image size recommendations
#### PC
The minimum unit size for PC is recommended to be **400 x 300px .jpg** (width 1/4, height 1/2). Other unit sizes can be calculated based on width and height ratios, such as a unit with a width of 2/4 and height of 2/2, which is recommended to be **800 x 600px .jpg**.
### Mobile
The minimum unit size for mobile is recommended to be **320 x 240px .jpg** (width 1/2, height 1/4). Other unit sizes can be calculated proportionally, such as a unit with a width of 2/2 and height of 2/4, which is recommended to be **640 x 480px .jpg**.
### Usage Suggestions
1. **Use High-Quality, Cohesive Images**: To maintain visual consistency and enhance the overall aesthetic, upload high-quality images with a unified style.
2. **Strategic Column Settings**: By controlling the width and height columns of each image, you can allocate more space to important images or create a visually appealing contrast with varied image sizes.
3. **Brand Storytelling**: Beyond product images, use the media wall to tell your brand’s story, showcase event highlights, or promote new products, increasing brand awareness and engagement.
4. **Optimize for Mobile**: Test the media wall on mobile devices to ensure it looks great. Adjust the column settings for each image to provide the best user experience on all devices.
The Image gallery section provides a dynamic and customizable way to display a wide array of images, enhancing both the visual appeal and the storytelling potential of your site.
### Section settings
| Setting | Type | Description | Default |
| --------------------- | --------- | ------------------- | --------------- |
| **Header** | | | |
| `show_section_header` | Checkbox | Show section header | `true` |
| `heading` | Text | Heading | `Photo gallery` |
| `description` | Rich text | Description | |
| `water_text` | Text | Watermark text | |
| `decorative_icon` | Select | Decorative icon | `none` |
| **Margin** | | | |
| `margin_top` | Range | Top margin | `0px` |
| `margin_bottom` | Range | Bottom margin | `80px` |
### Blocks
The image gallery section uses **Image** blocks to display individual images. You can add up to 8 image blocks.
#### Image
The Image block allows you to add an image with customizable layout, link, and optional title, border, and button.
| Setting | Type | Description | Default |
| ---------------------- | ---------------- | ---------------------- | ------------------------------------------------------------------------------------ |
| **Desktop layout** | | | |
| `columns` | Select | Desktop width columns | `1/4` |
| `rows` | Select | Desktop height columns | `1/2` |
| **Image** | | | |
| `image` | Image picker | Image | |
| `link` | URL | Link | |
| **Border** | | | |
| `show_border` | Checkbox | Show border | `false` |
| `border_color` | Color background | Border color | `linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%)` |
| **Title** | | | |
| `heading` | Text | Heading | |
| `heading_size` | Select | Heading size | `medium` |
| `heading_color` | Color | Heading color | `#FFFFFF` |
| `heading_position` | Select | Heading position | `top-left` |
| `show_button` | Checkbox | Show button | `true` |
| **Mobile layout** | | | |
| `mobile_columns` | Select | Mobile width columns | `1/2` |
| `mobile_rows` | Select | Mobile height columns | `1/4` |
| `image_mobile` | Image picker | Mobile image | |
| `heading_size_mobile` | Select | Mobile heading size | `medium` |
| `heading_color_mobile` | Color | Mobile heading color | `#FFFFFF` |
# Product compare table
The **Product Compare Table** is designed to showcase the attributes and variants of multiple products, helping users quickly understand the differences and advantages of each product. This section allows for custom titles, descriptions, and product selections, and supports displaying variant options (such as color and size). Additionally, you can extend the comparison content by adding **Category Metafields** and **Custom Metafields.**
#### Features
1. **Table Title Settings**:
* **Show/Hide Title**: Option to display or hide the section title.
* **Custom Title and Description**: Define a title and description for the comparison table to help users understand the purpose of the comparison.
* **Watermark Text**: Option to add watermark text in the table background for enhanced visual appeal.
2. **Table Settings**:
* **Product List Selection**: Choose which products to compare by clicking the “Select Products” button to add the products you wish to compare.
* **Display Variant Options**: Control whether to show product variant attributes (such as color, size) in the comparison table, providing users with more detailed information.
3. **Category Metafield Block**:
Category metafields in Shopify are predefined fields designed for specific product categories, enabling merchants to add attributes unique to each category. For instance, the "Mice & Trackballs" category may include fields like Color, Connection Type, and Mouse Technology. These fields streamline product data entry, ensure consistency, and improve the user experience. To clarify, let's take "Connection Type" as an example.\
\
**Attribute Key:** The key value of the category metafield. You can follow these steps to obtain the key:
1. Open the product details page and locate the category metafields settings panel. Find the desired metafield, such as "Connection Type," and click on it to access the metafield definition page.\
2. Click on the indicated area to copy the metafield, such as `shopify.connection-type`. Here, `connection-type` is the attribute key. Note: Do not include the `shopify.` prefix.\
4. **Custom Metafield Block**:
* Custom metafields display attributes defined in the Shopify admin, supporting types like **date**, **money**, **weight**, **rating**, **color**, and **text**. They provide flexibility for comparing product information but do not support list formats. For more details, refer to the [Custom Metafields](https://help.shopify.com/en/manual/custom-data/metafields).
#### Usage Recommendations
* **Optimize Comparison Experience**: Choose products from the same category for comparison to ensure users can better understand the differences between them.
* **Guide User Decision-Making**: Clearly state the purpose and advantages of the comparison table through the title and description sections to help users make informed purchasing decisions.
* **Display Product Variants**: If products have multiple variants (such as colors and sizes), enable “Display Variant Options” to ensure users can clearly see the diversity of each product.
* **Leverage Metafields for Expanded Information**: Use Category Metafields and Custom Metafields to display valuable additional information, such as brand, material, or usage scenarios, to enhance the comparison content.
The Product Comparison Table Block is a powerful tool for providing users with detailed insights into various products, making it easier for them to identify the best option based on their needs.
# Text lens zoom
The section offers a unique visual experience where text content gradually enlarges and eventually disappears as the page scrolls, while the background color becomes increasingly transparent, revealing an image or video underneath. This block is ideal for showcasing brand slogans or captivating first-screen content, enhancing user engagement through dynamic effects.
#### Key Features
1. **Image and Video Display**:
* **Background Options**: Users can upload a background image or choose a video as the background.
* **Visibility**: The image or video will be fully revealed after the scrolling effect ends.
2. **Text Display**:
* **Customizable Slogans and Descriptions**: Allows for custom slogans and text descriptions that grow larger and fade out as the page scrolls.
* **Usage**: Suitable for displaying brand slogans, taglines, or other important messages.
3. **SEO Optimization**:
* **Main Screen Setting**: Supports setting the block as the primary area on the first screen to enhance SEO performance and improve website visibility in search engines.
#### Usage Recommendations
* **Keep Content Concise**:
* Ensure slogans or text are brief and impactful to effectively capture user attention.
* **Choose Appropriate Images or Videos**:
* The background image or video should align with the brand theme and be visually compelling.
* **SEO Optimization**:
* Select the “Set as Main Screen Area” option to boost SEO performance. Ensure content keywords align with your SEO strategy.
#### Considerations
* **Video Format Support**:
* Ensure video file formats are compatible with all major browsers.
* **Background Gradient Effects**:
* Use darker backgrounds to ensure text clarity. The gradual transparency effect will offer a smooth visual transition as the page scrolls.
# Scroll image expand
The section offers a dynamic way to showcase images and content. It allows an initial image to appear smaller, and as users scroll down the page, the image gradually enlarges until it fills the entire screen. Once the image fully expands, a title and button slide in from the bottom, providing a visually engaging opportunity to display content and encourage user interaction.
#### Key Features:
1. **Image Settings**:
* Option to upload and select an image.
* Set the initial image size (small, medium, or large).
2. **Content Settings**:
* Choose a color scheme, allowing for customized colors and visual effects.
* Add a title, description, and button text to display more information and encourage interaction.
* Set a button link to direct users to a specific page upon clicking.
* Optional arrow icon on the button to visually guide users.
3. **Animation Effects**:
* The image enlarges as the page scrolls, eventually becoming full screen.
* The title and button gradually slide in from the bottom of the screen, enhancing interactivity.
#### Usage Suggestions:
* **Visual Appeal**: Use high-quality images and ensure the image content is relevant to your website’s theme.
* **Concise Content**: Keep the title and description clear and concise, ensuring users quickly understand the message once the image fully appears.
* **Enhanced Interaction**: Use buttons to guide users towards further actions (e.g., learn more, shop now), and ensure that the button links are functional.
#### Points to Note:
* Adjust the image size based on the actual layout and content needs to ensure the desired visual effect.
* Combine enough text with visual elements to maintain content engagement and avoid monotony.
# Milestones
The Milestone section is designed to highlight key events, achievements, or stages in your journey or business growth. You can add up to 5 blocks (steps), each representing a significant milestone, with options to customize the title, description, and year for each.
milestones section
**How to Use**
**1. Section Settings**
* **Show Section Title**: Toggle this option to display or hide the main section title.
* **Title**: Enter the main heading for your milestone section (e.g., "Our Journey").
* **Description**: Provide a brief introduction or summary for the milestone section.
* **Watermark Background Text**: Optionally, add a watermark text in the background to enhance the visual design.
**2. Content Settings**
* **Milestone Dot Color**: Choose a color for the milestone dots that appear along the timeline to represent each step.
**3. Block (Step) Settings**
For each block, you can configure the following:
* **Year**: Specify the year for the milestone (e.g., 2021).
* **Description**: Provide a detailed description of the milestone to highlight the significance of that year or event.
You can add up to 5 blocks to create a complete and engaging timeline of your journey.
**Tips**
* Use concise and impactful descriptions for each milestone to maintain reader engagement.
* Choose a dot color that contrasts well with your background to ensure visibility.
* Limit each milestone to a significant achievement to avoid cluttering the section.
# Team
The Team section allows you to showcase your team members with their photos, roles, and social media links. You can add up to 10 team member blocks, each providing detailed information about an individual member.
**Configuration Settings**
1. **Section Header Settings:**
* **Show Section Header:** Toggle to enable or disable the display of the section title.
* **Title:** Enter the title for your team section, e.g., "Our Team."
* **Description:** Provide a description of the team section.
* **Watermark Background Text:** Optionally, add a watermark background text that appears behind the content.
2. **Block (Member) Settings:**
* **Member Image:** Upload a photo of the team member.
* **Member Name:** Enter the name of the team member.
* **Member Role:** Define the member's role, e.g., "Founder & CEO."
* **Social Media Links:**
* **Facebook:** Enter the member’s Facebook profile link.
* **Instagram:** Enter the member’s Instagram profile link.
* **LinkedIn:** Enter the member’s LinkedIn profile link.
**How to Use**
1. Add a new block for each team member by clicking "Add block."
2. Fill in the required information for each member.
3. You can rearrange the blocks to display team members in your preferred order.
**Tips**
* Use high-quality images for the best visual impact.
* Ensure the social media links are accurate and lead to the respective profiles.
* Highlight key members such as founders, managers, and core team members to build trust with your audience.
# Highlight features
The Highlight Showcase section allows you to feature key highlights of a product or service, each with customizable positioning, content, and visuals. You can add up to 5 highlight blocks within this section to focus on specific features or benefits.
**Section Settings**
1. **Content Settings**:
* **Image**: Upload a custom image or select from free images provided.
* **Select Product**: Choose the product related to the highlight.
2. **Highlight Block Settings**:
* **Vertical Position**: Adjusts the vertical placement of the highlight (in percentage).
* **Horizontal Position**: Adjusts the horizontal placement of the highlight (in percentage).
* **Content Settings**:
* **Heading**: Enter a title for the feature.
* **Description**: Provide a detailed description of the feature.
* **Position (Desktop Only)**: Choose whether the highlight text appears on the left or right of the image.
This section is designed to effectively draw attention to multiple product or service features, offering users a visually engaging way to understand the unique aspects of what you offer.
# Steps
The Steps Module is designed to display a series of ordered steps, each containing an image, heading, and description, to guide users through a specific process. This module is ideal for showcasing customization processes or any sequence where users need step-by-step guidance.
**Features**
1. **Image**: Upload an image for each step to provide users with a visual understanding of the current step.
2. **Heading**: Set a concise title for each step to give users a quick overview of the step’s purpose.
3. **Description**: Provide a detailed explanation of each step’s specific information or actions to help users understand and complete it.
**Settings**
1. **Number of Steps**: You can add up to 4 steps (blocks). Each step is an independent block that can be added, edited, or removed as needed.
2. **Order of Steps**: Steps are displayed in the order they are added, ensuring users can follow the intended sequence.
3. **Content Editing**: Customize each step's content through the "Image," "Heading," and "Description" fields, offering a clear and organized guide for users.
**Usage Recommendations**
* **Image Selection**: Use images that are relevant to each step to enhance visual clarity.
* **Concise Headings and Descriptions**: Keep headings brief and to the point. Descriptions can be more detailed but should avoid unnecessary length to ensure easy understanding.
* **Ideal for Complex Processes**: This module is perfect for illustrating product customization, service workflows, or project milestones, helping users understand each step in the process.
# Media wall
The Media Wall module allows you to showcase a dynamic grid of images and videos with product links for each media item. This guide will help you configure and utilize the Media Wall module effectively.
#### Module Overview
* **Purpose**: Display a selection of media items (images or videos) that can link directly to products, creating an engaging and interactive visual display.
* **Max Blocks**: You can add up to 10 media blocks within this module.
#### Block Types
1. **Image Block**
* **Settings**:
* **Image**: Upload an image or select from free images.
* **Select Product**: Link a specific product to the image for easy navigation.
2. **Video Block**
* **Settings**:
* **Video**: Upload a video or link an existing one.
* **Select Product**: Link a specific product to the video for product-focused engagement.
#### Slider Settings
Customize the behavior and appearance of the media wall as a slider:
* **Enable Slider Overlay**: Adds an overlay to the media for a cohesive look.
* **Enable Auto Rotate**: Automatically cycles through media items.
* **Auto Rotate Speed**: Adjust the speed of rotation (in seconds).
* **Show Navigation Buttons**: Adds navigation arrows (effective on desktop).
* **Show Pagination Dots**: Adds dots to indicate slide positions.
#### Recommended Usage Tips
* Use high-quality images and videos to maintain visual appeal.
* Ensure each media block links to relevant products to drive user engagement.
* Experiment with overlay and auto-rotate settings for an optimal user experience.
This setup provides a visually rich and product-linked media wall to enhance the browsing experience on your site.
# Popups
# Event popup
The **Event Popup Section** is designed to display specific promotional or important notification information to users when the page loads. It can include images, countdowns, text descriptions, social media links, and more, helping merchants effectively communicate promotions or critical updates.
#### Key Features and Settings:
1. **Disable for Logged-in Users**:
* When selected, logged-in users will not see the popup. This option is not available in edit mode.
2. **Delay Time**:
* Set the number of seconds after page load when the popup appears. This feature is unavailable in edit mode.
3. **Display Frequency**:
* Configure how often the popup appears, such as every visit or once every 7 days.
4. **Color Scheme**:
* Choose and edit the popup’s color scheme to match the overall style of the website.
5. **Text Alignment**:
* Adjust the text alignment within the popup (left, center, or right) to suit different design needs.
6. **Image Settings**:
* Upload and set the image displayed within the popup. You can adjust the image’s transparency and positioning.
#### Block Types You Can Add:
* **Title**: Set the popup’s title with customizable text styles.
* **Text**: Add detailed explanations or descriptions in rich text format.
* **Discount Code**: Display a specific discount code to users.
* **Countdown**: Add a countdown to show the time remaining until the event or promotion ends.
* **Subscription Form**: Include a form for users to subscribe, making it easier to collect email addresses.
* **Social Media List**: Display social media icons to encourage users to follow your social media accounts.
* **Button**: Add a clickable button with customizable text and link settings.
This popup section can be a powerful tool for increasing user engagement, promoting offers, and building a direct communication channel with your audience.
# Age verification popup
The **Age Verification Popup** is designed to ensure that users accessing the website meet the legal age requirement to view certain content. This feature is particularly important for stores selling age-restricted products.
#### Configuration Options:
1. **Enable Debug Mode**:
* **Purpose**: Forces the age verification popup to display on every page refresh in edit mode for testing purposes.
* **Note**: Make sure to disable debug mode when publishing the store to avoid forcing the popup in the live environment.
2. **Background Settings**:
* **Background Color**: Select the background color for the popup (in hexadecimal color code).
* **Background Image**: Upload or choose an image to set as the popup background.
* **Background Blur**: Enable this option to blur the background image, drawing more attention to the popup content.
3. **Content Settings**:
* **Color Scheme**: Choose a color scheme for the popup content to ensure it aligns with the background settings.
* **Title**: Set the main title for the popup, such as "Verify Your Age."
* **Title Size**: Adjust the font size of the title—options include small, medium, or large.
* **Title Uppercase**: Enable this option to display the title in all uppercase, creating a stronger visual impact.
* **Description**: Enter a clear and concise description explaining the need for age verification to the user.
* **Underage Message**:
* **Denial Title**: Set the title for users who do not meet the age requirement, e.g., "Come back when you're older."
* **Denial Description**: Provide an explanation for underage users, such as "Sorry, the content of this store is not suitable for users under the legal age."
#### Usage Tips:
* **Test Before Publishing**: Enable debug mode and refresh the page to ensure the popup displays correctly and all settings are functional before publishing.
* **Color Coordination**: Ensure that the background color, background image, and content text have appropriate contrast for readability.
* **Content Suitability**: Customize the description text according to local legal requirements to ensure the content aligns with regional laws.
#### Common Issues:
* **Popup Always Showing in Debug Mode**: Ensure that debug mode is disabled before going live to avoid the popup appearing every time users visit the site.
* **Blurry Background Image**: Try toggling the "Background Blur" option to adjust the clarity of the background image.
* **Misaligned Text**: Check the text alignment settings in the content section to ensure proper text alignment for better visual appearance.
# Footer
The footer section is the area at the bottom of the page, typically used to display the website's copyright information, social media links, payment methods, policy links, and other content. The footer is an important part of the website, helping users quickly access key information and external resources.
**User Guide**
1. **Color Scheme**:
* **Select Color Scheme**: Choose a color scheme for the footer that matches the overall design of the website.
2. **Title and Border Settings**:
* **Show Top Border**: When this option is enabled, a border line will appear at the top of the footer area, separating the content area from the footer.
* **Title Uppercase**: Select this option to display all titles within the footer in uppercase.
3. **Background Settings**:
* **Background Image**: Upload a background image to be used as the footer's background.
* **Background Image Opacity**: Adjust the opacity of the background image to better blend with the footer content.
* **Fixed Background Image Position**: When enabled, the background image will remain fixed in the specified position and will not move when the content scrolls.
4. **Social Media**:
* **Show Social Media**: Display social media icons in the footer, allowing users to easily connect with you via social platforms.
* **Social Media Icon Style**: Choose the style of the icons (e.g., default, bordered, solid) and their display order.
5. **Language and Country Selector**:
* **Enable Language and Country Selector**: Allow users to select the website’s language and country version from the footer.
6. **Payment Methods**:
* **Show Payment Icons**: Display icons of supported payment methods in the footer to increase users' trust.
7. **Policy Links**:
* **Show Policy Links**: Display links to store policies in the footer, such as the privacy policy, return policy, etc.
8. **Custom Module Addition**:
* **Add Block**: You can add different blocks in the footer, such as menus, text, images, social media icons, brand information, etc., to enrich the footer content.
# Custom Payment Icons
If you are using a **third-party** payment service provider (e.g., Airwallex), the Shopify platform will not automatically display the relevant payment method icons. This is because third-party payment services may not be directly integrated with Shopify's payment icon system, unlike built-in solutions like Shopify Payments, which can automatically load and display payment method icons.
To ensure your store properly displays the payment methods available to your customers (e.g., Visa, MasterCard, PayPal, etc.), you will need to manually modify the code to add these icons.
{% hint style="warning" %}
All code modifications require manual updates, as new version releases may overwrite the manually modified parts.
{% endhint %}
### Open Code Editor
Go to the Online Store page, locate the Ascent theme you want to modify, click the three-dot button on the right, and select "Edit Code."
### **Modify Footer Code**
In the `footer.liquid` file, search for the keyword `shop.enabled_payment_types` to locate the relevant code block.
```liquid
{%- for type in shop.enabled_payment_types -%}
{{ type | payment_type_svg_tag: class: 'icon' }}
{%- endfor -%}
```
Replace the identified code block with the following, and update the `payments` list to match the payment methods you want to display:
```liquid
{% assign payments = 'visa, master, paypal, apple_pay, google_pay, american_express, discover, jcb, diners_club, unionpay, maestro, alipay, samsung_pay, stripe, klarna, afterpay, sezzle, bitcoin, ethereum, litecoin, dogecoin, sofort, ideal, giropay, eps, poli, affirm, splitit, paytm, bancontact' | split: ',' %}
{% for payment in payments %}
{% endfor %}
```
### **Modify Product Page Code**
Open the `main-product.liquid` file, search for the keyword `shop.enabled_payment_types`, and locate the relevant code block.
```liquid
{%- for type in shop.enabled_payment_types -%}
{{ type | payment_type_svg_tag: class: 'icon' }}
{%- endfor -%}
```
Replace the located code block with the following, and update the `payments` list to match the payment methods you want to display:
```liquid
{% assign payments = 'visa, master, paypal, apple_pay, google_pay, american_express, discover, jcb, diners_club, unionpay, maestro, alipay, samsung_pay, stripe, klarna, afterpay, sezzle, bitcoin, ethereum, litecoin, dogecoin, sofort, ideal, giropay, eps, poli, affirm, splitit, paytm, bancontact' | split: ',' %}
{% for payment in payments %}
{% endfor %}
```
Similarly, you can adjust the payment method icons displayed on the featured product section by modifying the `featured-product.liquid` file. Locate the relevant code block for payment icons and replace it with your customized payment list.
# Tool bar
The sidebar toolbar is a navigation bar fixed on the left or right side of the page. Users can choose to hide or show it on mobile devices according to their preferences. This toolbar can contain various functional modules (Blocks), such as language and region selection, search, email, phone, newsletter, etc., allowing users to quickly access different functions.
**Settings Options**
1. **Display Position**:
* **Left Side**: Fix the toolbar on the left side of the page.
* **Right Side**: Fix the toolbar on the right side of the page.
2. **Hide on Mobile**:
* When this option is selected, the toolbar will be hidden on mobile devices and only displayed on desktops.
**Addable Block ModulLanguage and Region**: Allows users to switch the language and region on the page.
1. **Search**: Provides a search input box for users to directly search site content.
2. **Email**: Displays email information, making it easy for users to contact the merchant via email.
3. **Phone**: Displays a contact phone number so users can reach the merchant by phone.
4. **Newsletter**: Provides the ability to subscribe to newsletters, allowing users to enter their email address to receive updates.
**Important Notes**
* If the toolbar contains too many modules, it may affect the display on mobile devices. It is recommended to hide unnecessary modules or hide the entire toolbar on mobile.
* Ensure the content of each module is accurate and properly displayed to enhance the user experience.
# Developer
This area is for developers who customize Ascent with custom Liquid, app blocks, or custom JavaScript.
{% content-ref url="/pages/Sa1jBPxDswGCF61alm9v" %}
[Custom Add to cart button](/developer/custom-add-to-cart-and-cart-drawer)
{% endcontent-ref %}
{% content-ref url="/pages/gXFV2hG1qT0v82RWw2cY" %}
[Refresh cart UI](/developer/refresh-cart-with-javascript)
{% endcontent-ref %}
{% content-ref url="/pages/vayucdOd3CGzJr3mV8Ow" %}
[Trim metafields.shopify translations](/developer/trim-metafields-shopify-translations)
{% endcontent-ref %}
# Custom Add to cart button
Use this guide when you create a custom Add to cart button, custom Liquid block, or custom JavaScript that needs to add a product to the cart and open Ascent's native cart drawer.
## Recommended method
The safest method is to reuse Ascent's built-in `` element. It already handles loading states, errors, cart bubble updates, cart drawer updates, and opening the drawer.
```liquid
{% form 'product', product, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' %}
{% endform %}
```
For this method to open the drawer, the store cart type should be set to drawer and the cart drawer should be present in the theme.
## Custom JavaScript method
If you need to add to cart from a fully custom script, send the required sections with the Ajax cart request, update the returned sections, then open the drawer.
```html
```
Replace `1234567890` with the variant ID you want to add.
## Notes
* Use a variant ID, not a product ID.
* Include `sections_url` so Shopify returns section HTML for the current page.
* Do not open the drawer on the cart page; Ascent silences the drawer there with `data-status-silence`.
* If you only need a normal product add-to-cart button, prefer the built-in `` method.
# Refresh cart UI
Use this guide when a custom script changes the cart and you need Ascent to refresh the visible cart UI.
## What usually needs refreshing
Ascent cart UI is split into sections. A custom script usually refreshes one or more of these areas:
* `cart-icon-bubble`: the cart icon count in the header.
* `Cart-Drawer`: the shopping cart drawer content.
* `Main-Cart`: the cart page content.
## Refresh after a cart change
When your script changes the cart through Shopify Ajax endpoints, request the sections you want to refresh, then pass the returned HTML to Ascent's `SectionDynamicUpdate.updateSections`.
```js
async function updateCartQuantity(line, quantity) {
const cartDrawer = document.getElementById("Cart-Drawer");
const mainCart = document.getElementById("Main-Cart");
const sectionsToRender = [
{
id: "Cart-Icon-Bubble",
section: "cart-icon-bubble",
selector: ".shopify-section"
}
];
if (cartDrawer && !cartDrawer.hasAttribute("data-status-silence")) {
sectionsToRender.push({
id: "Cart-Drawer",
section: cartDrawer.dataset.section,
selector: "#Cart-Drawer-Details"
});
}
if (mainCart?.dataset.section) {
sectionsToRender.push({
id: "Main-Cart",
section: mainCart.dataset.section,
selector: "#Main-Cart-Details"
});
}
const response = await fetch(window.routes.cart_change_url, {
...webvista.fetchConfig(),
body: JSON.stringify({
line,
quantity,
sections: sectionsToRender.map((section) => section.section),
sections_url: window.location.pathname
})
});
const cartData = await response.json();
if (cartData.errors) {
console.error(cartData.errors);
return;
}
SectionDynamicUpdate.updateSections(sectionsToRender, cartData.sections);
webvista.publish(PUB_SUB_EVENTS.cartUpdate, {
source: "custom-cart-refresh",
cartData
});
}
```
## Refresh without changing cart contents
If another app changes the cart and your script only needs to redraw Ascent's cart UI, fetch the current cart first, then fetch the rendered sections.
```js
async function refreshCartUI() {
const cartDrawer = document.getElementById("Cart-Drawer");
const sectionsToRender = [
{
id: "Cart-Icon-Bubble",
section: "cart-icon-bubble",
selector: ".shopify-section"
}
];
if (cartDrawer && !cartDrawer.hasAttribute("data-status-silence")) {
sectionsToRender.push({
id: "Cart-Drawer",
section: cartDrawer.dataset.section,
selector: "#Cart-Drawer-Details"
});
}
const cartData = await fetch(window.routes.cart_url + ".js").then((response) => response.json());
const sectionParams = sectionsToRender.map((section) => section.section).join(",");
const sectionHTML = await fetch(
`${window.location.pathname}?sections=${encodeURIComponent(sectionParams)}`
).then((response) => response.json());
SectionDynamicUpdate.updateSections(sectionsToRender, sectionHTML);
webvista.publish(PUB_SUB_EVENTS.cartUpdate, {
source: "custom-cart-refresh",
cartData
});
}
```
## Open the cart drawer after refreshing
```js
const cartDrawer = document.getElementById("Cart-Drawer");
if (cartDrawer && !cartDrawer.hasAttribute("data-status-silence")) {
cartDrawer.show();
}
```
## Notes
* Refresh sections after the cart request succeeds.
* Always include `cart-icon-bubble` when the cart item count may have changed.
* Do not force the drawer open on the cart page; Ascent marks it with `data-status-silence`.
* If your script also adds a product, see the custom add-to-cart guide in this Developer section.
# Trim metafields.shopify translations
Ascent uses Shopify category metafields in places such as the product specification table and the product compare table. Those labels are translated with keys like:
```liquid
{{ 'metafields.shopify.material' | t }}
```
Shopify's taxonomy can generate a very large `metafields.shopify` object in every storefront locale file. You can trim those keys when the store only uses a small set of category metafields.
## What can be trimmed
Only trim keys inside:
```json
{
"metafields": {
"shopify": {}
}
}
```
Do not remove other translation groups unless you have checked where they are used.
Keep a `metafields.shopify` key when any of these are true:
* The store has products with that Shopify category metafield.
* The key is selected in a Product compare table block.
* You are not sure whether a merchant may use it soon.
If a key is removed but the theme still renders `{{ 'metafields.shopify.key' | t }}`, the storefront can show a missing translation label. When in doubt, keep the key.
## Build a keep list
Create a text file with one key per line:
```txt
color
material
size
target-gender
```
Use the exact key after `metafields.shopify.`. For example, keep `material` for `metafields.shopify.material`.
Also include any keys configured in product compare table blocks. In Ascent, compare table blocks can read `product.metafields.shopify[block.settings.key]`.
## Trim all storefront locale files
Save the keep list as `metafields-shopify-keep.txt`, then run this script from the theme root:
```bash
node <<'NODE'
const fs = require("fs");
const path = require("path");
const keep = new Set(
fs.readFileSync("metafields-shopify-keep.txt", "utf8")
.split(/\r?\n/)
.map((line) => line.trim())
.filter(Boolean)
);
for (const file of fs.readdirSync("locales")) {
if (!file.endsWith(".json") || file.endsWith(".schema.json")) continue;
const filePath = path.join("locales", file);
const json = JSON.parse(fs.readFileSync(filePath, "utf8"));
const source = json.metafields?.shopify;
if (!source || typeof source !== "object" || Array.isArray(source)) continue;
const trimmed = {};
for (const key of Object.keys(source)) {
if (keep.has(key)) trimmed[key] = source[key];
}
json.metafields.shopify = trimmed;
fs.writeFileSync(filePath, `${JSON.stringify(json, null, 2)}\n`);
console.log(`${file}: kept ${Object.keys(trimmed).length} of ${Object.keys(source).length}`);
}
NODE
```
## Check the result
After trimming:
* Search the theme for `metafields.shopify.` and confirm the required keys are still in the keep list.
* Preview products that show the specification table.
* Preview pages that use the Product compare table.
* Check each enabled storefront language, especially the default language.
The values displayed for Shopify category metafields come from the product metafield values, such as `value.label`. The locale keys only control the field names shown by the theme.
# Product Collection Page
{% content-ref url="/pages/xkuU1nzMN26BdD3Tgdtu" %}
[Create Subcategory](/pages/product-collection-page/create-subcategory)
{% endcontent-ref %}
# Create Subcategory
Subcategories help users quickly find more specific product categories, significantly reducing search time. Example: Under the "Electronics" category, adding subcategories such as "Smartphones," "Tablets," and "Laptops" allows users to directly locate their target products. Subcategory pages focus on specific product types, minimizing distractions from unrelated content and encouraging purchasing decisions.
On the product category page, locate the product collection section. In the subcategory "Collection Title," select the category to display.
Typically, after creating subcategories, they will be displayed by default on all related product category pages. If you need to display different subcategory content on other product category pages, you must create a dedicated "Product Collection A+ Page" for targeted category displays.
After creating and editing the page, navigate to the corresponding product collection and select the desired product template for that collection. It is important to note that any changes made within this template will only affect the selected collection template and will not impact the default product collection template or other templates.
# Main product
Our product main page is fully functional, designed to help merchants optimize product display and enhance user experience, thereby driving sales growth. With flexible layout configurations, rich media display options, and multiple interactive features, merchants can easily create attractive product pages that capture customer attention and boost purchase conversion rates. Practical modules such as countdown timers, interactive product recommendations, and stock notifications allow merchants to perform precise marketing and increase sales. These features ensure that merchants can freely adjust the page to match their brand image and sales goals, creating the best product presentation.
#### 1. Media Settings
* **Enable Fixed Media on Desktop**: Display media resources in a fixed position on desktop devices.
* **Desktop Media Layout**: Choose how media is displayed (e.g., carousel with thumbnails on the right).
* **Media Size**: Adjust the size of the media displayed on desktops, with options including small, medium, and large.
* **Media Fill**: Define how the media is displayed, with options such as "cover" and "contain."
* **Media Position**: Choose the media's position relative to the product description, either on the left or right.
* **Hide Other Variant Images**: Use the `alt` attribute to group images by variant, allowing only the relevant images to display when a specific variant is selected, while hiding others. For detailed instructions, please refer to [Variant Images Group](/pages/main-product/variant-images-group)
* **Enable Video Looping**: Automatically loop the video during playback.
* **Hide Thumbnails on Mobile Devices**: Hide media thumbnails on mobile devices.
#### 2. Tab Settings
* **Show Product Description Tab**: Enable to display product descriptions in a tabbed format on the page.
* **Show Description Icons**: Add icons to the product description.
#### 3. Additional Settings
* **Enable Sharing**: Activate social sharing features, allowing users to share products on social platforms.
* **Show Meta Fields Table**: Display product meta fields when enabled.
#### 4. Supported Blocks
* **Title**: Add title sections to the page, improving the structure of the product introduction.
* **Price**: Display the product’s price information.
* **Buy Button**: Add a "Buy Now" button to the page to improve purchase convenience.
* **Text**: Add text sections to the page to provide more detailed descriptions.
* **Product Description**: Include a detailed product description on the product page.
* **Image**: Add product or promotional images to the page.
* **SKU**: Display the product's SKU information.
* **Stock Notification**: Provide users with notifications about the product's stock status.
* **Variant Selector**: Allow users to choose different product variants (e.g., color or size).
* **Collapsible Labels**: Use collapsible labels to organize information and improve the browsing experience.
* **Gift**: Add gift options to the product page, such as gift wrapping services.
* **Countdown Timer**: Add a countdown feature to the product page for promotions or limited-time offers.
* **Divider**: Add dividers between different content sections to enhance page layout clarity.
* **Custom Tab**: Add extra custom tabs to the page for more product information.
* **Icon List**: Add an icon list to showcase the product's key features or advantages.
* **Pop-up**: Add a triggerable pop-up window to display more product information or advertisements.
* **Complementary Products**: Recommend complementary products to users, increasing cross-selling opportunities.
* **Payment & Security**: Display Shopify trust badges and a list of supported payment providers.
* **Related Categories**: Display all categories related to this product, with an option to set the number of categories to display.
#### Usage Notes
* All settings can be customized based on merchant needs.
* Ensure that images or media used meet the best resolution requirements for optimal user experience.
* The combination of various blocks can enhance the functionality and visual appeal of the product page.
# Gifts (Freebies)
Adding gifts (freebies) helps clearly showcase promotional offers, enhance user experience, increase purchase conversion rates, support flexible promotional strategies, and enable precise inventory management, all while boosting brand image.
Gift freebies preview:
{% embed url="" %}
### Step 1: Create a Gift Metaobject
Go to the **Metafields** configuration page.
1. Add a new **Metaobject** and name it "gift" (the name can be customized).
2. Ensure that this **Metaobject** contains the following three fields:
* **image** (Select file type; Select images.): Used to upload the gift image.
* **title** (Single line text type): Used to enter the gift’s name.
* **price** (Money type): Used to set the price of the gift.
### **Step 2: Add Gift Entries**
1. In the "gift" **Metaobject**, add multiple entries, with each entry representing a separate gift.
2. For each entry, upload the **image**, and fill in the gift’s **title** and **price**.
### **Step 3: Add Gifts to Products or Product Variants**
1. **Add a gift to the product**
{% hint style="success" %}
If a gift is added to a product, it will apply to all variants of that product.
{% endhint %}
* Open the Metafield configuration page and add a new product metafield named `product-gift`, ensuring the namespace and key are set to `custom.product_gift`.
* Set the Metafield type to "Metaobject," reference the previously created `gift` metaobject, and choose the **List of entries**.
* On the product editing page, locate the "Product Metafields" section, find the `product-gift` Metafield, and select the desired gift entries to add.
2. **Add a gift to a specific product variant:**
* Open the Metafield configuration page and add a new product variant metafield named `variant-gift`, ensuring the namespace and key are set to `custom.variant_gift`.
* Set the metafield type to "Metaobject" and reference the previously created `gift` metaobject, selecting the list type.
* On the product editing page, go to the "Variants" section, select the specific variant you want to add a gift to, and open the variant editing page.
* In the variant editing page, locate the "Metafields" section, find the `variant-gift` metafield, and select the desired gift entries.
### Step4: In the product page template, add a gift block.
{% hint style="success" %}
You can place the gift block anywhere you want on the product page. If no gifts are added to the product, the gift block will not be displayed.
{% endhint %}
### **Important Notes**
* A maximum of 6 gifts can be added to each product or variant.
* Ensure that the metafields are configured correctly to make it easy to select and add gifts during future operations.
# Product Pre-order
Product pre-order preview:
{% embed url="" %}
**Pre-order Conditions**:
1. **Enable inventory tracking**: Check the "Track inventory" option on the product settings page.
2. **Product Stock is 0**.
3. **Product Set to Continue Selling When Out of Stock**: In the product settings, check the "Continue selling when out of stock" option to allow customers to purchase the product even when stock is 0.
4. **Enable Pre-order Badge**: Enable the pre-order badge in the global settings. This badge will display on the product page to notify customers that the product is available for pre-order. The pre-order button will automatically appear when the pre-order conditions are met.
**Pre-order Recommendations**:
1. **Create a Dedicated Pre-order Product Template Page**: Create a separate template page for pre-order products, clearly informing customers that the product is in pre-order status. It’s recommended to provide detailed information about the expected shipping date, possible delays, and the terms and conditions related to pre-ordering. Use the pre-order badge to identify pre-order products, making it clear to customers that the product will require a waiting period for shipment.
**Example Text**: “This product is available for pre-order, with an estimated shipping date of \[shipping date]. After placing your order, you will receive a confirmation email, and we will notify you again when the product is shipped.”
2. **Offer Discounts or Promotions for Pre-order Products**: To encourage customers to pre-order, you can offer exclusive discounts or promotions for pre-order products, such as free gifts or coupons. This can increase the appeal of pre-order items while highlighting the unique value of pre-ordering.
**Example Text**:\ “Pre-order Special: Pre-order this product before \[date] to enjoy a 10% discount and receive a free limited-edition gift!”
3. **Email Notifications and Follow-ups**:
* **Order Confirmation Email**: After a customer places a pre-order, immediately send a confirmation email with detailed information about the pre-ordered item and the expected shipping date.
* **Shipping Reminder Email**: When the pre-order product is ready to ship, send a shipping notification to the customer, providing the shipment status and tracking information.
* **Periodic Follow-up Emails**: For longer pre-order periods, it’s recommended to send periodic updates to keep customers informed about the product’s progress, helping to alleviate any potential customer anxiety.
**Example Text**:\ “Thank you for your pre-order! Your product is expected to ship on \[shipping date]. We will provide detailed tracking information via email once it has been shipped.”
**Optimization Suggestions**:
* Regularly check stock levels and the supply chain to ensure that pre-order products can be shipped on time, and update the product status on the page in real-time.
* A clear refund and cancellation policy should be clearly stated on the pre-order page to increase customer trust.
* Set quantity limits for pre-orders on popular products to avoid over-ordering and potential supply issues.
With the pre-order feature, you can secure sales for products before they arrive, enhancing the customer’s purchasing experience while providing merchants with more sales opportunities.
# Size Chart
A size chart is a tool that provides sizing information for clothing, footwear, or accessories, helping consumers select suitable products based on measurements such as height, weight, chest, waist, or foot length.
**How to Add a Size Chart:**
### Method 1: Create Product Page Templates
You can create individual [product templates](https://help.shopify.com/zh-CN/manual/online-store/themes/theme-structure/templates) for different product categories, such as footwear, tops, or pants, and add size charts by uploading images.
1\. Navigate to the product template editing page.Click **Add Block** and select **Popup**.
\
2\. Add size text or image.
\
3\. Bind size picker
{% hint style="success" %}
The size name must be one of the following values to be associated: size, 尺码, 尺碼, Größe, taille, tamaño, misura, размер, tamanho, サイズ, 크기, storlek, velikost, størrelsen, rozmiar, μέγεθος, ukuran, mărime, величина, kích thước, วัด, ölçü, suurus, dydis, izmērs, μεγέθος, размеры
{% endhint %}
### **Method 2: Add Dynamically Using Metafields**
You can flexibly set up product size charts by creating product metafields.
First, create a product metafield, for example, name it **"Size Chart"**.
We found the newly created **Size Chart** field on the product page and added the size chart image to this field.
In the product template editor, add a **Popup** Block. Set the content of the block to **dynamic source** pull data from the **"Size Chart"** metafield.
This approach allows you to manage size charts for different products dynamically and efficiently.
# Variant Images Group
Preview for hiding other variant images:
{% embed url="" %}
By adding the `alt` attribute to product images and grouping them by variant, you can achieve the effect of displaying only the image set for the currently selected variant. The specific steps are as follows:
Show Variant Image Group
### Add the `alt` attribute to product images.
In the product editing page, select the images you want to group and add an `alt` attribute value, such as `###Purple`.\
Images with the same `alt` value (prefixed with `###`) will be grouped together.
{% hint style="warning" %}
The `alt` attribute value must be prefixed with `###` to enable the grouping functionality.
{% endhint %}
Add Alt Attribute
### Set variant images.
In the variant settings, assign a main image to each variant. All images in the same group as the main image will be displayed when that variant is selected.
Set Variant Images
### Enable the "Hide Other Variant Images" setting.
In the theme editor, go to the product settings and enable the "Hide Other Variant Images" option. Once enabled, only the current variant's image group will be displayed, while other images will be hidden.
Enable Hide Other Variant Image Setting
# Variant Samples
Displaying variant samples allows customers to better visualize the product's appearance, reducing return rates caused by color differences and significantly improving the shopping experience and conversion rates. With intuitive and professional color swatches, stores can not only enhance their brand image and professionalism but also gain a competitive edge in the highly competitive e-commerce market.
### Display Color Samples
As shown in the image, add color attributes to your products.
{% hint style="warning" %}
Choose System-Provided Color Options Instead of Custom Options
{% endhint %}
Once Added Successfully, Color Samples Will Automatically Display as Shown Below.
### Display Image Samples
First, you need to add images to the product variants on the product edit page.
Next, on the template edit page (Product Page), click on the "Variant Picker" block and enable the "Display variant image" checkbox.
# Complementary Products
The complementary products feature enhances the customer shopping experience by providing thoughtful pairing suggestions, helping customers quickly find related items and save selection time. It also increases the practicality and perceived value of product combinations, boosts store sales, and showcases the brand's professionalism and deep understanding of customer needs.
### Install the Shopify Search & Discovery App
Shopify Search & Discovery App
* Log in to your Shopify admin.
* Go to the **Shopify App Store**.
* Search for the **Shopify Search & Discovery** app.
* Click **Add App** and complete the installation.
### Open the App and Access Product Recommendation Settings
* In your Shopify admin, go to **Apps > Search & Discovery**.
* Click on **Recommendations** in the left-hand menu.
### Select Products and Link Complementary Products
* On the **Recommendations** page, click **Manage Recommendations**.
* Search for or select the main product for which you want to set complementary products.
* Click to enter the recommendation configuration page for that product.
### Add a Complementary Products Block in the Template Editor
* Navigate to **Online Store > Customize** in your Shopify admin.
* Select the **Product Template** from the dropdown menu.
* As shown in the image, add a **Complementary Products Block** to the product page template.
* Save your changes to ensure the block is displayed on the product page.
# Related Products
By adding related products, you can showcase options that are related to the main product, helping customers quickly discover pairing items or upgrade choices. This enhances the shopping experience, increases sales opportunities, and optimizes the perceived value of the product combination.
### Install the Shopify Search & Discovery App
* Log in to your Shopify admin.
* Go to the **Shopify App Store**, search for, and install the **Shopify Search & Discovery** app.
* Open the app, navigate to the **Recommendations** settings page, select the products you want to recommend, and link the related products accordingly.
### Add a Related Products Section
Related products can be added to pages like the product **details page** or **cart page**. Here, we’ll use the product details page as an example:
1. Log in to your Shopify admin and go to **Online Store > Customize**.
2. Select the **Product Page Template**.
3. In the editor, click **Add Section** and choose the **Related Products** block.
4. Save and publish your changes to ensure the recommended products display correctly on the product page.
# Sibling Products
Linking sibling products allows customers to quickly browse items within the same series or with similar features, offering more options and enhancing their shopping experience. This approach increases product visibility, boosts conversion rates, and helps customers better compare and choose the most suitable product.
Sibling product preview:
{% embed url="" %}
### **Creating Sibling Products**
As shown in the example, create **iPhone 16**, **iPhone 16 Plus**, **iPhone 16 Pro**, and **iPhone 16 Pro Max** to form a product series that meets the diverse needs of customers.
### **Create a Product Page Template**
Open the **Theme Editor** and create a product page template for the iPhone 16 series. Add four **Sibling product** blocks as shown in the image.
### **Assign the Template**
Go back to the product editing page and assign the product page template created earlier to each of the four products in the example.
{% hint style="success" %}
**To better showcase the products**, we can create a unique product page template for each product in the series, as long as the **sibling product blocks remain consistent**.
{% endhint %}
# In Box Products
Adding included product information on the product detail page allows users to clearly understand the complete accessories that come with the product. For example, when purchasing a wireless mouse, users can see that the product includes a mouse, a wireless receiver, and a user manual.
{% embed url="" %}
### **Steps to Follow**
1. **Access Product Information Management**
* In the backend management system, locate the **Product information** settings.
2. **Add a Collapsible Tab**
* On the product information page, add a "Collapsible tab" to display the included product information.
3. **Enable "Show Products in the Box"**
* In the newly created **Collapsible tab**, enable the **Show products in the box** option.
4. **Add "In-Box Products"**
* Based on the actual product packaging contents, add the corresponding **In-box product** items.
* Example:
* **Product: Wireless Mouse**
* **Includes: Wireless mouse, wireless receiver, user manual**
5. **Save and Preview**
* Ensure all information is correctly entered and save the settings.
* Preview the product page to check if the included product information is displayed correctly.
### **Important Notes**
* Ensure that the "In-box products" added are clear and accurate to avoid customer confusion.
* Adjust the display format according to actual needs to better suit user requirements.
* It is recommended to use concise and clear text to describe each included product.
By following these steps, you can easily add "Included Products" information to the product detail page, enhancing the user shopping experience.
# Product A+ Page
Create an independent and customizable product page designed to comprehensively showcase the product features and key selling points, combining exquisite visual design with a user-friendly layout. The page should not only capture the user's attention but also effectively communicate the product's value, ultimately improving conversion rates. This page will have high flexibility, supporting personalized content layout, responsive design, and integrating SEO optimization and data analytics tools to provide strong support for product promotion.
### Create a New Product Template
* In the top dropdown menu, select "Products."
* Click "Create Template."
* Enter a template name.
* Under the "Based on" option, you can choose an existing product template to duplicate.
* Click "Create Template."
### Customize Your Template
* In the template editor interface, you can add, edit, or delete sections.
* Customize the settings according to your needs.
* Once done, click "Save."
### Assign the Template to a Product
* Return to the Shopify admin backend > Products.
* Select the product you want to apply the template to.
* In the "Theme Template" section on the right, select the new template you just created.
* Click "Save."
# Performance Indicator Bar
The performance indicator bar visually represents different performance parameters of a product, helping users quickly understand its capabilities and make intuitive comparisons.
### How to Add the Performance Indicator Bar
**Go to the Shopify Editor** and add the **"Performance Indicator Bar"** block under **Product Information**.
**Edit the performance parameters** by filling in the following details:
* **Title**: Name of the indicator, e.g., "Battery Life" or "Cooling Performance."
* **Description**: A brief explanation of the performance parameter.
* **Level**: Define the performance scale, such as a score from 1-100 or Low/Medium/High.
* **Low Level**: Set a label for low performance and choose a corresponding color.
* **Medium Level**: Set a label for medium performance and choose a corresponding color.
* **High Level**: Set a label for high performance and choose a corresponding color.
**Notes**
* **The performance indicator bar is a universal section for all products.**
* If you want to set different performance parameters for individual products, **use it in combination with the Product A+ page** for more customization. [Product A+ Page](/pages/main-product/product-a+-page)
# Delivery ETA
The **Delivery ETA** feature dynamically displays the expected delivery date for an order, helping users clearly understand when they will receive their items, thus enhancing their shopping experience. Merchants can easily add this feature in the **Shopify Editor**, making product pages more transparent and informative.
### **How to Add "**Delivery ETA**"**
1. **Access the Shopify Editor.**
2. **Add the "Delivery ETA" section** under the **Product Information** section.
3. **Configure the Delivery ETA parameters,** such as processing time and time variance.
4. **Choose an appropriate color scheme** to ensure the delivery information aligns with the overall store design.
### Delivery ETA **Configuration Guide**
**Color Scheme:**
* Select different color schemes in the settings to control the background and text color of the estimated delivery time block, ensuring it matches the store’s style.
**Processing Time:**
* Refers to the estimated number of days from the current date to the delivery date.
* Example: If the processing time is set to **5 days**, the estimated delivery date will be **current date + 5 days**.
**Time Variance:**
* Defines the range of the estimated delivery time.
* Increasing the time variance will expand the estimated delivery window, meaning both the earliest and latest delivery times will adjust accordingly.
* Example: If the processing time is **5 days** and the time variance is **2 days**, the estimated delivery window will be **3–7 days**.
### **Notes**
**Manual Configuration Required:** The estimated delivery time must be manually entered and is **not** linked to Shopify’s backend shipping settings.
**Different Delivery Times for Different Products:** If different products have varying estimated delivery times, use **"Product A+ Page"** to configure them individually and ensure accuracy. [Product A+ Page](/pages/main-product/product-a+-page)
# Version Upgrade Notes
To ensure that your store remains at its competitive best, we are committed to continuous version updates. Through regular optimizations and new features, we help you adapt to market changes, enhance user experience, and improve operational efficiency. Each update brings new feature improvements and system stability enhancements, keeping your store at the forefront of the industry. Please make sure to install these updates in a timely manner to enjoy the advantages brought by innovation and optimization.
If you encounter any issues related to version upgrades, please feel free to contact us.
{% content-ref url="/pages/ZxCcLzdRbcY41o9jy813" %}
[Support Policy](/support-policy)
{% endcontent-ref %}
# v3.1.0（Coming Soon）
This update focuses on **AI-ready storefront discovery**, richer visual customization, and more polished shopping experiences. Ascent now gives search engines, AI search tools, and answer engines clearer page signals while also adding more flexible controls for banners, cards, countdowns, product sections, and trust-building content.
#### Added
* Enhanced **AI-ready discovery signals** across product, collection, blog, article, page, brand, social profile, and sharing preview content
* Added more section header design options, including decorative icons and italic gradient heading effects
* Added optional container shadow and gradient border controls to more sections, including Countdown, Text with icons, Quote, and Search banner
* Added product card border settings to Collection, Featured collection, Related products, and Recently viewed products experiences
* Added background image, banner height, image opacity, and image behavior controls to the Main cart banner
* Added Image gallery block controls for borders, card shadows, optional circular arrow buttons, and improved content positioning
* Added Text with icons controls for full-width layout, container shadow, section border, icon border, and improved mobile carousel display
* Added developer documentation for custom Add to cart buttons, JavaScript cart refresh, and `metafields.shopify` translation cleanup
#### Changed
* Redesigned the Countdown section with better defaults, icon selection, caption, heading, description, compact timer cards, improved mobile spacing, and optional shadow or border styling
* Improved Mega Menu featured images with a stronger text gradient overlay, description text, decorative heading line, compact circular action button, and a more consistent mobile drawer display
* Improved product page payment and security layout with better trust badge sizing, payment icon alignment, title icon, and clearer text spacing
* Improved blog cards with cleaner excerpts, a compact arrow button, better horizontal-card typography, and a limit on image badges
* Improved Rich text and related content blocks with better content width behavior, image block sizing, light text options, and highlight stats styling
* Improved section header consistency across many sections, including gradient heading behavior and decorative controls only when the section header is enabled
* Improved cart drawer, search drawer, recommendation cards, mini checkout, pickup availability, filters, active facets, badges, blog tags, social icons, toolbar, and header submenu styling
* Simplified the Shop the Feed modal: "View details" now links directly to the product page instead of opening a Quick view drawer
#### Fixes and other improvements
* Reduced duplicate or unclear structured signals that could make storefront content harder for AI tools and search engines to interpret
* Fixed layout issues caused by animated content wrappers in several card and glass-style containers
* Refined blur, shadow, border, and rounded-corner behavior across cards, media, banners, product modules, and drawers
* Improved mobile countdown sizing and spacing to prevent overflow in newsletter and section layouts
* Refined mobile Search banner heading sizing for better readability on smaller screens
* Refined the mobile Quick view drawer so it opens vertically like a bottom sheet
* Improved slider/touch behavior for smoother trackpad and mobile interactions
* General UI consistency, visual polish, and storefront stability improvements across the theme
# v3.0.6（Hotfix）
To resolve the inconsistent font weight in the mobile menu, please manually update the style file as follows:
File Path: `assets/component-header-drawer.css`
Modification: Locate the selector: `.menu-drawer-nav .menu-drawer-menu .menu-drawer-menu-item.header-menu-first-level summary.first-level-item > a`
Replace it with the following code:
```
.menu-drawer-nav .menu-drawer-menu .menu-drawer-menu-item.header-menu-first-level summary.first-level-item {
font-weight: var(--font-body-weight-bold);
}
.menu-drawer-nav .menu-drawer-menu .menu-drawer-menu-item.header-menu-first-level a.first-level-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
```
# v3.0.6
A focused update introducing Shopify Customer Accounts support, scroll-driven sticky image cards animations, interactive mouse parallax on highlight features, and a range of bug fixes and performance improvements.
#### Added
* Added **Shopify Customer Accounts** login support in the header — a new account menu setting lets merchants configure the customer account menu directly from the theme editor
* Added scroll-driven stacking animation to the **Sticky Image Cards** section — previous card images scale down and fade out as the next card scrolls into view, on both desktop and mobile
* Added mouse parallax tilt effect to the **Highlight Features** section center image — the image subtly tilts and shifts with cursor movement on desktop
#### Changed
* Optimized **Highlight Features** section — improved layout and interactive behavior
* Optimized **Search** — enhanced search experience and recommendations
* Improved mobile heading font sizes globally — headings now scale down appropriately on small screens
* Tab panel max height capped at `30rem` to prevent overflow on tall screens
#### Fixes and other improvements
* Fixed invisible keyboard focus ring on Featured Image links inside Mega Menu
* Fixed slider component multiple bugs and performance issues
* Fixed mobile touch on carousel blocking page scroll
* Fixed product card image collapsing on initial load
* Fixed predictive search JavaScript block-scope error
* Fixed auto-translate GitHub Action failing on concurrent pushes
* General performance and stability optimizations across the theme
# v3.0.5
A focused update featuring improved forms, enhanced media handling, a new image–text switcher, translation fixes, and overall performance and security improvements.
#### Added
* Added a new **Image–text tabs** section
* Added festive Christmas atmosphere/decorations.
Snout style
Joyfy style
Elevated style
The addition can be enabled in **Other** within the template settings, and some styles can be adjusted.
#### Changed
* Improved the product back-in-stock notification form
* Enhanced the contact form
* Optimized product media display
#### Security
* General security enhancements
#### Fixes and other improvements
* Fixed **Italian** translation issues
* General performance and stability optimizations across the theme
# v3.0.4
Introducing the all-new **HappyPaws Preset**, featuring enhanced **Predictive Search** and new **Couple Support** in the shopping cart, along with performance and security improvements.
#### Added
* Added **HappyPaws Preset**, specially designed for pet-related stores.
* Added **Couple Support** in the shopping cart for handling paired/combined product additions.
#### Changed
* Optimized **Predictive Search** to display more search result items.
#### Security
* General security enhancements.
#### Fixes & Other Improvements
* Global performance and stability optimizations.
---
[Next Page](/llms-full.txt/1)