Comment on page
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:
Enabling this checkbox will reduce the spacing between the items in the product main block. This will make your call to actions appear upper in the content.
This will enable/disable the zoom popup of the images in the main gallery section. If this is turned on, once an image is clicked it will be shown in a popup and the user will have the ability to zoom in the image.
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 available options are:
- Top - Within container
- Top - Far left
- Above product info
The gallery type is the way the media will be served. Below are the different options with previews for each of them.
This option will show one image per row taking maximum horizontal spacing.
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.
This setting lets you choose the ratio of the images shown in the gallery. The available options are:
- Original - keeping the images ratio as it is by default
- Landscape
- Square
- Portrait (3:2)
- Portrait (4:3)
- Portrait (5:4)
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. The settings available in this block are- Show recipient information form for gift card products - will enable additional form for gift cards where users can add recipients info. More info here
- Accent color - updating this will set a custom color to your Add to Cart and Buy buttons. This way you can make your call to actions more noticeable.
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.
The additional options for this block are:
- Collapsable - turning the content into a collapsable accordion item
- Expanded by default - used when Collapsable is ON in order to make the accordion item expanded by default
When
Collapsable and Expanded by default are ON the content will look like this:
This block will allow you to add more collapsable items (accordion elements) to your product page. Information like shipping, returns, etc. can be added to these entries. Example:
For every collapsable element you can add Label and choose the content by entering it in a rich text area OR picking a page where to load the content from.
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 or collapsable element 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.
Here is a short video showing the process of creating a metafield and attaching it to a dynamic resource:
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.
Separator blocks are helper blocks that can help you organize your content in a more readable way. Example:
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 4mo ago