# 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 |