What are the Product Description and Product Intro atoms?
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.
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
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.
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: Adjust background color using the color palette.
Hover Background: Adjust the hover background color.
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.
Margin: Adjust the atom's margin in 4 directions.
Padding: Adjust the padding in 4 directions.
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
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).
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".