Creating Visual Product Description Using HTML Editor

Posted by:
ajencyin

Published on:
April 16, 2021

There are many steps to ecommerce success, from high quality products to a beautiful landing page, but one of the most important ingredients is a well designed product page. Without this essential, even the hottest products will fail to sell.

We live in a very fast-paced world, and unfortunately, some people might not have the time to read your entire page. Most shoppers are looking for quick, easy, and scannable product pages. That’s why it needs to be easy to scan for crucial information.

Human beings are hardwired to connect with visuals, and our brains respond to them 60,000 times faster than they do to text. In fact, small bits of text that are isolated from larger chunks are so enticing. In other words, if you want to catch (and keep) a customer’s attention, stunning visuals are the way to go.

Whether it’s a Quora answer, medium post or a product landing page, visual content increases the power of your content dramatically. By default Shopify gives you only one field for adding your product description. This makes it difficult to create visually different sections to highlight various product details.

Read on to know how we solved this problem for one of our Shopify websites.

There are some commonly available HTML editors that can be used to create additional sections for your product pages. We have implemented some visual sections for product pages using Bootstrap builder in LayoutIt.

LayoutIt is a web-based tool to layout a web page design with drag-and-drop. You can simply drag-and-drop various fields such as title, paragraph, image, table, buttons etc. that are already available on LayoutIt in the left panel. It supports the latest Bootstrap version and if you don’t want to start completely from scratch, it has 3 basic templates you can use. The design then, is ready to be used in your project complete with built-in Bootstrap code.