Dedicated Shop - Sales Page - Product View design

The product view has 4 distinct layout styles and a variety of other theme customisations you can make. These can be applied to all products at once, or chosen individually per product.

The product style, media fit and media height settings work together to control the product view appearance. As different types of products may have different media requirements, these options allow you to customise each product to suit your images or videos.

Contents:

  • Default Style - select the product view appearance for all products at once.

  • Default Media fit - choose if product images and videos are cropped to fit the media area or shown in full.

  • Media height - define the height of the media area to control the size of product images and videos.

  • Current Set - override the style and media fit defaults for individual products.

  • Theme styling - general settings for colours, typography and styling of elements.

Default Style

This defines the main layout of your sales page in product view and applies to all products at once.

In the preview window navigate to one of your products. Go to Page then Components. Select the Product View > Style.

This will be the default style for all of the products in this shop.

Default Media fit

The media fit controls how the product image or video fits within the space it occupies on the page.

Go to Page then Components. Select the Product View > Media Fit.

Full means that each of the images is shown in full, in its original aspect ratio. If your images are a mix of orientations (portrait and landscape) this will result in empty space around some of the images.

Cropped means that all of the product images are cropped to a defined space. If you select this option, you can control the maximum amount of space the images take up, see Media height below.

For consistent results, consider cropping all product images to the same orientation and aspect ratio.

Media height

This controls the maximum area an image or video will fill on the product view.

While viewing a product in the preview window go to Style > Sales and adjust the Product View | Media > Height.

Set the height slider to auto to take up the maximum amount of vertical space based on the size of the monitor.

Media height is defined per style, so you can set a different height for each style e.g. Stacked can have a different height to Two Column.

Current Set

The Current Set options apply only to the specific set you're viewing in the preview window.

Navigate to the product view of your chosen set in the preview window. In Page > Current Set you can find product view Style and Media Fit options. These will be set to Default for all new products (see Default Style above). Changing the options here will apply to the current set only.

The current set options are a way to override the default settings which apply to all products. They can be used to mix and match product styles across your shop.

This can be useful if you sell products which have different presentation requirements or to highlight special items by making them stand out with a different look.

Theme styling

There are detailed theme options to control colours, typography and sizing of all the sales page elements.

View one of your products in the preview window and go to Style > Sales. The side panel contains settings for product view information and other page elements like the add to cart button and carousel indicators.

Typography settings apply to all layout styles, so the options you choose here will persist if you change to a different one.

Style > Sales Navigation includes the settings for styling of the breadcrumb trail navigation, Similar items and Related products.