Product information section
By default, the Product information section is the main section on this page. This section shows all of the product's details. You can not remove this section.
The Product information section contains the following default blocks:
- Text (default displays the
product title
attribute) - Product rating
- Price
- Shopping box
- Share
- Information group
You can also add the following blocks:
- Text
- Custom liquid
- Collapsible tab
- Pop-up
- Complementary products
- Information group
- Trusted payment badge
- Countdown timer
- Separated line
- Multi-line text
The Product information section can contain up to 16 blocks.
Product information section settings
Setting | Description |
---|---|
Section width | Set the width of the section. |
Use input field background | Display the section with the background color of input fields. |
Enable sticky content on desktop | When scrolling down a page, the product information column doesn't begin scrolling until all images have been scrolled through. |
Enable sticky cart | Displays product variants and the Add to cart button when the customer scrolls up the page and passed the Shopping box(contains quantity, variants, and Add to cart button). |
Show next/previous products | Display the navigation with 2 arrows to help customers to browse the previous and next product in a collection. Only work if the customers view the product page with a collection link. Ex: /collections/collection_handle/products/product_handle. |
MEDIA SETTINGS | |
Desktop media position | Select whether to have the featured product media on the left or right. This setting only applies to users accessing the page on a desktop computer. |
Desktop layout |
How the product media display on desktop.
|
Desktop thumbnail position |
When the Desktop layout setting is set to Vertical thumbnail carousel. You can specify the thumbnail carousel display on the left or right of the main product media. |
Desktop media size | Choose between small, medium, or large media width. This setting only applies for users accessing the page on a desktop computer, because the media position is automatically optimized for mobile devices. |
Image ratio | The image ratio for main product media and thumbnail:
|
Image fit container | Tick this checkbox to fit the media to its container, otherwise maintain the media's original aspect ratio. |
Mobile layout | Choose to hide or show thumbnail images on mobile. |
Hide other variants' media when a variant is selected | When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected. |
Enable video looping | Sets the video to play on a loop, so that the video will replay automatically when it finishes. |
Section padding | Add spacing to the top or bottom of Product Information section. Use the range slider to add between 0px and 100px of space above or below the Product Information. |
Product information blocks
The following blocks can be added to the Product information section.
Text block
The text block can be used to display static text or variable data using dynamic sources. For example, you could add text displaying a marketing message, such as "Free shipping over $100 USD", which would display the same on each product. You could also add a dynamic source, such as the product's Vendor field, which would change depending on which product is being viewed.
Setting | Description |
---|---|
Text | Adds information to the product page. Supports text or dynamic sources. |
Text style |
Changes the style of the text:
|
Title block
This block displays the product's title. You can tick the checkbox to show a vendor with link above the product's title.
Price block
This block displays the product's pricing information, such as price and compare-at price. It has no adjustable settings.
Shopping box block
This is a very important block. This block displays any variant options for the product, quantity selector, buy buttons, free shipping bar, and compare button.
Setting | Description |
---|---|
Show free shipping bar |
Display the free shipping bar. Configure the free shipping bar in Theme settings > Cart > Free shipping. |
Enable compare button |
Display the Add to compare button. |
VARIANT PICKER |
|
Type |
Changes in how the variants are displayed to customers:
|
Enable color swatches |
Display pill variants in color swatches. Configure the color name in Theme settings > Color swatches. |
Color swatches style |
Specify the way to display color swatches:
|
SIZE CHART |
|
Enable |
Display the size chart link. |
Link from option |
Enter the option name. If the main product has a option name like this one, the size chart will be displayed. |
Label |
The clickable text that customers click to display the pop-up window. |
Page |
The page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template. |
QUANTITY SELECTOR |
|
Enable |
Show/hide the quantity input. |
BUY BUTTONS |
|
Show dynamic checkout buttons |
Displays any dynamic checkout options that you have enabled in your Payments settings. |
Buy buttons block
This block displays the "Add to cart" button and any in-store pickup information. It can also show any dynamic checkout buttons.
Setting | Description |
---|---|
Show dynamic checkout buttons | Displays any dynamic checkout options that you have enabled in your Payments settings. |
Description block
This block displays the product's description. It has no adjustable settings.
Product rating block
This block displays the average product rating in stars, with the number of reviews in parenthesis, for example: ★★★★★ (8).
Displaying product ratings requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count
and reviews.rating
.
Complementary products block
This block displays complementary products which need to be set up with the Shopify Search and Discovery app.
Setting | Description |
---|---|
Heading |
The title of the block. |
Show as collapsible row |
When selected, the content displays as collapsed under a row tab. When a customer clicks a title, the tab expands to display additional content. |
Icon |
Select an icon to pair with your heading when complementary products are shown as a collapsible row. |
Maximum products to show |
Select the maximum number of complementary products to show. You can select a minimum of 1, and a maximum of 10. |
TOTAL |
|
Enable total |
Show the total price of products customers selected. |
Label |
The text of the total. |
ADD BUTTON |
|
Enable add button |
When customers click this button, all selected will be added to the cart with the corresponding quantity. |
Button label |
The text of the button. |
PRODUCT CART |
|
Image ratio |
Determines the aspect ratio of the product images.
|
Share block
This block displays a clickable link that lets customers share the product on their social media.
Setting | Description |
---|---|
Text | The clickable text that customers click to share the product to their social media. |
Enable floating layout | Display the share button on the top of the page. |
Social network options | Choose the social network you want to share. |
Information group block
This block displays the Stock Keeping Unit (SKU) associated with the product( learn more about adding SKU numbers to your product variants from the admin)., vendor, inventory stock, product's tags, product's collections.
For inventory stock, this block displays a products inventory status, such as in stock, low inventory, or out of stock. By default, the low inventory threshold is set to 10. You can change the low inventory threshold to be any number from 0 to 100. If you select the Show inventory count checkbox, then the exact amount of items in stock displays to customers.
When you're sold out of an item, the out of stock status appears. However, if you've selected to Continue selling when out of stock, then the In stock inventory status continues to display after your inventory reaches zero and below.
you can refer to the follow settings:
Setting | Description |
---|---|
Low inventory threshold | Use the slider to set the threshold for when the products displays low inventory from 0 to 100. If you set the slider to zero, then the stock shows as always available until it's completely out of stock. |
Show inventory count | Select this option when you want to show the in-stock inventory count for your products. |
Custom liquid block
This block displays custom Liquid or HTML code that you can add to the block.
Setting | Description |
---|---|
Custom liquid | Displays content that you can enter as Liquid or HTML code. |
Collapsible row block
This block displays a collapsible row with a title. When a customer clicks the title, the row expands to display additional content.
Setting | Description |
---|---|
Heading | The title of the tab. Displays when collapsed and expanded. |
Icon | Choose a standard icon. |
Row content | The content of the row. Displays only when the row is expanded. |
Row content from page | Displays content from a page in the row. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Row content displays above the page content. |
Pop-up block
This block displays clickable text that opens a pop-up window when clicked. This pop-up displays content from one of your pages.
Setting | Description |
---|---|
Link label | The clickable text that customers click to display the pop-up window. |
Page | The page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template. |
Countdown timer block
This block displays a countdown timer. You can set the end date or use product metafields with type: date or datetime to set the countdown timer for an individual product.
Trusted payment badge block
By default, this block displays payment icons based on your payment settings. You can pick or upload an image to override these icons.
Separated line block
This block displays a separate line.
Multi-line text block
Add your custom text by using the rich text editor.
Product Tabs section
Section settings
Setting | Description |
Layout | Set the width of the section. |
Color scheme | Pick a color scheme. |
Section padding | Add spacing to the top or bottom of the collection list. Use the range slider to add between 0px and 100px of space above or below the collection section. |
Section blocks
Description block
This block displays a tab that shows the main product's description.
Setting | Description |
Tab title | Add the title of the tab. |
Description icon block
This block displays an icon with a label below the product description in the description tab.
Setting | Description |
Icon label | Add the label of the icon. |
Icon | Choose a standard icon. |
Page content block
This block displays a tab that shows content from a chosen page.
Setting | Description |
Tab title | Add the title of the tab. |
Page | Displays content from a page in the row. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. |
Custom text
This block displays a tab that shows custom text.
Setting | Description |
Tab title | Add the title of the tab. |
Text | Add your custom text. |
Product metafields block
This block displays a tab that shows product's metafield value. Learn more about metafields.
Setting | Description |
Tab title | Add the title of the tab. |
Namespace and key | Enter your namespace and key. |
Product recommendations section
Based on the product currently being viewed, this section displays similar products, products with a similar description, or products that are frequently bought together with this product.
Setting | Description |
---|---|
Heading | The title of the section. You can use a dynamic source for the section heading. |
Subheading | The subtitle of the section. You can use a dynamic source for the section heading. |
Heading size | Change the size of the heading text. Choose between small, medium, or large. |
Maximum products to show | Use the range slider to select the maximum number of recommended products to show. Minimum: 2. Maximum: 10. |
Number of columns on desktop | Number of columns to display on desktop computers. Minimum: 1. Maximum: 4. |
Color scheme | A set of colors that you can apply to this section. Learn more about color schemes. |
Number of columns on tablet | Set a specific column layout for tablet devices. |
Number of columns on mobile | Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
Enable swipe on tablet and mobile | Changes the mobile and tablet displays from a column to a row, where customers can swipe sideways to see more products. |
Section padding | Add spacing to the top or bottom of the section. Use the range slider to add between 0px and 100px of space above or below the section. |
Product card settings
For product card settings, you can refer to this article for more details.
To learn more about product recommendations, refer to Understanding product recommendations.
Comments
0 comments
Article is closed for comments.