Combine > Product page

The product page is the most important page on your store, where the actual purchases happen, so you need to carefully set this up in order to make sure that it converts in the best possible. Our theme has all the tools you need to achieve this, so let's get started.

Product gallery settings

The product page has mostly settings that control the style and layout of your gallery. You can switch between a vertical scrolling gallery that is available in one or two columns and a horizontal sliding gallery that is available in a single column. You can also change the media width both on desktop and mobile.

There are are other nice options that allow you to choose the media aspect ratio, to make sure that you find a setting that fits your images in the best possible way, or if your images have various aspect ratios, you can check the "Fit images inside container" option, which will make sure that your images will not be cropped, but instead will be contained inside the image placeholder. If you check this option, you can also choose a background color for the media and spacing if you wish.

Other gallery settings include the option to show or hide the thumbnails, add border radius to the images, enable video looping or image zoom.

Product page functionalities

After the gallery settings, you will see some settings on functionalities, such as the ability to select the first available variant by default or force customers to choose a variant before adding the product to the cart. Another great setting is the sticky cart, which works in two ways:

• On Desktop, it appears after the add to cart button gets out of the screen (only after it is shown)
• On Mobile, it appears always, if the add to cart button is not on the screen (before and after it is shown)

You can customize the button's look and feel with the provided options.

Product page blocks

When you first edit the product page you will see some settings related to gallery style on desktop (scroll vs slider) and pagination design. You can also control the media aspect ratio and border radius.

After setting up the gallery, you can change the content of the product page using blocks, so you can really achieve a lot of things with different products, page templates, metafields and more. Let's break down the blocks:

• Price - it shows a small price and can be used for long product content where the buy buttons (which can have the price shown as well) and the details are disconnected
• Title
• Product rating - will show the product's rating if there is an app for reviews
• Text - you can either add static text and change it's style or use metafields to add dynamic text which changes with each product
• Pickup availability - it'sthis is a more standard component which shows local availability at more than one location with much more details for each one, and it also expands into a drawer for multiple locations
• Description
• Icons list - similar to the product grid's icons list, this is a place where you can also add static icons or connect with the same metafields that you are using for the individual product icons .. If not all products have icons, you can even connect the title to a dynamic source in order for it to only appear when you want it to appear. This is versatile area because you can have different titles and different icons for each product page you're having.
• Variants - it has some styling & functionality options. You can add color swatches here, as it follows the same rules described in the collection page article
• Buy buttons - with a couple of nice options
• Share - for sharing on popular social platforms
• Product list - this is a very nice section which can be used together with metafields in order to make cross selling / up selling promotions on product pages. You can either have the same products selected, or have different products for each product. Or, you can also use it to showcase different products in product bundles.
• Product promotion - can be used to either upsell individual items or write about free items that you are offering with your products
• Tax information - displays a "tax included" notice for stores where this is a legal requirement
• SKU / barcode
• Collapsible tab
• Inventory level - displays the product stock levels with a few options

• Image - add a simple image with a link, that can be useful for banners, promotions or extra information about the product
• Size guide - this can be used to display a size guide button that can open a page either in a new window or in a popup. Useful to display size guides or extra product information in modal windows.