> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/product/product-features.md). # Product Features The Product Features section helps you showcase your product's key benefits and highlights in an eye-catching layout. It displays a central product image with feature cards arranged on either side (on desktop) or stacked below (on mobile). This section is perfect for highlighting what makes your product special, such as quality materials, fast shipping, eco-friendly practices, or customer guarantees. The visual layout draws attention to both your product and its unique selling points, making it easier for customers to understand why they should choose your product.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Product Features**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Heading * **Caption**: A small text label that appears above your main heading. Use this to add context or categorize your section. * **Heading**: The main title for your Product Features section. This appears prominently at the top of the section. * **Heading size**: Controls how large your heading appears. Choose from XS, S, M, L, XL, or 2XL to match your design. * **Underline**: Adds a decorative underline beneath your heading when enabled. * **Description**: A longer text block that appears below the heading. Use this to provide more context about your product features. * **Header text position**: Controls where your heading and description are aligned. Choose Start (left), Center, or End (right). #### Media * **Desktop Image**: The main product image displayed in the center of the section on desktop screens. If you're on a product page and don't set this, it will automatically use the first product image. * **Mobile Image**: A separate image optimized for mobile devices. Leave blank to use the desktop image on all devices. * **Image ratio**: Controls the shape of your product image. Choose Landscape (wider), Portrait (taller), Square, or Tall (very tall, like a phone screen). * **Image width**: Sets how wide the center product image appears. Choose 300px, 450px, or 600px. #### Layout * **Full width**: When enabled, the section stretches edge-to-edge across the page instead of being contained within the page width. * **Color scheme**: Sets the overall color palette for the section. Choose from your theme's predefined color schemes. #### Feature Items * **Card layout**: Controls how content appears inside each feature card. Choose Row (icon/image beside text) or Column (icon/image above text). * **Card heading size**: Sets the size of headings within feature cards. Choose from S, M, L, or XL. * **Text size**: Controls the size of descriptive text in feature cards. Choose Small, Medium, or Large. * **Icon size**: Sets the size of icons in feature cards. Choose Small, Medium, or Large. * **Image width**: Controls the width of images used in feature cards (when using images instead of icons). Adjust from 25px to 100px. * **Card size**: Sets the overall size of feature cards. Choose Small, Medium, or Large. * **Border width**: Adds a border around feature cards. Set from 0px (no border) to 8px. * **Corner radius**: Rounds the corners of feature cards. Set from 0px (sharp corners) to 40px (very rounded). * **Color scheme**: Sets the color palette for feature cards, which can be different from the main section colors. * **Cards layout effect**: Adds visual interest to how cards are positioned. Choose None (standard alignment), Funnel (cards converge toward center), or Arc (cards curve in an arc pattern). #### Button * **Label**: The text that appears on your call-to-action button. * **Link**: The URL where the button takes visitors when clicked. Leave blank to disable the button. * **Button style**: Controls the appearance of your button. Choose Solid (filled), Outline (border only), Transparent (subtle), or Link (text only). #### Section padding * **Top padding**: Adds space above the section. Adjust from 0px to 400px. * **Bottom padding**: Adds space below the section. Adjust from 0px to 400px. #### Block: Feature item Each feature item you add has its own settings: * **Display type**: Choose whether to show an Icon or an Image for this feature. * **Icon**: Select which icon to display (only shown when Display type is set to Icon). Choose from a wide variety of icons like check marks, hearts, trucks, stars, and more. * **Image**: Upload an image for this feature (only shown when Display type is set to Image). * **Heading**: The title for this specific feature, such as "Fast Shipping" or "Eco-Friendly". * **Text**: A brief description explaining this feature in more detail. {% hint style="info" %} #### Using Product Metafields When using this section on product pages, you can connect product metafields to automatically pull dynamic content. This is especially useful if you have different features for each product. In any feature item's **Heading** or **Text** fields, you can connect it to a **dynamic source** or enter metafield references like `{{ product.metafields.custom.feature_name }}` to display product-specific information. \ You can also use metafields for images by entering a metafield reference in the **Desktop Image** or **Mobile Image** fields, such as `{{ product.metafields.custom.product_features_img.value }}`. This way, each product can have its own unique features. {% endhint %} *** ### Tips * Use an even number of feature items (2, 4, 6 or 8) for the most balanced layout on desktop, where items alternate between left and right sides. * The Funnel layout effect work best when you have 4 or more feature items. * The Arc layout effect work best when you have 6 or more feature items. * On product pages, if you don't set a desktop image, the section will automatically use the first product image, saving you time. * Keep feature card text short and scannable. Customers should be able to understand each benefit at a glance. * Use icons for quick visual recognition, or images if you want to show specific product details or lifestyle shots. * The mobile layout automatically stacks all cards vertically, so you don't need to worry about mobile optimization.