Skip to main content

: Product Page Settings

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Top, middle dropdown
  4. Products
  5. Default product
  6. Product pages

The Product Page options contain features that are similar to Theme Setting > Product Grids and 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

 

Image aspect ratio

The image has 4 options for display:

  • Natural:  Uses the height of the image
  • Short (4:3): A landscape format will be applied
  • Square (1:1): A square format will be applied
  • Tall (2:3): A vertical format will be applied

 

Enable image crop

The image will crop to fill up the container format chosen with 'Image aspect ratio'. NOTE: If disabled, white space will be applied around the image. Has no effect when media aspect ratio is set to 'Natural'

 

Enable image zoom

Turn on the ability to zoom into the featured product image. To provide a good zoom but keep file sizes low, it is recommended to use 1180px images.  

 

Zoom level

Set the scale for the zoomed in product image.  1.5x is the minimum, and it steps up by 0.5 to a maximum of 5x

 

Enable video auto play

Allow video to start itself from the beginning

 

Enable video looping

Allow media videos to loop

 

Options

Text color

Choose a custom color for the text

 

Text color hover

Choose a custom color for the text hover

 

Button text color *

Choose a custom color for the button text hover

 

Line color

Choose a custom color for the lines and borders

 

Slider color

Choose a custom color for the slider

 

Section

Show image sizes *

Displays the minimum recommended width for each image. If applicable, the height* will display after the width. Size is displayed in the Theme Customizer only, customers will not see this.

* NOTE: Height is approximate, and the actual height is dependent on the individual screen. Learn more

 

Full width *

The option of being as wide as the screen or only as wide as the content container

 

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 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px

 

Bottom padding

Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px

 

Bottom margin

Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. -240px is the minimum, and it steps up by 5 to a maximum of 60px

 

DESKTOP

 

Top padding

Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px

 

Bottom padding

Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px

 

Bottom margin

Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. -240px is the minimum, and it steps up by 5 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