# Featured product ### Section overview The Featured Product section allows you to showcase a selected product with full details and functionality on any page, similar to the product page experience. #### Common use cases * Highlighting a flagship product on the homepage * Creating dedicated landing pages for special promotions * Showcasing seasonal or limited-edition products * Building category pages with featured items #### Usage tips * Select a product that represents your brand well as this section provides a comprehensive product view * Customize the section's layout and positioning to match your store's design * For best visibility, position this section prominently on pages where conversion is important * On mobile, consider your media gallery position and mobile column layout settings for optimal viewing * Ensure all essential product information is visible without requiring excessive scrolling ### Section settings | Setting | Description | | ---------------------------------- | ------------------------------------------------------------------------------ | | Product | Select the product to feature in this section | | Enable default variant | Select first available variant automatically when customer loads the page | | Enable default plans | Select first available selling plan automatically when customer loads the page | | Enable default selling plan widget | Use the default Shopify selling plan selection interface | | Media gallery style | Choose between grid, slider, or slider with thumbnails for product images | | Media gallery position | Position the media gallery at the top, right, bottom, or left of the content | | Media slider size desktop | Control the size of the slider on desktop devices (percentage) | | Media slider size mobile | Control the size of the slider on mobile devices (percentage) | | Media grid size | Set number of images to display in grid view before pagination | | Indicator type | Choose the style of slider indicators (none, full, or standard) | | Enable arrows | Show navigation arrows on the product gallery slider | | Show alt text | Display alt text on product images when available | | Show variant images | Show variant-specific images when variant is selected | | Enable header overlap | Allow this section to overlap with the header | | Enable zoom | Allow customers to zoom in on product images | | Zoom level | Control how much customers can zoom into product images | | Media color scheme | Choose the color scheme for product media | | Media border | Select border styling for product media | | Media ratio | Choose the aspect ratio for product images (portrait or square) | | Media object sizing | Choose how images fill their container (fit or fill) | | Use ratio | Force all images to maintain the same aspect ratio | | Top spacing | Control the space above the section (in pixels) | | Bottom spacing | Control the space below the section (in pixels) | | Color scheme | Select the section's background color scheme | | Custom color | Choose a custom background color (when custom scheme is selected) | | Enable color fade | Enable page background color transition effect when scrolling | | Mobile column layout | Choose whether left or right column appears first on mobile | | Column width | Control the width ratio between left and right columns | | Enable media margin | Apply horizontal margin to media gallery | | Enable main margin | Apply horizontal margin to main content | ### Block settings #### Linked products Displays related or complementary products. * **Block limit**: None | Setting | Description | | --------------- | -------------------------------------------------------- | | Title | Add a title for the linked products section | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | #### Custom Adds a custom input field for special product options or requests. * **Block limit**: None | Setting | Description | | --------------- | -------------------------------------------------------- | | Label | Text label for the custom field | | Required field | Make this field required for form submission | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | #### Breadcrumb Displays breadcrumb navigation to help customers understand their location. * **Block limit**: 1 | Setting | Description | | --------------- | -------------------------------------------------------- | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | #### Title Shows the product title with additional details. * **Block limit**: 1 | Setting | Description | | ------------------- | -------------------------------------------------------- | | Content | Additional content to display with the title | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | | Savings badge | Show savings amount as percentage, amount, or not at all | | Show product badges | Display product badges (such as "Sale" or "New") | | Show product type | Display the product type | | Show product vendor | Display the product vendor/brand | | Show product SKU | Display the product SKU | #### Price Displays the product price and any discounts. * **Block limit**: 1 | Setting | Description | | --------------- | -------------------------------------------------------- | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Font family | Select the font family for the price display | | Position | Place this block in the left or right column | #### Text Adds custom text to highlight product features or information. * **Block limit**: 10 | Setting | Description | | --------------- | -------------------------------------------------------- | | Content | Custom text content to display | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | | X alignment | Align text left, center, justify, or right | #### Description Shows the product description. * **Block limit**: 1 | Setting | Description | | ------------------ | -------------------------------------------------------- | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | | X alignment | Align text left, center, justify, or right | | Show accordion | Display description in a collapsible accordion | | Use open accordion | Expand accordion by default | #### Accordion Creates collapsible content sections for organizing product information. * **Block limit**: 10 | Setting | Description | | ------------------ | -------------------------------------------------------- | | Title | Title for the accordion section | | Content | Content to display when accordion is expanded | | Icon | Optional icon to display beside the accordion title | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | | Use open accordion | Expand accordion by default | #### Inventory Displays product inventory level or availability status. * **Block limit**: 1 | Setting | Description | | ------------------- | ------------------------------------------------------------------- | | Inventory threshold | Set the inventory level below which to show low inventory messaging | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | #### Pickup Shows local pickup availability information. * **Block limit**: 1 | Setting | Description | | --------------- | -------------------------------------------------------- | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | #### Options Displays product variants and selling plan options. * **Block limit**: 1 | Setting | Description | | --------------- | -------------------------------------------------------- | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | #### Add Creates an add-to-cart button with optional supporting content. * **Block limit**: 1 | Setting | Description | | -------------------------- | -------------------------------------------------------- | | Content | Optional text to display below the add-to-cart button | | Top spacing | Control the space above the block (in pixels) | | Bottom spacing | Control the space below the block (in pixels) | | Color scheme | Select the color scheme for this block | | Border color | Select the color for block borders | | Border position | Choose where borders appear (none, top, bottom, or both) | | Position | Place this block in the left or right column | | Enable quantity | Allow customers to select quantity before adding to cart | | Enable dynamic checkout | Show dynamic checkout buttons for direct checkout | | Enable gift card recipient | Allow customers to add gift card recipient info | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.brickspacelab.com/space/sections/products-and-collections/featured-product.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.