Product
Start by choosing your preferred look or skip to the detailed section settings further below:
Look 1: Thumbnails with same color scheme
Layout: Thumbnails
Ensure the media color scheme and product information color scheme are the same
Look 2: Thumbnails with different color scheme
Layout: Thumbnails
Media padding: This affects just the top and bottom of your thumbnails column on desktop. Adjust so it matches your product information column (especially if it's aligned to the top).
Color schemes: Adjust your media color scheme and/or product information color scheme to create the split look (they must be different).
Product information > Vertical alignment: Align your product information content to the top if you want it neatly aligned with the top of your thumbnails or keep it centered (resize your browser to see how it feels at different screen sizes).
Look 3: Slideshow with stretch images
Layout: Slideshow
Media color scheme: The color scheme only affects the slideshow previous/next buttons (e.g. if you want dark buttons/light buttons) in this look. In the above screenshot, we're using color scheme 1 in Precision with the primary button style.
Media size: Stretch
Look 4: Slideshow with "adapt to media" images
Layout: Slideshow
Media padding: None
Ensure the media color scheme and product information color scheme are the same
Button style: Choose primary, secondary or text for your previous/next buttons (and video transcript button, if enabled). In the above screenshot, we're using the primary button style from Precision's color scheme 1.
Media size: Adapt to media
Look 5: Slideshow with "adapt to media" images and different color scheme
Layout: Slideshow
Media padding: Adjust to your liking. In the above screenshot, we selected XXLarge.
Color schemes: Adjust your media color scheme and/or product information color scheme to create the split look (they must be different).
Button style: Choose primary, secondary or text for your previous/next buttons (and video transcript button, if enabled). In the above screenshot, we're using the primary button style from Precision's color scheme 4.
Media size: Adapt to media
Look 6: Vertical scroll with mobile slideshow
Layout: Mobile slideshow, desktop scroll
Bonus: Mobile gradient
Layout: Slideshow OR Vertical scroll (bear in mind if you choose slideshow, the gradient effect will also be on desktop).
Media padding: Adjust to your liking. In the above screenshot, we selected XXLarge.
Media size: Adapt to media
Color schemes: Create a media color scheme that is a vertical linear gradient where the color at the bottom matches the product information color scheme. Adjust the transparency of the bottom color so it melts into the other color scheme.
Section settings
Product: Choose a product to feature
Product media:
Layout: Choose between 3 layouts (you can explore the various looks here):
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. Available in version 1.2.0 and later
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 create interesting looks.
Blocks
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 product blocks:
Last updated
Was this helpful?