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