Product page
This is the main place where your customers will see the whole products with all of the relevant images and product information.
The main section within this page is the one called
Product. Below or above this section you can add more sections, but we suggest keeping the product section at the top:
The main section settings are style and spacing (more info here). The other settings are as follows:
Activating this will hide the zoom icon shown over the images on desktop and mobile.
This will enable/disable the breadcrumbs above the images:
The breadcrumbs block provides your customers with helpful information about where they come from to this page. For example the parent category and this way they can easily go back and find other products.
We suggest keeping this option turned on.
The gallery type is the way the media will be served. Below are the different options with previews for each of them.
This type shows big images aligned in two columns.
Grid - Collage
This gallery type will make your first image big, and the next will be arranged in 2 columns.
This type prints the media in a slider with thumbs mounted on the left side of the main slider.
This type prints the media in a slider with thumbs mounted on the right side of the main slider.
This type prints the media in a slider with thumbs mounted below the main slider.
Enabling this option will update the slider height based on active image height. Meaning that if you have an image that is taller - the slider will autoadjust its height to show the whole image.
All of the main product content (marked in orange below) is managed through blocks (marked in green below):
Each item in the main content column is built based on blocks under the Product section. With these blocks you can:
- add/remove features and data that you need
- reorder the content
Here are some more details for each of the blocks.
Except the block adding there are no additional settings here. Adding the block just means that the badges should be shown where the block is positioned.
These are all fixed in terms of content and they're always loaded from the product details.
The main purpose of these blocks is to be able to order the items wherever you like.
The text block can be added with whatever content you need. By default we have set that to use the product vendor.
This is the block showing the variants.
The additional settings are:
Size guide page
This page will be shown as a popup next to the size variants:
Variant picker type
Here you can choose the type of the variant pickers - to be buttons or dropdowns. You can pick different types for the size varants and for all of the other options that you'll use.
Here is an example of buttons:
And here is an example of dropdowns:
This can be added in case you want to have this functionality in general. It is suggested to show this close to the variant selectors or close to the buy buttons.
A very handy feature for notifying the customers if a specific product or variant is running low on inventory. Once the block is added, you need to pick a threshold under which the functionality will be triggered.
For example, if you set it to 15, it will be always shown for inventories under 15. It will look like this:
This will show helpful information for pickup availability to your customers. More details here: https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup?shpxid=38e10af7-DBD1-415D-ED51-54AF2464F064#show-pickup-availability-to-your-customers
The information will be shown in a popup.
This block is mainly for printing selling plans (if you use any). It's mainly for subscriptions, etc.
More details on the purchase options can be found here: https://shopify.dev/themes/pricing-payments/purchase-options
In case the purchase options are filled in through an app, in the front-end they'll look like this:
This is probably the most important block which will show the
Add to cart button so the customers can add the product to the cart. Along with the standard button, there is a setting for turning on the dynamic checkout buttons for express checkout.This is the main product content that comes from the description field in the product admin area.
It can be moved above the variant picker for example.
A very handy and functional section where you can define up to three tabs with additional information for your products like:
- shipping
- returns
- materials and care
- etc.
The information for these tabs can be global (the same for all products) OR you can use dynamic resources like metafields in order to make the content product specific.
The settings for each tab are as follows:
- heading
- body text
- page picker
The headings will be shown as tabs titles.
In case you want to show dynamic information that is product specific, the steps to do it are:
- 1.Go to Settings > Metafields
- 2.Pick Products
- 3.Pick Add definition
- 4.In the name field add a name that will match your needs like "Materials"
- 5.Pick
Select content typeand chooseMulti-line text - 6.Hit
save - 7.Then go to one of your products and at the bottom of the page you'll see a field like this:
- 8.Add the details you want to be shown for this product
- 9.Then go to the customize panel and navigate to the product page
- 10.Navigate to the Product section and the tabs blocks
- 11.Within the area where you want to print the information pick the dynamic icon:
- 12.In the newly opened dropdown pick the metafield you've just added.
Adding this block will show products that are usually bought together with the current product. Products are displayed based on the Shopify Recommendations API and Search & Discovery app. More details here.
Adding this will show a floating purchase bar at the bottom of the product page once the user scroll passes the main add to cart button. The bar contains an image, title, price, variant pickers and CTA button.
The main purpose is easy adding the product to the cart no matter where on the page the user is.
This block is for installing applications within the product page. More details of how these should be used is provided with every application installed on the store.
Last modified 1mo ago