How to find these settings...
- Online Store
- Customize (Theme Editor)
- Products
- Default product
- Product pages
The Product Page options contain features that are similar to Theme Settings > Product Grids & the Featured Product section
Recommended reading
In this section...
Media
Lazy load image(s)
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Desktop gallery position
Position the gallery to the left or the right when the container is greater than 768px wide
Layout
There are 4 options for the gallery layout:
- No thumbnails: No thumbs will be displayed, and all of the images will display in 1 column when the container is greater than 768px wide. When the container is less than 768px wide, the gallery will present as a slider with clickable buttons in place of thumbnails
- Thumbnails left of gallery: Vertical slider list of thumbnails positioned to the left of the gallery when the container is greater than 768px wide. When the container is less than 768px wide, the thumbs will display under the featured image gallery
- Thumbnails below gallery: Traditional thumbnail list with a left to right slider
- Thumbnails right of gallery: Vertical slider list of thumbnails positioned to the right of the gallery when the container is greater than 768px wide. When the container is less than 768px wide, the thumbs will display under the featured image gallery
Insta filter
App like filters can be applied to your images
Enable video auto play
Allow video to start itself from the beginning
Enable video looping
Allow media videos to loop
Options
Enable breadcrumbs
Display a site navigation showing visitors where they are on a site's hierarchy of content. There are 3 options for the display:
- None
- In sticky menu
- Above product details
Text color
Choose a custom color for the text
Text color hover
Choose a custom color for the text hover
Line color
Choose a custom color for the lines and borders
Section
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 640px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 640px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* NOTE: May not be available on all sections, blocks or templates