Using metafields for additional product 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 beyond the standard description and images offered in the Shopify admin.
Support for some metafield definitions will very much depend on your theme & version. 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 content options.
We are working to add increased product metafield definitions within future theme updates, note that 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 each or selected products.
- In your store admin click on the Settings link.
- Select Metafields followed and choose Products,
- Click on the Add definition button.
- 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.
Title: Tab 1 title
Description: Tab 1 title
- The content types available include dates, measurements, Files, URLs, Colors and References to pages, products and variants.
Some of which have built in support from our themes as referenced in current theme options below.
How to add unique product content to metafields
Once some metafield definitions have been created those will appear at the bottom of your admin product pages 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 some metafields to a product you can start to add them to your theme.
In your admin open: themes > customize theme to open the theme editor.
While in the theme editor navigate to a product 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, this means that metafield content can be selected for use. Click on the icon and choose from the 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 ( especially for products that do not have metafields assigned to them ) due to placeholder content and potential code modifications that might be required to format and display content depending on the sections or blocks used.
- Product tabs & accordions
- Text popups
- Product upsells
- Text with icon
- Product banner image section
- Product dynamic content
Product tabs & accordions
Each individual product tab or accordion pane will require 2 Metafield definitions:
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.
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.
Each text popup will require 2 x metafield definitions.
Text displayed that a user clicks on in order to reveal popup content
Select content type: Text > Single line text.
Content that is shown inside the popup modal window
Select content type: Text > Single line or Multi-line text depending on your content.
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.