The Product page is a crucial element of any online store. By customizing its sections and blocks, you can create a page that is both informative and persuasive, and that encourages users to purchase your products or services.
The Product page contains multiple sections, which are made up of blocks. This article provides an overview of the Template sections group which is included in this templates.
By default, Product page has the following sections:
- Product information
- Help drawer
- Video hero
- Collage
- Image with text
- Scrolling text
- Product details
- FAQ
- Apps
- Related products
- Recently viewed
1. Product information
This section shows information about the product.
| Section settings | Settings | Description |
|---|---|---|
| Product information | Enable sticky contetnt on desktop | Affixes the product content to the screen when the customer scrolls down (or up) through the featured product images. |
| Media
|
||
| Desktop media width | The width of the media on desktop, which can be adjusted from 35% to 70% to modify the size of
this section.
|
|
| Desktop layout | Displays desktop layout:
|
|
| Image zoom | 3 options available:
|
|
| Hide other variants’ media after selecting a variant | When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected. | |
| Enable video autoplay | Plays video automatically. | |
| Enable video looping | Plays video repeatedly. | |
| Mobile layout | Selects one of the following two options:
|
|
| Show thumbnails on mobile | Displays thumbnails on mobile. | |
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
Available blocks:
- 1.1 Breadcrumb
- 1.2 Text
- 1.3 Title
- 1.4 Price
- 1.5 SKU
- 1.6 Inventory status
- 1.7 Quantity selector
- 1.8 Variant picker
- 1.9 Product variations
- 1.10 Buy buttons
- 1.11 Pickup availability
- 1.12 Description
- 1.13 Share
- 1.14 Help desk
- 1.15 Custom Liquid
- 1.16 Product rating
- 1.17 Complementary product
- 1.18 Collapsible row
1.1 The settings for the Breadcrumb block.
Enable to show collections page in breadcrumb list.
1.2 The settings for the Text block.
| Block settings | Settings | Description |
|---|---|---|
| Text | ||
| Text | Adds your text. | |
| Text size | The text size can be set to one of the following options:
|
1.3 The settings for the Title block.
| Block settings | Settings | Description |
|---|---|---|
| Title | ||
| Title size | The size of the title:
|
|
| Show product price | Enables to display product price | |
| Show product rating | Enables to display product rating. |
1.4 The settings for the Price block.
Enable Show taxes notice to display the taxes notice.
1.5 The settings for the SKU block.
No customizable settings available.
1.6 The settings for the Inventory status block.
| Block settings | Settings | Description |
|---|---|---|
| Inventory status | ||
| Low inventory threshold | The minimum quantity of a specific product that a business wants to have on hand at any given
time.
Chooses 0 to always show in stock if available. |
|
| Show inventory transfer notice | Displays the inventory transfer notice | |
| Color scheme | Choose one of the following 6 options:
|
1.7 The settings for the Quality selector block.
No customizable settings available.
1.8 The settings for the Variant picker block.
| Block settings | Settings | Description |
|---|---|---|
| Variant pickers | ||
| Show variant labels | Displays the label of the variants. | |
| Type | The style of the variant picker. Choose either Dropdown or Button. | |
|
Enable color swatches
Requires variant picker type to be "Button". |
Displays the color variants in swatches.
This requires 'Button' variant picker type. Learn how to set up swatches. |
|
| Swatch type | Choose either Color swatch or Variant image. | |
| Size chart | Size chart page | If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page. Here's to choose your page that represents size chart content. |
1.9 The settings for the Product variations block.
| Block settings | Settings | Description |
|---|---|---|
| Product variations | ||
| Option name | Adds the option name (Eg: Color, Style...) | |
| Option value metadield | Enters namespace and key of the metafield holding the value. Eg: custom.color | |
| Product | Picks the products you want to feature.
Select all the variations (including the product itself). |
|
| Color swatches | ||
| Enable color swatches | Enables to display color swatches. | |
| Swatch type | Selects one of the following two options: Color swatch or Product image. | |
| Size chart | Size chart page | If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page. Here's to choose your page that represents size chart content |
1.10 The settings for the 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.
| Block settings | Settings | Description |
|---|---|---|
| Buy buttons | ||
| Show quantity selector | Enables to display quantity selector. | |
| Show dynamic checkout buttons | Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. | |
| Show recipient information form for gift cards. | Allows buyers to send gift cards on a scheduled date along with a personal message. |
1.11 The settings for the Pickup availabilityblock.
Allows your customers to see availability in retail stores by setting up local pickup.
1.12 The settings for the Description block.
Selects the size for the description text:
- Small
- Medium
- Large
- Extra large
1.13 The settings for the Share block.
| Block settings | Settings | Description |
|---|---|---|
| Share | Text | Adds text for the block. |
| Help desk | ||
| Show help desk | Enables to show help desk | |
| Help label | Text describes Help label block. | |
| Help type | Selects between style Drawer and style Page for your Help page. | |
| Help page | Adds the URL you want to link. |
1.14 The settings for the Help desk block.
| Block settings | Settings | Description |
|---|---|---|
| Help desk | ||
| Help label | Text describes Help label block. | |
| Help type | Selects between style Drawer and style Page for your Help page. | |
| Help page | Selects a page to link the Help desk block to. |
1.15 The settings for the Custom liquid block.
You can add your own Liquid code to create a custom block. Learn more.
1.16 The settings for the Product rating block.
Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating. Learn more.
1.17 The settings for the Complementary product block.
| Block settings | Settings | Description |
|---|---|---|
| Complementary products | ||
| Heading | Enters text for your complementary product. | |
| Maximum products to show | The number of complementary products can range from 1 to 10. | |
| Show vendor | Displays the vendors of the products. | |
| Show price | Displays the prices of the products. |
1.18 The settings for the Collapsible row block.
| Block settings | Settings | Description |
|---|---|---|
| Collapsible row | ||
| Icon | Choose a pre-made SVG icon that accommodates your collapsible tab. The None option will disable the icon. | |
| Heading | The title of the tab. Displays when collapsed and expanded. | |
| Row content | The content of the tab. Displays only when the tab is expanded. | |
| Row content from page | Displays content from a page in the tab. 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 Tab content displays above the page content. |
2. Help drawer
This section gives customers quick and easy access to information, such as the store's products, services, and policies.
| Section settings | Settings | Description | Help drawer |
|---|---|---|
| Heading | The section title. | |
| Description | The description text for the heading is placed below the heading. |
Available block: Content block.
The settings for the Content block.
| Block settings | Settings | Description |
|---|---|---|
| Content | ||
| Icon | Picks the icon for the content on the list. | |
| Heading | Large text for the title of the content. | |
| Text | Adding your text.
Example:sharing contact information, store details, and brand content with your customers. |
|
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
3. Video hero
.
| Section settings | Settings | Description |
|---|---|---|
| Video hero | Allow transparent header | This setting only applies when this section is the first one. |
| Shopify-hosted video | Video | Chooses a video from Shopify-hosted video. |
| Embed video from URL | ||
| URL | The YouTube or Vimeo link to the video. The video must be publicly available. | |
| Cover image | The image that displays before a customer plays the video. | |
| Video ALT text | Describes the video to make it accessible for customers using screen readers. | |
| Enable video autoplay | Plays video automatically.
|
|
| Desktop content width | Determines the width of the image when viewed on desktop:
|
|
| Mobile layout | ||
| Mobile video | Chooses/Uploads a video by uploading on a mobile browser. | |
| Or embed video from URL | Embeds a video from URL on a mobile browser. | |
| Mobile cover image | The image that displays before a customer plays the video on mobile browser. | |
| Mobile height | Determines the height of the image when viewed on mobile:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section full width | Make the container full width. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
Available block: Slide block.
The settings for the Slide block.
| Block settings | Settings | Description |
|---|---|---|
| Slide | ||
| Heading | The block title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
4. Collage
This section creates a collage of videos or images in two columns. By default, the section contains a video, product, and collection block.
| Section settings | Settings | Description |
|---|---|---|
| Heading | ||
| Heading | The section title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
| Heading alignment | The Heading can be aligned to the Left, Center, or Right. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Subheading | The subheading for the heading is placed above the heading. | |
| Description | The description text for the heading is placed below the heading. | |
| Button label | The text that displays on the button. | |
| Button link | The URL of the button. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Enable parallax effect | Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene. | |
| Custom CSS | Adds custom CSS to this section. | |
Available blocks:
- 4.1 Image block
- 4.2 Video block
4.1 The settings for the Image block.
| Block settings | Settings | Description |
|---|---|---|
| Image | ||
| Subheading | The subheading for the heading is placed above the heading. | |
| Heading | The block title. | |
| Link | The link that you want customers to navigate to if they click on. | |
| Invert subheading and heading | Swaps position the heading and subheading. | |
| Image | Chooses/Uploads an image for the block. | |
| Image ratio | The image ratio for the blog post images:
|
|
| Desktop content position | The position of the content on desktop:
|
|
| Desktop content alignment | The alignment of the content on desktop:
|
|
| Mobile layout | ||
| Mobile image | The image for the block displayed on mobile. | |
| Mobile image ratio | The image ratio for the images on mobile browser:
|
|
| Mobile content position | The position of the content on mobile browser:
|
|
| Mobile content alignment | The alignment of the content on mobile browser:
|
|
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
4.2 The settings for the Video block.
| Block settings | Settings | Description |
|---|---|---|
| Video | ||
| Subheading | The subheading for the heading is placed above the heading. | |
| Heading | The block title. | |
| Link | The link that you want customers to navigate to if they click on. | |
| Invert subheading and heading | Swaps position the heading and subheading. | |
| Shopify-hosted video | Video | Chooses a video from Shopify-hosted video |
| Embed video from URL | ||
| URL | The YouTube or Vimeo link to the video. The video must be publicly available. | |
| Cover image | The image that displays before the video plays. | |
| Video ALT text | Describe the video to make it accessible for customers using screen readers. | |
| Enable video autoplay | Playing video automatically. | |
| Enable video looping | Playing video repeatedly. | |
| Image ratio | The image ratio for the blog post images:
|
|
| Desktop content position | Sets the position of the content on desktop:
|
|
| Desktop content alignment | Sets the alignment of the content on desktop:
|
|
| Mobile layout
|
||
| Mobile video | Chooses/Uploads a video by uploading for mobile browser. | |
| Or embed video from URL | Embed a video from a URL on a mobile browser. | |
| Mobile cover image | The image that displays before the video plays on mobile. | |
| Mobile image ratio | The image ratio for the images on desktop browser:
|
|
| Mobile content position | Sets the position of the content on mobile browser:
|
|
| Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
5. Image with text
You can add a section that contains an image and a text block with an optional button to link customers to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
| Section settings | Settings | Description |
|---|---|---|
| Image with textt | ||
| Image | The image for the section displayed on desktop browser. | |
| Desktop height | Determines the height of the image when viewed on desktop:
|
|
| Desktop image width | Determine the width of the image when viewed on desktop: Small, Medium or Large | |
| Desktop image placement | The layout for the section on desktop:
|
|
| Desktop content alignment | Sets the alignment of the content on desktop:
|
|
| Mobile layout | ||
| Mobile image | The image for the section displayed on mobile browser. | |
| Mobile height | Determines the height of the image when viewed on mobile:
|
|
| Mobile content alignment | Sets the alignment of the content on mobile browser:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Enable parallax effect | Enable to display the parallax effect, which creates the illusion of depth in a two-dimensional image or scene. | |
| Custom CSS | Adds custom CSS to this section. | |
Available blocks:
- 5.1 Heading
- 5.2 Text
- 5.3 Button
- 5.4 Link
- 5.5 Image
- 5.6 Custom liquid
- 5.7 Empty space
5.1 The settings for the Heading block.
| Block settings | Settings | Description |
|---|---|---|
| Heading | ||
| Heading | The block title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
5.2 The settings for the Text block.
| Block settings | Settings | Description |
|---|---|---|
| Text | ||
| Text | Adding your text. | |
| Text size | The text size can be set to one of the following option:
Custom option allows you to set the text size to any value you want, from 12px to 128px, increasing arithmetically of 2 px. |
|
| Text font | Choose between 2 options for the text formatting: Body or Heading. | |
| Use secondary color | Enable secondary color. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
5.3 The settings for the Button block.
| Block settings | Settings | Description |
|---|---|---|
| Button | ||
| Button label | The text that displays on the button. | |
| Button link | The URL of the button. | |
| Button size | Adjust size of the button in 3 options: Small, Medium or Large | |
| Use outline button style | Uses the outline style for the button. |
5.4 The settings for the Link block.
| Block settings | Settings | Description |
|---|---|---|
| Link | ||
| Text | The text of the link, which is placed right beside the button. | |
| Link | Add the URL you want to link. |
5.5 The settings for the Image block.
| Block settings | Settings | Description | Image |
|---|---|---|
| Image | Selects an image for block. | |
| Image width | Chooses one of two image width options:
|
5.6 The settings for the Custom liquid block.
You can add your own Liquid code to create a custom block.
5.7 The settings for the Empty space block.
| Block settings | Settings | Description |
|---|---|---|
| Empty space | ||
| Desktop height | Determines the height of the empty space when viewed on desktop. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 40 px. | |
| Mobile height | Determines the height of the empty space when viewed on mobile. Can be from 0 px to 120 px, increasing arithmetically of 4 px. Default is 28 px. |
6. Scrolling text
This section allows the creation of scrolling text that moves across the screen. It can be used to display a lot of information in a small space, attract attention, or for other purposes.
| Section settings | Settings | Description |
|---|---|---|
| Scrolling text | ||
| Direction | Select the desired scrolling direction:
|
|
| Speed | Determines the speed of the Scrolling text. Can be from 0.5/100px to 2.5/100px, increasing arithmetically of 0.1/100px. | |
| Horizontal space | The spacing between texts range from 50px to 200px, increasing in increments of 5px. | |
| Enable twin marquees | Displays two marquees at the same time | |
| Enable parallax effect | Enable the parallax effect, which creates the illusion of depth in a two-dimensional image or scene. This setting can be used to highlight scrolling text. | |
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
Available blocks:
- Text block
- Image block
6.1 The settings for the Text block.
| Block settings | Settings | Description |
|---|---|---|
| Text | ||
| Text | Adding your text. | |
| Text size | The text size can be set 12px to 180px. | |
| Text font | Chooses between 2 options for the text formatting: Body or Heading. | |
| Stencil text | Enable stencil text.
May not work in all browsers. |
6.2 The settings for the Image block.
| Block settings | Settings | Description |
|---|---|---|
| Text | ||
| Image | Selects an image for the block. | |
| Image height | The image height can be set between 12px and 180px. |
7. Product details
This section shows information about the product.
| Section settings | Settings | Description |
|---|---|---|
| Product details | ||
| Open first Collapsible row | Enables to open first Collapsible row. | |
| Specifications heading | Adds your text, which would be included in the Box. | |
| Heading | ||
| Heading | The section title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
| Heading alignment | The Heading can be aligned to the Left, Center, or Right. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Subheading | The subheading for the heading is placed above the heading. | |
| Description | The description text for the heading is placed below the heading. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
Available blocks:
- 7.1 Description
- 7.2 Collapsible row
- 7.3 Specification
7.1 The settings for the Description block.
Heading - Adds your heading text.
7.2 The settings for the Collapsible row block.
| Block settings | Settings | Description |
|---|---|---|
| collapsible row | ||
| Heading | The title of the tab. Displays when collapsed and expanded. | |
| Row content | The content of the tab. Displays only when the tab is expanded. | |
| Metafields | Enter namespace and key of the metafield holding the value. Each metafield must be in its own line. |
7.3 The settings for the Specification block.
| Block settings | Settings | Description | | Icon |
Selects/Uploads an icon image. |
Heading |
The block title. |
|
|---|
8. FAQ
This section shows information about the frequently asked questions.
| Section settings | Settings | Description |
|---|---|---|
| FAQ | Style | Choose With border style or With background style to display the section |
| Heading | ||
| Heading | The section title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
| Heading alignment | The Heading can be aligned to the Left, Center, or Right. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Subheading | The subheading for the heading is placed above the heading. | |
| Description | The description text for the heading is placed below the heading. | |
| Button label | The text that displays on the button. | |
| Button link | The URL of the button. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
Available blocks:
- 8.1 Rich text
- 8.2 Question
- 8.3 Contact form
8.1 The settings for the Rich text block.
| Block settings | Settings | Description |
|---|---|---|
| Rich text | ||
| Title | The block title. | |
| Text | Adds descriptive text for this block. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
8.2 The settings for the Question block.
| Block settings | Settings | Description |
|---|---|---|
| Question | ||
| Question | Adds a frequently asked question. | |
| Answer | Adds the answer. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
8.3 The settings for the Contact form block.
| Block settings | Settings | Description |
|---|---|---|
| Contact form | ||
| Heading | The block title. | |
| Text | The text to display in the block. | |
| Show phone number | Displays phone number. | |
| Team avatar | Chooses/Uploads an image to display team avatar. | |
| Team avatar height | The height of team avatar, can be adjusted from 20px to 100px. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
9. Apps
| Section settings | Settings | Description |
|---|---|---|
| Shopify Product Reviews |
Enable Product Reviews integration
Install the Shopify Product Reviews app to use this feature. Only shows on product pages. |
Enables to show Product Reviews integration.
Adjust the Product Reviews app to the look and feel of the theme. Turn off to use the original app design. |
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
This section does not support adding blocks.
10. Related products
| Section settings | Settings | Description |
|---|---|---|
| Related products | ||
| Number of related products | Selects from 2 to 12 products to display in this section. | |
| Number of columns on desktop | Customizes the number of columns displayed on desktop from 1 to 5. | |
| Enable carousel on desktop | Displays a carousel of products on desktop. | |
| Mobile layout | ||
| Number of columns on mobile | Customizes the number of columns displayed on mobile: 1 columns or 2 columns. | |
| Enable swipe on mobile | ||
| Heading | ||
| Heading | The section title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
| Heading alignment | The Heading can be aligned to the Left, Center, or Right. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Subheading | The subheading for the heading is placed above the heading. | |
| Description | The description text for the heading is placed below the heading. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
This section does not support adding blocks.
11. Recently viewed
Helps your customers to find the products they'd previously visited and prompt them to purchase. This is easier for your customers to find them again rather than find their way through the navigation menu.
| Section settings | Settings | Description |
|---|---|---|
| Recently viewed | ||
| Number of recent products | The number of complementary products can range from 2 to 12. | |
| Number of columns on desktop | Customizes the number of columns displayed on desktop browser from 1 column to 5 columns | |
| Enable carousel on desktop | Displays a carousel of products from the collection on a desktop browser. | |
| Mobile layout | ||
| Numer of columns on mobile | Customizes the number of columns displayed on mobile browser: 1 column or 2 columns. | |
| Enable swipe on mobile | Sets mobile display to one row with horizontal swipe. | |
| Heading | ||
| Heading | The section title. | |
| Heading size | The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge. | |
| Heading alignment | The Heading can be aligned to the Left, Center, or Right. | |
| Heading tag | Selects the heading tag to structure and organize your content for SEO. | |
| Subheading | The subheading for the heading is placed above the heading. | |
| Description | The description text for the heading is placed below the heading. | |
| Highlighted text
|
||
| Highlighted text | Chooses from one of the following 6 options to format your text:
|
|
|
Highlighted scribble
Require highlighted text style to be set to Hand-drawn scribble. |
This setting offers 5 ways to highlight text:
|
|
| Color
|
You can optionally customize the colors of the section, including the following:
|
|
| Section | ||
| Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px. | ||
| Show section divider | Shows a line divider above this section.. | |
| Make section narrow | Makes the container narrow. | |
| Make section rounded | Applies a rounded edge to the top two corners. | |
| Custom CSS | Adds custom CSS to this section. | |
This section does not support adding blocks.
We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.
