# Featured product ### Section overview The Featured Product section allows you to showcase a selected product with its complete details, providing a full product page experience within any page of your store. #### Common use cases * Highlighting a best-selling product on your homepage * Creating focused landing pages for special promotions or new releases * Featuring seasonal products in content pages * Building educational pages around flagship products #### Usage tips * **Best practices** * Select a product with high-quality images for the gallery to make the best visual impact * Use the flexible block system to prioritize the most important information for your specific product * Consider using the accordion block for detailed specifications to keep the interface clean * Place the most important content at the top of each column * **Common pitfalls to avoid** * Adding too many blocks can overwhelm customers - focus on essential information * Not utilizing the media gallery settings appropriately for your product images * Forgetting to check how options and variants display on both desktop and mobile * Leaving default content placeholders in text blocks * **Mobile responsiveness considerations** * The layout automatically shifts to a single column on mobile devices * Media gallery size can be separately configured for mobile and desktop * Consider the order of your blocks as this affects the vertical scrolling experience on mobile * Test the zoom functionality on mobile to ensure it provides a good customer experience ### Section settings | Setting | Description | | ------------------------------- | --------------------------------------------------------------------------------------------- | | Product | Select the product to display in this section | | Use default variant | When enabled, the first available variant will be preselected | | Use default plans | When enabled, the first available subscription plan will be preselected | | Use default selling plan widget | When enabled, uses the default Shopify selling plan widget instead of a custom implementation | | Media gallery style | Choose between a simple slider or a slider with thumbnails | | Desktop media size | Sets the width percentage of the media gallery on desktop devices | | Mobile media size | Sets the width percentage of the media gallery on mobile devices | | Image border | Sets the border style for product images | | Gallery position | Position the gallery on the left or right side of the product details | | Show alt text | Displays the image alt text below the gallery | | Show variant images | Changes the gallery images when a variant with its own images is selected | | Enable zoom | Allows customers to zoom in on product images | | Zoom level | Sets the magnification level when zooming product images | | Media color scheme | Sets the background color for the media gallery | | Media border | Sets the border style for the media gallery container | | Media ratio | Sets the aspect ratio for product images (portrait or square) | | Media object sizing | Determines how images fill the container (fit or fill) | | Use ratio | Forces images to maintain the selected aspect ratio | | Top spacing | Sets the amount of space above the section | | Bottom spacing | Sets the amount of space below the section | | Color scheme | Sets the background color for the entire section | | Column width | Sets the width percentage for the left column | | Enable media margin | When enabled, adds margin around the media gallery | | Enable main margin | When enabled, adds margin around the main section content | ### Block settings #### Title Displays the product title with optional additional content. * Block limit: 1 * **Settings**: | Setting | Description | | ------------------- | ------------------------------------------------------------ | | Content | Additional content to display alongside the title | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | | Savings badge | Shows savings as a percentage, amount, or hides it | | Show product badges | Displays product badges such as "Sale" or "Sold out" | | Show product type | Displays the product type alongside the title | | Show vendor | Displays the product vendor alongside the title | | Show SKU | Displays the product SKU alongside the title | #### Price Displays the product price, including compare-at price and payment terms if available. * Block limit: 1 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Description Displays the product description, optionally as an accordion. * Block limit: 1 * **Settings**: | Setting | Description | | ----------------- | ------------------------------------------------------------- | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the color style for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | | Text alignment | Aligns text left, center, justified, or right | | Show as accordion | Displays the description in a collapsible accordion | | Default open | When using accordion mode, determines if it's open by default | #### Options Displays product variant options, such as size, color, and material. * Block limit: 1 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Add to cart Adds the purchase button and quantity selector. * Block limit: 1 * **Settings**: | Setting | Description | | ----------------------- | ------------------------------------------------------------ | | Optional text | Text to display below the add to cart button | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | | Enable dynamic checkout | Shows dynamic checkout button below add to cart | #### Text Adds a custom text block with rich text formatting. * Block limit: 10 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Content | Custom text content to display | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | | Text alignment | Aligns text left, center, justified, or right | #### Accordion Adds a collapsible content section with a title and custom content. * Block limit: 10 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Title | The heading for this accordion block | | Content | The content shown when the accordion is expanded | | Icon | Optional icon to display next to the title | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the color style for the accordion | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | | Default open | Determines if the accordion is open by default | #### Table Displays product information in a structured table format. * Block limit: 1 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | #### Form Adds a contact form for product inquiries. * Block limit: 1 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Content | Content to display above the contact form | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Border color | Sets the color of the border for this block | | Button color | Sets the color style for the submit button | | Border position | Determines where borders appear (none, top, bottom, or both) | #### Linked products Displays related or recommended products. * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Title | Heading for the linked products section | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Custom field Adds a custom field input for product customization. * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Label | The label for the custom field input | | Required field | Makes this field required for form submission | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Breadcrumb Displays breadcrumb navigation to show product location in your store. * Block limit: 1 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Inventory Shows product inventory information and stock level. * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Rating Displays product ratings and reviews. * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Drawer Adds a button that opens a popup drawer with additional content. * Block limit: 10 * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Linked option | Connect drawer to a specific product option | | Title | The label for the button that opens the drawer | | Page | Select a page whose content will appear in the drawer | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Liquid Adds custom Liquid code for advanced customization. * **Settings**: | Setting | Description | | --------------- | ------------------------------------------------------------ | | Liquid | Custom Liquid code to render within the block | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | #### Upsell Displays upsell product recommendations. * **Settings**: | Setting | Description | | ----------------- | ------------------------------------------------------------- | | Title | Heading for the upsell section | | Content | Custom content for the upsell section | | Top spacing | Sets the amount of space above this block | | Bottom spacing | Sets the amount of space below this block | | Color scheme | Sets the background color for this block | | Border color | Sets the color of the border for this block | | Border position | Determines where borders appear (none, top, bottom, or both) | | Position | Places this block in the left or right column | | Show as accordion | Displays the upsell in a collapsible accordion | | Default open | When using accordion mode, determines if it's open by default | --- # 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/keystone/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.