> 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/featured-product.md). # Featured product The Featured Product section lets you showcase a single product prominently on any page. It displays the product's images in a gallery with thumbnails, along with all the product information like title, price, variants, and buy buttons. You can customize the layout, add custom content blocks, and control how the product information is displayed. This section is perfect for highlighting featured items, creating product landing pages, or showcasing bestsellers on your homepage.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Featured product**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Product * **Product**: Select which product to display from your store. #### Layout * **Sticky content**: When enabled, the product information stays visible at the top of the screen as visitors scroll down the page. * **Full width**: When enabled, the section stretches across the entire browser width instead of staying within the page margins. * **Color scheme**: Choose a color palette that matches your brand and affects text and background colors. * **Full details link style**: Controls the appearance of the "View full details" link at the bottom of the product information. #### Media * **Position**: Choose whether product images appear on the left or right side of the product information. Position is automatically optimized for mobile. * **Image ratio**: Sets the shape of product images - choose landscape (wide), portrait (tall), tall (very tall), or square. * **Width**: Controls how wide the media gallery appears relative to the product information (small, medium, or large). * **Constrain to screen height**: When enabled, limits the media gallery height to fit within the screen, preventing it from being too tall. * **Fit**: Controls how images fit within their containers - choose "Original" to show the full image or "Cover" to fill the space. * **Media background color**: Sets a background color for the media container. Set to transparent to use the section's color scheme. #### Gallery layout * **Thumbnail slider position**: Choose where the thumbnail navigation appears - left, bottom, or right of the main image. * **Place thumbnail slider over media**: When enabled, places the thumbnail slider on top of the media instead of beside it. * **Slider buttons position**: Controls where navigation buttons appear when thumbnails are at the bottom - either below the slider or overlaid on top. #### Media interaction * **Zoom**: Choose how visitors can zoom into product images - open in a lightbox popup, click and hover to zoom, or no zoom functionality. * **Hide unselected variants' media on desktop**: When enabled, hides images for variants that aren't currently selected, showing only the selected variant's images. * **Loop video**: When enabled, product videos will automatically restart when they finish playing. #### Product information * **Content width**: Controls the width of the product information area - choose large for more space or small for a more compact layout. #### Mobile settings * **Show thumbnail slider**: When enabled, displays the thumbnail slider on mobile devices. When disabled, only the main image slider is shown. * **Content width**: Controls the width of the product information area on mobile devices. #### Collapsible content settings * **Card style**: Choose the visual style for collapsible content blocks - bordered (with border), elevated (with shadow), or underline (with bottom border). * **Border width**: Sets the thickness of borders for collapsible content blocks. * **Border radius**: Rounds the corners of collapsible content blocks. Set to 0 for sharp corners. * **Text style**: Controls the font style for collapsible content headings - body text or heading style. * **Content alignment**: Aligns text within collapsible content blocks (left, center, or right). #### Blocks #### Text Block * **Text**: Add any custom text you want to display, such as a tagline, disclaimer, or promotional message. * **Style**: Choose how the text appears - body (normal), subtitle (slightly emphasized), or uppercase (all capital letters). #### Title Block * **Heading size**: Controls how large the product title appears, from extra small to large. * **Heading underline**: Adds a decorative underline beneath the product title when enabled. * **Show share button**: Displays social sharing buttons next to the product title when enabled. * **Share links**: Choose which social media platforms to include in the share button - Facebook, WhatsApp, LinkedIn, SMS, Twitter, Email, Pinterest, and Link. #### Price Block * **Container**: When enabled, displays the price inside a bordered container for better visual emphasis. #### SKU Block * **Text style**: Choose how the SKU text appears - body (normal), subtitle (slightly emphasized), or uppercase (all capital letters). #### Variant Picker Block * **Style**: Choose how variant options are displayed - dropdown menu or pills (buttons). * **Swatch**: Choose the shape of color swatches - circle, square, or none (no swatches). * **Display in container**: When enabled, wraps the variant picker in a bordered container. * **Display in collapsible content**: When enabled, places the variant picker inside a collapsible section that visitors can expand or collapse. * **Hide unavailable variants**: When enabled, variant options that are sold out or unavailable are completely hidden instead of shown as disabled. #### Buy Buttons Block * **Dynamic checkout buttons**: When enabled, shows payment buttons like "Buy now with Apple Pay" or "Buy now with Google Pay" for faster checkout. * **Gift card sending options**: When enabled, allows customers to add a personal message and schedule the send date for gift cards. * **Inline display**: When enabled, displays the add to cart button and dynamic checkout buttons side by side instead of stacked. * **Show price in buy button**: Displays the product price inside the buy button when enabled. * **Show icon in buy button**: Adds an icon to the buy button when enabled. #### Description Block * **Description**: Automatically displays the product description from your product page. No settings needed - it pulls from your product information. #### Custom Liquid Block * **Liquid code**: Add custom Liquid code, app snippets, or other advanced customizations to create unique functionality. #### Rating Block * **Rating**: Displays product ratings from review apps if available. Requires a compatible review app to be installed. #### Icon/Image with Text Block * **Layout**: Choose whether icons and text appear side by side (horizontal) or stacked (vertical). * **Icon size**: Controls the size of icons from small to extra large. * **Text font type**: Choose whether text uses heading fonts or body fonts. * **Text size**: Controls the size of the text, with different options for heading and body font types. * **Icon/Image 1, 2, 3**: For each icon slot, you can choose an icon from the library, upload a custom image, and add a heading. You can add up to 3 icon/text combinations. #### Inventory Status Block * **Text style**: Choose how the inventory text appears - body (normal), subtitle (slightly emphasized), or uppercase (all capital letters). * **Inventory threshold**: Sets the quantity below which the product is considered "low stock" (0 to 100). * **Show inventory quantity**: When enabled, displays the exact number of items in stock. * **Use custom text**: When enabled, allows you to write custom messages for different inventory states. * **Low stock custom text**: Custom message shown when inventory is below the threshold. Use "QUANTITY" to display the actual number. * **In stock custom text**: Custom message shown when inventory is above the threshold. Use "QUANTITY" to display the actual number. * **Out of stock custom text**: Custom message shown when the product is out of stock. Use "QUANTITY" to display the actual number. #### Separator Block * **Separator height**: Sets the thickness of the separator line (1 to 4 pixels). * **Separator margin left**: Adds space to the left of the separator (0 to 250 pixels). * **Separator margin right**: Adds space to the right of the separator (0 to 250 pixels). #### Spacing Block * **Spacing height**: Adds empty space between content blocks (0 to 50 pixels). Useful for creating visual breathing room. #### Countdown Timer Block * **End date**: The date when the countdown should end, in YYYY-MM-DD format (e.g., 2026-12-01). * **End time**: The time when the countdown should end, in 24-hour format HH:MM:SS (e.g., 12:00:00). * **Text to show when countdown ends**: Custom message displayed when the countdown reaches zero. * **Number size**: Controls how large the countdown numbers appear. * **Label size**: Controls how large the time labels (days, hours, minutes, seconds) appear. * **Show text box**: When enabled, displays the countdown inside a bordered container. * **Color scheme**: Choose a color palette specifically for the countdown timer. *** ### Tips * Use the sticky content feature to keep important product information visible as visitors scroll through images. * The variant picker works best with the "Pills" style for products with color or size options, as it's more visual and easier to use. * Enable dynamic checkout buttons to reduce friction and increase conversions - they let customers buy with one click using saved payment methods. * Use spacing blocks strategically to break up long product information and make it easier to scan. * The countdown timer is great for creating urgency on sale items or limited-time offers. * For products with many images, the thumbnail slider at the bottom works well, while the side positions are better for products with fewer images.