Product page
Product Page
The product page template allows you to customize the product page to fit your store and products. From here, you can change the placement, layout, and content.
Product Image
The top section of the product page is usually a "Product Image Section". This section contains the "Product Image" block, which displays the product images for each product.
Product Image Section
General Settings
The general settings for the section allow you to customize things like background color, visibility, and width. For example, if you change the background color for the section, this will change the color that is behind the product image itself.
Under advanced settings, you will find the options for column width. All designs are built up of 8 columns. By changing how many columns a section should occupy, you can adjust its width on the page. If the product image section is set to 4 columns, it means that it will occupy half of the product page. The number of columns can be changed for all device types (PC, tablet, and mobile).
Margin (Distance)
Margin lets you adjust the distance between sections. For example, if you set a 20px margin at the bottom, it will mean that there will be 20px of "air" between this and the next section.
Padding
Padding creates air/padding on the inside of the section, as opposed to margin, which sets the distance on the outside of the section.
Video
These settings apply when using a product video and will affect how a video appears when you open it on the product page.
Product Image
The product image block has several settings that are directly related to the product images, and not just the layout like the product image section.
General Settings
- Slideshow: When active, you can click on the product image to see it in a popup/slideshow.
- Image Width: Adjust the width of the product image. For best results, it is recommended to set this setting as accurately as possible, to avoid the browser having to load a much larger image than necessary.
- Show Arrows in Image Carousel: If active, you will get buttons with arrows over the product image that allow you to click back and forth between the images. The arrows' color, background color, rounded corners, and size let you customize the appearance.
- Show Arrows on Thumbnails: Similar to the setting above, this will show arrows on the thumbnails so you can easily scroll between images.
- Set Automatic Playback: If active, the product images will automatically change after x number of seconds.
- Enable "Lazy Load" for Images: The setting ensures that images are not loaded until the section is displayed to visitors. If the section is placed at the very top, it is recommended to have this setting turned off so that the product images are loaded when the product page is loaded.
Product Purchase
The product purchase section is one of the most important on a product page. It's where you find the product name, price, stock status, purchase button, and much more.
Available Blocks
Product purchase has a number of available blocks to display necessary information to the customer. In addition to pre-made blocks for price etc., there is also a text block that can be used for free text and custom HTML.
Remember, you can sort the blocks as you wish by clicking and dragging.