Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Product information blocks

Product title, product price and review, product description, product meta, and brand image.
Annie

Written by Annie

Last updated

1171 views

On this page


There are 5 blocks for Product information on product page: product title, product price and review, product description, product meta, and brand image. With these blocks, it helps you display basic information about the product, giving customers an overview.

Step: Go to Theme Customize > Product page (Default product) > Product Main > Add block > choose block you want to add.

You can drag to sort the position of these blocks.

11.png

1. Product title

It shows the title of product. You can configure some options:

  • Style: Uppercase, Lowercase and Capitalize. You can choose None, so the Product title will show exactly as the way you set the product title in the Shopify backend.

  • Font Family, Font size, Font weight, Line height, Letter spacing, Color: adjust the style for Product Title. Font Family will follow the option in the Theme Settings.

2. Product Price, Review

2023-08-05_16-52-05.png
  • Price varies settings: You can choose a style for the Price varies here: from lowest price to highest price ($39 - $59) and from lowest price (from $39). You also can choose None if you wanna show the product price normally.

This setting can be seen very clearly on a Variant product. You can see the example below to see the difference in the price settings:

  • Save badge type: If your product has compared price, you can choose to show Percentage or Fixed amount here. You can choose None if don't wanna show the discount amount badge next to the price.

Save badge type: Percentage

2023-08-02_17-05-26.png

Save badge type: Fixed amount

2023-08-02_17-06-48.png
  • Show tax and shipping information checkbox: Tick on this checkbox to show the tax and shipping information below the price option.

2023-08-02_17-08-01.png

But first, you have to go to Shopify backend > Settings > Taxes and duties option > Tick on the All prices include tax checkbox:

2023-08-02_17-10-13.png
  • Use rating checkbox: Please tick on this checkbox to enable Review stars next to the product price. To set up review app, you follow this guide.

2023-08-02_17-13-56.png
  • Price size, Font weight: You can configure the style for the Product Price

  • Price/ Sale price color: You can configure the color for the Product price here. These options also support configuring Metafield, so you can change the price color for every single product.

2023-08-02_17-17-32.png

3. Product description

This block allows you to show the Description on the Product page.

Des01.png11.png
  • Description mode: You can choose Description mode here, our theme allows you to choose Full Description and Short Description

3.1. Full description

When you choose Full description, all the content of the product description will show here:

Des02.png

3.2. Short description

If you choose Short description mode, you can paste the content of the short description here, and this content will be applied to all products.

Des03.png

If you don't paste any content in the short description box, the short description will show follow the full description.

With Short desciption mode, the length of the short description will depend on the Use read more and Short description length option.

Des04.png
  • Use read more: enable the “Read more” button for the description.

  • Short description length: adjust the length of the description, enter max height description (px)

  • Read more label: You can enter the string that you wanna show on the Read more button here.

  • Read less label: You can enter the string that you wanna show on the Read less button here.

  • You can use Metafield to configure the content in Short description for a specific product. Please follow this guideline.

4. Product meta

11.webp

Click on the Product Meta block, the settings sidebar will open and you guys can configure some options below:

12.webp
  • Show product options checkbox: show the Product variant options

13.webp
  • Show product vendor:

14.webp

But you need to configure the Vendor for the Product in Shopify backend here:

15.webp
  • Show product type:

16.webp

But you need to configure the Product type for the Product in Shopify backend here:

17.webp
  • Show SKU:

18.webp
  • Show barcode:

19.webp

But you need to configure the Product SKU and Barcode for the Product in Shopify backend here:

20.webp
  • Show available: show the availability of product (In stock, Out-of-stock, Pre order)

21.webp

This option will show follow the product's quantity in stock. If the product is out of stock, this option also shows Out of stock.

To change availability text (In stock, Out-of-stock, Pre order) to another text/language, please to to Themes > Edit default theme content > search the keyword. Example:

26.png
  • Show collection product:

22.webp

The Product collection will show follow this option in the Shopify backend:

23.webp
  • Show product's tags:

24.webp

The Product's tags will show follow the setting you set in the Tags option in the Shopify backend:

25.webp

5. Brand Image

Aiming to appeal to your customers with more appealing information, a brand image on a product page is added. If you haven’t created a brand image, when you open it, nothing will show. Thus, you have to add a brand image to the menu first.

2023-08-05_17-18-49.png

Step 1: Add and copy link brand image

1. Add image: From left-side bar on Shopify Dashboard > Content > Files > Upload File.

2023-08-03_15-09-29.png

2. Copy image link: After uploading successfully, navigate to this symbol then click on it to copy image link.

2023-08-03_15-10-56.png

Step 2: Create a handle menu for image

1. Add menu

Back to Shopify Dashboard > Online store > Navigation > Add menu.

1.webp

2. Create handle menu

  • You have to create a handle menu named image-vendor-the4 by entering the same for Title or on Handle on the right-side bar. This is important because if you don’t enter exactly, the brand image will not show.

2.webp

Then, add menu item:

  • Name: You must set the name of menu item exactly the same as the name product vendor, please pay attention to normal and capital letter.

  • Link: Paste the image link that you have copied in step 1 here

  • Go to Add

3.webp

You can add all brand images into one Navigation above as this image:

brand1.gif

Step 3: Add Vendor in Product

From Shopify Admin > Product >> choose product which need to have brand image >> fill in the Vendor for it. This vendor must be match with the name of menu item in step 2.

4.webp

Step 4: Add Image Brand

From Product Page > Product Main section > Add Block > Brand Image. Then the brand image that you have added will show automatedly.

2023-08-03_15-15-31.png

Result:

2023-08-05_17-18-49.png

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.