Skip to main content

: Product Page Settings ( Default Template )

  • Updated

Confirm Your Layout

  • Default: The desktop product title is to the right of the featured product image
  • Banner: The desktop product title is above the featured product image. Learn More

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 & Rows and the Featured Product section.

 

Recommended reading

In this section...

 

Image

Banner images have two options:

  1. Set an image used on ALL products using the Image picker in the Theme Editor
  2. Set an image for INDIVIDUAL products using a metafield to assign an image within the product admin:
    • Create a Product file metafield
    • Add definition
    • Provide a Name & Description
    • 'Select content type' File > Only accepts images
    • Save
    • Visit a product
    • Scroll down to Metafields
    • Click into the input next to the metafield you created for the image and select or upload a file
    • In the Theme Editor, above the Image picker, click the metafield icon to connect the file

Full width

The banner image and overlay color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:

Setting

Desktop Width

Minimum Image Width

Full width checked

100%

1900px

Full width unchecked

1180px

1180px

 

The height will determine the overall width of the background image.  The following would be used to determine the actual necessary width of an image:

Screen Width x Height x Image Ratio = Desired Width

 

Height

The overall height of the banner in relation to the height of the screen.  0-5% is the minimum, and it steps up by 5 to a maximum of 100%. 

 

Overlay color

A color may be applied to background images to help the text clarity

 

Overlay gradient

A gradient may be applied to background images to help the text clarity

 

Overlay opacity

When an 'Overlay' color has been selected, control the opacity with the slider.  0% is the minimum, and it steps up by 5 to a maximum of 100%

 

Media

Product media includes images, 3D models, and videos. For more information, review the Product media documentation

 

Enable square image (1:1) formatting

The featured image container will be squared and the image will fit proportionally regardless of the width or height

 

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 1160px images.

 

Enable video looping

Allow media videos to loop

 

Options

Center text

Text can be aligned to the left or centered to the container

 

Product add to cart redirection

If checked, when the customer clicks add to cart, they will stay on the same page.  This promotes further shopping within the store.  If you would prefer that they go directly to the cart, uncheck this option

 

Show social sharing buttons

Provide options for your users to share your post to Facebook, Twitter & Pinterest

 

Section

Lazy load images *

Disable for "above the fold" images.  Enable for any image that is not visible on the initial page load

 

Background color

Choose a custom color for the background

 

Background 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 10 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 10 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. 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 768px 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 768px 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 768px 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'

 

* May not be available in all Sections

 

* NOTE: May not be available on all sections, blocks or templates