Featured product
The featured product section allows you add a complete product form to a page other than the product page. Adding a product form to another page can be useful for stores with custom flows.
Last updated
The featured product section allows you add a complete product form to a page other than the product page. Adding a product form to another page can be useful for stores with custom flows.
Last updated
Quick start
and follow the simple setup instructions
Browse the available
Product: Choose a product to feature
Product media:
Layout: Choose between 3 layouts (you can ):
Slideshow: If your images have a portrait ratio, consider using this layout with the image aspect ratio set to stretch for maximum visual impact
Thumbnails: Most flexible layout, great for stores that don't have consistent product image ratios
Vertical scroll, mobile slideshow: This layout is great if you have several product images per product and your product images are focused on visual storytelling
Mobile maximum width: Keep product media full width or choose page width or compact to shorten the media height and bring important product details higher up on the page. To achieve the above look, select a slideshow layout for mobile (slideshow or vertical scroll) with compact product media and slide animation style.
Enable zoom: Allows product images to be zoomed. On touch screens and with keyboard only users, this appears as a modal popup that can be scrolled, for desktop mouse users this appears via a click and hover mechanism. Please note, in order to properly support zoom, you will need to upload high quality product images, we suggest a minimum width or height of 3000 pixels.
Enable autoplay: If you have video as a part of your product media, this will autoplay the video when it is navigated to. If you have concerns about accessibility or you are using the vertical scroll layout, we do not recommend enabling this option. Please note, that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
Color scheme: This setting controls the color scheme of the background color around the media as well as any buttons that may display. If you are using an adapt slideshow or thumbnail layout, try using a different color scheme for a split panel effect!
Media padding:
On the thumbnail layout, this adds top and bottom padding to the thumbnail section.
On the slideshow layout, if the image aspect ratio is set to adapt, this controls the size of the frame around the media.
This setting has no effect in the vertical scroll, mobile slideshow layout
Button style: This applies to slideshow and zoom. Choose between primary, secondary or text.
Slideshow: These settings only apply to the slideshow and vertical scroll, mobile slideshow layouts.
Media size: Choose between adapt and stretch. Adapt will display the media in it's original aspect ratio, with space around it. You can control the level of spacing using the Media padding setting (see above).
Animation style: Allows you to choose between a slide and a fade animation.
Counter style: Choose between hidden, counter or progress bar.
Progress bars on product media appear directly under the image, a different style to progress bars elsewhere in the theme)
The progress bar option works especially well with a stretched slideshow layout or if your media section has a different color scheme.
Enable looping: Unless enabled, the previous button on the first slide and the next button on the last slide are disabled. Enabling this option allows the smooth cycling through the slides.
Product information:
Color scheme: Choose the color scheme for the product information column. When product media and product information have different color schemes, you can .
All the product information blocks are grouped under one parent block called product information.
In this grouping block, you can set the following settings:
Horizontal alignment: Aligns content to the left, center or right
Vertical alignment: When the product information content is shorter than the product media on desktop, you can align it to the top, middle or bottom.
Container width: This allows you to control the maximum container width. This setting may not have any effect on smaller screens.
Top/bottom padding: This setting controls for padding on the product information only. To adjust padding on the media section, use the media padding setting.
Within the product information block, you can nest all the different types of :
