Using metafields for additional content

The introduction of metafields with OS 2.0 added a new depth to Shopify themes and allowed an easier setup for merchants to be able to add unique content to their products, pages, blogs, collections, etc. beyond the standard description and images offered in the Shopify admin.

Please note that availability for some metafield definitions will very much depend on your theme & version.

For example, where blocks that contain text are available for selection, metafields that include text content should work without issue. Where images or references to products are selected it is likely that code will need to be modified as each theme will have its own metafield options.

If you need help updating your code to add a metafield option please reach out to us at support@weareunderground.com and we can provide a quote for this service. 

Please note that we are working to add increased metafield definitions on future theme updates. It is impossible for a theme developer to foresee what personalizations merchants might add to their stores once they have purchased a theme.

How to create metafield definitions

Metafield definitions are fields that you will create in order to be able to add unique content to your pages. 

1. In your store admin click on the Settings link.
2. Select Custom Data and under Metafields choose the specific part of your store where you'd like to add the custom data to. In the example below, we select "Products",

1. Click on the Add definition button in the top right corner

1. Add a name and description for each ( ignoring the namespace and key which is automatically generated ), make sure to use clear and concise naming as this will be displayed in your product admin.
   For example:
   
   Title: Tab 1 title 
   Description: Tab 1 title
   
   
2. The content types available here include Date and time, Measurement, Number, Text, References including files, pages, products and variants, metaobjects and collections and Other including true or false, color, rating, URL and Money. Again, please note that not all of these options are available for every section of the theme. Some may require an update to the code which we can help with for a fee.  

How to add unique content to metafields

Once a metafield definition has been created those will appear at the bottom of your product creation pages in your store admin, in which you can enter content, choose files, select products and more based on the content type that you are using.

Clicking on each field will reveal options to add content.

How to add metafield content to the theme blocks

Once you have added a metafield to your product, collection, blog, etc. you can start to add them to your theme.

In your admin open: Themes > Customize to open the theme editor.
While in the theme editor navigate to a product or page that you have added metafields to.

When working with theme blocks and content you will see that some fields will show a dynamic content icon (cylinder with the plus sign), this means that metafield content can be selected for use. Click on the icon and choose from the available metafield definitions that appear.

As mentioned above, for most text areas metafields will populate the content as expected. For images and other content mixed results are possible due to placeholder content and potential code modifications that might be required to format and display content depending on the sections or blocks used. 

Example of theme options (*theme/theme version dependent)

• Product tabs & accordions
• Text popups
• Product upsells 
• Text with icon 
• Product banner image section
• Product dynamic content 

Product tabs & accordions

Requirements:
Each individual product tab or accordion pane will require 2 Metafield definitions:

1. Title
   The title for each pane / tab that the user will click to reveal content.
   
   Choose content type: Text > Single line text.
   
   Click save to create the definition.
   
   
2. Content
   The content of each pane / tab shown when the title is clicked.
   
   Choose content type: Text > Multi-line text.
   
   Click save to create the definition.  

Text popups

Requirements:
Each text popup will require 2 x metafield definitions.

1. Title
   Text displayed that a user clicks on in order to reveal popup content
   Select content type: Text > Single line text.
   
2. Content
   Content that is shown inside the popup modal window
   Select content type: Text > Single line or Multi-line text depending on your content.
   

Product upsells

Choose a content type of Reference > Product.
This will allow you to then select a product to create upsells for all or selected items in your store.

Text with icon

Choose a content type of text > single line text to use a metafield with an icon that is selectable in your theme block options.

You can also use dates or other display definitions for this section if you prefer not to show an icon giving this block additional flexibility.

Product banner image section

Choose a content type of File with an additional rule of "Only accepts images" selected. This allows you to upload or selecting an existing image from your stores files area.
Note that for a banner image the expected display will be full screen, it is important to use an image of at least 1920px width.

Product dynamic content

The dynamic content section allows you to add blocks Specifically assign to text or images.

For image blocks choose content types of file > with "only accepts images" selected.

For text content blocks you can add title and content fields using the single line and multi-line text content types.

For advanced users:

If you're looking to output HTML, images, tables, etc... in your metafields, you can use the single-line-text option, and it will output your HTML. 

For example, in this single text field, I've added an image tag:

Now, in an accordion using this "allergens" metafield as my dynamic source, it outputs the image as coded:

Please note that we will not support issues outputting HTML via your metafields, as this is only for advanced users.