Display product information with the Product Description and Product Intro atoms

 

While they look similar, the Product Description and Product Intro atoms are different and serve distinctive purposes. This article explains the fundamental difference between the Product Description and Product Intro atoms along with all of their settings.

 

 

What are the Product Description and Product Intro atoms?

Product Description

When you create a product in your Shopify inventory,  you also need to add a description. The Product Description atom helps display this information on your page, it works dynamically for all active products and fetches the data over from your Shopify inventory, so you only need to set up and fine-tune your product page once, and the product description will dynamically change corresponding to the currently viewed product.

The Product Description atom is available within most Product Details section presets.

 

 

Product Intro

What if you need a strategic stand-alone page made for a flagship product? You’d definitely not want it to look like other product pages, scenarios like these are when Product Intro comes into play. Product Intro gives access to a customizable text field with full support for HTML heading tags ranging from H1 to H6 and paragraph (div), full support for text formats (Bold, Italic, Underline, hyperlinking, and coloring), so you can input and display any text content with no restrictions.

 

 

The Product Intro atom is currently only available in the Solid Brush preset.

 

 

Product Description’s configurations

Settings

Enable/Disable Image

Turn this on if you've set up your product description with images. Otherwise, this can be toggled off for faster loading speed.

 


Hit “More settings” to open more configuration options, in here you can toggle the View More button and tweak additional settings:

  • View More Action
    • Go Product: Go to the Product page of the product.
    • Pick Link: Go to any page you specified. When you select this action, there will be a Pick Link field to input the URL.
    • Show All: Show all text content.
  • View More Title: Edit the label of the View More button.
  • Color: Adjust the color of the View More button.
  • Height Description: Adjust the height of the visible content in pixels
  • Text Align Button View: Align the View More in the Left, Right, or Center.

 

 

Typography

Font size: Adjust the font size in pixels (responsive design is supported)

 


Text Color: Change text color and hover text color

 

 

Font Weight: Select a font-weight in the drop-down menu

 


Text Align: Left, Center, Right, or None.

 

 

Text Shadow: When this is toggled on, you can adjust the horizontal/vertical text position, opacity, and shadow color.

 

 

Background

Background: Adjust background color using the color palette.

Hover Background: Adjust the hover background color.

 

 

Border

Radius: Adjust the Radius in pixels or percentage.

Border: Adjust the border width, border color, and color when hovered, along with border style and direction.

 

 

Spacing

Margin: Adjust the atom's margin in 4 directions.

Padding: Adjust the padding in 4 directions.

 

 

Animation

Scroll Into View: Animations for text content when the atoms appear in the viewport.

 

 

Animation: This is the animation for the whole atom

 

 

Animation Hover: This is the animation for when the atom is hovered on.

 

 

Product Intro’s configurations

All configuration options are the same as the Product Description atom with the addition of the Text Editor, the heading tag, and the Size options.

Text Editor

See this article to learn more about editing text in the EcomSolid Editor.

 

 

HTML Tag

Tag the content from H1 to H6 for heading, or div to tag as division. You also have the option to enable excerpt (read more).

 

 

Size

Width: Adjust the width of the atom in percentage or pixels

Height: Adjust the height of the atom in percentage or pixels

 

 

When you finished designing, don't forget to hit "Save" and refresh the Editor to make sure all the changes are saved. To publish the new design to your front store - hit "Update Live", then "Yes, Update".

Should you require further assistance, our EcomSolid Support Team is here to help. We can be reached via email or live chat.


Was this helpful?