Product Description Shopify Section

Add your product description anywhere on your product page, as a full-width section.

Most themes don't come with a section like this. They only let you output the product description in a block in the "product information section" (usually to the right side of the product images).

If you have a really long description, you probably don't want it taking up a lot of space in that product information section.

You would rather add it lower down on the page.

That's what this section does.

You can drag it around the page, just like any other section.

And yes, this uses your actual product description, not just some text you add in the theme editor.

Works on all themes

The section will inherit your theme's style settings automatically. The fonts, heading sizes, and colors should immediately be the same as the rest of your store.

Comes with settings to customize your store

Choose Background Color

Often a light grey background works nicely to create alternating sections on the page. You can of course keep it white.

Font size

You can adjust font size of the entire description e.g. if you want to make it a bit larger than your normal body text.

Text color

If you go with a darker background you might want to use white text.

Maximum width

Keep the text in a narrow container. A common design mistake is allowing really wide text across the page, which is hard to read. A narrow container around 600-800px will keep customers more engaged.

Side paddings

When the screen size is narrower than your max-width (above), your text will meet the edges of the screen. You can prevent this by adding side paddings. It's best to use exactly the same paddings as the rest of your store, so I've made this very flexible. You can use any units - pixels, percentages, or rem, to match what your theme is using. If you don't know how to match your theme - email me.

Top and bottom paddings

A basic slider to adjust the spacing between sections.

Simple install process:

1. Open up your Shopify admin and go to Online Store.
2. On your published theme (or whatever theme you want to install the section on) click on the three dots and then Edit Code.
3. In the code editor, scroll down in the left sidebar, to find a folder called Sections. Click on "Add a new section".
4. Select "liquid" and name the section "ed_product-description". It should automatically get the .liquid extension added to it. Click Done.
5. You will probably see some code added in that section by default. Delete that code so you have a totally blank file.
6. Open up the PDF you downloaded when you bought this product. Preferably click on the link to view the online version. Copy & paste the code into your newly created liquid file. Hit save. Done!

Feedback?

I will be updating this product if I get any requests for new settings, features or bug reports. Feel free to email me at hi@ed.codes.