Product information blocks

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.

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

• 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

Save badge type: Fixed amount

• Show tax and shipping information checkbox: Tick on this checkbox to show the tax and shipping information below the price option.

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

• Use rating checkbox: Please tick on this checkbox to enable Review stars next to the product price.

• 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.

3. Product description

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

• 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:

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.

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.

• 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

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

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.

Step 1: Add and copy link brand image

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

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

Step 2: Create a handle menu for image

1. Add menu

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

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.

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

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

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.

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.

Result: