Skip to main content

Featured Product

The "Featured Product" section serves as a showcase highlight on your Shopify store, drawing customer attention to a chosen item with visual prominence and detailed information. It's a concise yet impactful display, offering a quick glimpse at the product's best features through striking images, essential details, and clear call-to-action buttons. This section is designed to simplify the customer's path from attraction to transaction, accentuating the product and streamlining the purchase process.

Main settings​

  • Heading : Personalize the header of your featured product section to introduce the highlighted item. This editable field allows you to create a fitting title that captures the essence of the product showcased.
  • Product Selection : Use this field to choose the product to be featured. You can easily switch between products to keep your featured selection fresh and relevant.
  • Desktop Media Size : Select 'Large' to make a bold statement with a bigger image, or 'Normal' for a more standard size that blends seamlessly with the rest of your content.
  • Desktop Layout : Choose 'Carousel - thumbnails left' to provide a dynamic scrolling gallery, which allows customers to view all images of the featured product with ease.
  • Desktop Image Ratio : Decide on the aspect ratio for your product images. 'Original Size' maintains the image as uploaded, 'Portrait' is ideal for longer images, and 'Square' offers a consistent, grid-like geometry.
  • Mobile Image : Adjust the size of the product image for mobile viewers. Select 'Normal' for a full-scale display or 'Small' for a more compact presentation, optimizing the browsing experience on handheld devices.
  • Enable Custom Text Color : Activate this option if you wish to override the default text color. It allows you to match the text to your brand's color scheme for a consistent visual identity.
  • Text Color : Choose a color for your text using a hex code, ensuring legibility and aesthetic alignment with your overall design.
  • Enable Background Color : This toggles the ability to set a custom color for the background, potentially enhancing the visual impact of the featured product.
  • Background Color : Set a specific background color using a hex code to create a striking contrast or to maintain a thematic consistency with the product visuals.
  • Top Distance : Use this slider to control the spacing above the featured product section, creating a cushion of space for a balanced design.
  • Bottom Distance : Similar to the top distance, this adjusts the spacing below the section, allowing for a tailored fit within the overall page layout.

Customize blocks​

Mobile view example​