Description

Author: An Do 4590 views

A description allows you to introduce more details about the product that you are going to sell, such as where it comes from or the price of each type. You may also know what kind of material the product is made of.

Note: In the EComposer App, you can’t directly edit the Description Content. It is the description of product that you add to Shopify. You can go to edit your product in Shopify admin to edit the description.

To add this element, click to Element icon from the left sidebar –> Single Product tab–> Description. Drag the Description element and Drop it wherever you want it to be located.

1. Configure Description Content

1.1 Content Type

Text: Displays plain text from your product description without HTML tags. The content will appear without custom styling, formatting, or paragraph structure.

HTML: In Shopify, you can format and style your description by using a rich text editor. When using the rich text editor, HTML tags will be added to the content. To examine the HTML document or something like the content from inside the editor, please go to Shopify Admin -> Product -> Find the Product that you would like to change -> Enter the Description -> Click the Code symbol to switch to HTML mode.

Result on live page:

1.2 Description Type

We have 4 types for you to choose from: Short, Full, Tabs, Accordion.

Full: it provides full information so that users can clearly understand the exact details of product.

Short: Displays only part of the product description initially. Customers can expand or collapse the content using the View More and View Less options. This option is useful when the product description is too long and you want to keep the product page clean and easy to navigate.

– Maximum words to show: This allows you to change the number of words that will be limited in the Product Description (only works when you choose Short description type).

– View more/ View less: When the product description is too long, we can show part of it first. Then the customer can click View more to expand the full product description and click View less to collapse it back to the short version.

Tabs: The content of the Description is automatically divided into tab layout styles. Tabs are often used to break up different information/topics that you want your customers to be aware of when reading about the product or service. They can be a great way to reduce visual clutter while also showing much more detail without having to send a customer to a different page.

Every tab has one tab title, so the Heading tag option means that you decide which heading tags from the description will show up as the tab titles.

For example, the Heading tag – H2 is chosen. Once the tab titles automatically arrange and show up according to the product description, you don’t have to use Metafield to customize content on different products anymore; you just need to use this Tab feature.

Note: You must add Heading tag texts to the content of the Shopify product description for this to work. The content of the title and content should not contain div, style, script, or main tags.

Accordion: the content of the Description is automatically divided into accordion layout styles. Accordions are commonly used to organize and present different pieces of information or topics that you want your customers to explore while learning about a product or service. They are an excellent tool for minimizing visual clutter while allowing you to include more details without redirecting the customer to another page.

Each accordion contains a single tab title, and the Heading tag option lets you determine which heading tags from the description will appear as the tab titles.

In this example, the Heading tag H2 has been selected.

Note: You must add Heading tag texts to the content of the Shopify product description for this to work as same as to do with Tabs type. When adding Heading tags, it’s important to be mindful of the tag-related issues mentioned earlier in the context of Tabs.

2. Design

You may create a new style design that belongs to you with a bunch of features below, to make your Product Description look more colorful.

Description: You may set up the Alignment, Typography, Text Color, and Text Shadow for the text.

View more: Also, you can change some of the useful structures like Alignment Typography, Text Shadow, Box Shadow, and some of the functions when you choose the Normal button or Hover.