Featured Product

Bulletpoints block
Buy button block
Collapsible tab block
Complementary products block
Custom option block
Featured Product
Inventory status block
Price block
Product Page
Product recommendations
Rating block
Separator block
Share buttons block
Title block
Upsell block
Variant picker block

What is the Featured Product section?

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 device.
  • 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

‍

Back