Product page: Customize the style and layout of your product pages

 You need to be viewing a product to see the edit options on the left of the theme editor

Settings

  • Layout - Full widthClassic or Clean. See the section below for more on this.
  • Layout width - sets how wide the content page will display
  • Show breadcrumbs - links at the top of the page showing path how users got to the product
  • Show vendor - use if your store sells products made by many vendors Nike, Adidas, Puma etc.
  • Product variant style - changes how product variants are selected - Dropdowns, Buttons or Color swatches and buttons.
  • Show custom swatch images - more info here Product page: Display color swatches
  • Show quantity selector - plus and minus buttons to allow customers to add more/less products to their cart.
  • Show tax notice - small text snippet under the price. Recommended use for tax information. Text can be updated in theme translations area.
  • Show low stock notice - red text below quantity selector that indicates remaining product stock. Good for creating urgency. 
  • Low stock notice threshold - low stock notice will show if quantity is equal or lower than the threshold number. 
  • Show dynamic checkout buttons - With dynamic checkout buttons, customers can skip the cart and go directly to the checkout - see the image below to see an apple Pay example.
  • Checkout badges image - this image will display at the bottom of 'add to cart' box
  • Show social sharing buttons - Twitter, Facebook etc share icons.

Media settings

  • Enable image zoom - use if you want to allow people to click to view a bigger product image in a popup
  • Enable video looping - if video is used in the product gallery it will not stop after it ends and will repeat automatically
  • Image size - small, medium or large
  • Background color - select from Default grey, Brand, Accent, White and Black. Brand and accent colors are set up in your General settings of the theme editor.
  • Text color - if using a dark background color you can switch the text to Light (white)
  • Background height - you can make the background color cut through you product images - see more below

Layout - Full width vs Classic vs Clean

Venue was originally designed to display your product images the full width of your product page with the description and Add to cart module below. We have recently added the ability to select a Classic or Clean layout which places the product images and Add to cart module side by side. For Classic the description, reviews and global tabs will still remain below. For Clean the description moves under 'add to cart' area.

More on background color

If you use product images that have been cut out in Photoshop and placed on a transparent background - perhaps with a drop shadow - you can achieve some dramatic effects on your product pages.

  1. You can select Default on the Background height to make the background color look like it is cutting through the product. This gives your page depth.
  2. Alternatively by selecting Full on the Background height you can put a full height block of color behind your product shots. This can make them look like they are floating.
  3. Alternatively use a white or transparent background color for a more minimal look.

bg_cut.png

Text color

If you have decided to use a very dark background color on your product pages you might find that the product heading, brand border and vendor heading don't have enough contrast to be legible. In this case we recommend setting the Text color to Light.

This feature does not affect any headings in the rest of your store.

Screenshot_2017-04-06_15.47.02.png

Product tabs and recommended products

We have written separate article on these subjects. Please look at the related articles listed below.

Image sizes

Please see the related article linked below to learn more about image sizes.