Product page

Everything you will need to know on how to setup your productpage

Jalal avatar
Written by Jalal
Updated over a week ago

The productpage settings contain all the settings you need to configure your productpage. You can build your own productpage from scratch, but ofcourse we've provided the theme with a default productpage.

How to edit the productpage?

The productpage contains of sections, these sections can be added, editted and removed. You can use all the sections that are used on the homepage, but also have some specific ones for the productpage. We will go in depth about these sections later.

First you'll have to navigate to the productpage template.
You can do this by navigating to Products -> Default product in the top bar of the theme editor

Once on this page, the default template is ready to be edited!

General 'Product' settings

The general product settings contains the basic settings for how the products on the productpage should behave. This is the most important section of the productpage.
The product settings also contain blocks, which are there to style the elements of your productpage. We will go in depth about this after the general settings.

Simply click on the 'section' to open the settings.

On the right sidebar, the following settings will show:

Layout

Images Layout


The Next theme offers four layout options for product images:

  • One image with scroll: This layout enlarges the product image in the gallery, and when you scroll on the page, the images also scroll.

  • Two images with scroll: This layout displays two product images, both of which enlarge when clicked, and scroll along with the page.

  • Collage with scroll: The images will appear in a collage/gallery format.

  • Single image with slider: This layout showcases a single product image that can be viewed using a slider.

Space between images

It controls the spacing between the images work for only the first 2 layouts.

Fill image:
In Next you have an option to make the product images filled. The "fill image" option in refers to a feature that automatically adjusts and stretches the image to fill the available space without distorting its proportions.

Font size
Enable this option to have a custom font size for the product section, it will change the font of title, description, labels everything in the product section.

Show product description:
Do you want to show the main product description, select this option. We recommend to enable/activate this, so people can read the product descriptions.

Heading Size:

Control the heading size for the description title.

Show product description in drawer:

If you have added the short description block, you can check this option which will make the description open in drawer when someone click read more:

Enable 'read more' link:
This may come in handy if your product description is quite long. Enabling this setting will show the description only partially by default, and your customers can click on a 'read more' link to show the rest of the description.

You also have options to adjust the mobile layout, you can collapse product description by default and adjust the heading size. If you want to change product images layout to fullwidth or boxed width.

Blocks of the products

As stated before, the product page contain many blocks. These blocks can be setup in the product section.

Vendor: By default it is set hidden but you can enable it to display vendor above the product title.

Title: As per the name of block, it adds and control the product title and it can be further customized with the available settings.

Price: Adds the price on your product page.

Short description: Add short description with a read more link which is enabled by default but can be hidden from this block setting.

Pickup availability: If you store offers Pickup availability you can simply add this block and it will automatically query details from Shopify.

Variant Picker: A major component of product section, it shows available variants of the product. Comes with 2 layout:

You can show color swatches/images and display single variant as well:

Product codes: Displays barcode and SKU.

Inventory & delivery time: The inventory and delivery time block does not contain settings. However it's an block on your productpage that might be quite handy. This block makes it possible for you to show the inventory (stock) of the product and the delivery time of that product. You can find the settings in the general theme settings under the tab named 'Products'.

Product reviews: The product reviews section does not contain settings, however, you'll have to setup an review app for the product reviews to show. Before you enable the section, please make sure you install Shopify's free Product Reviews app before enabling this section.

Shipping timer: The shipping timer block does not contain any settings, because they are located in the general theme settings under the tab "Shipping & delivery". More information about the shipping timer can be found here.

Share buttons: Check which icons should be shown when clicked on 'Share this product'.

Size chart: It is a separate block which you can add to display a size chart on your store.

True size bar: This blocks enable you to guide you customers selecting perfect fit, for example if you're selling Tees and they run large then normal sizes you can display it:

Product Specifications: This section is also moved to a different block and can be added if required. Fill in the specification field using metafields or write text in specification box. It can be further customized with these available options.

Let us know if you have any questions about Product section or anything.

Did this answer your question?