A lot of our eCommerce clients need ways to create a more engaging user experience by providing things such as detailed descriptions, image / video galleries, info-graphics and how-to-use guides. To do this we need a way to expand the product fields that Shopify offers. There are few approaches; splitting the product.description field, metafield APPs (we've found Custom fields 2 to be useful), theme snippets , page builder APPs plus about a million accordion APPs. Below we'll outline another method, using theme sections to augment the product page fields.
How it works
This will be jumping off from a point that assumes you are up to speed on Shopify sections, but if not you can read up on the basics here. It's a simple concept that is easy to implement; create a section with dynamic blocks and reference one of those blocks on your product page.
1) First create a Shopify theme section and add the schema. It's a good idea to name each block as it makes it a little easier to read in the theme customizer UI as the number of blocks increases. Next add a setting with a product dropdown, this is used to reference the block on the product page in step 2. Below that, you can add as many fields as you need.
2) Now add the liquid to the section, use an if statement to show the block on its appropriate product page and Oulla, you have as many extra product fields as you need!
Does it work?
We think so. It's not perfect, for example it can make the process of copying a theme onto new account slightly more complex (images in theme sections are referenced from settings > uploads), but the the positives far outweigh the negatives. Having a familiar UI to expand the amount of content each product can hold has proven to be popular with our clients. It can be used to create an effective product page, we implemented it on a recent redesign and development for shonline, yielding some pretty cool results and a positive impact on their conversion rates.
Thanks for reading, if you have any questions or ideas on how to improve this idea then leave a comment below!