In this tutorial I’ll show you the easiest and fastest way to add metafields to a theme, and after use the “Dynamic Sources” to add them to your theme.
In order to use a dynamic source in your theme first you need to have a data source.
The source of data will be added via a metafield on one of the Shopify resources types like: collections, products, pages, etc.
The dynamic source will be connected to a metafield inside your theme settings and it will pull the data from that metafield and list it on the storefront wherever you assign it.
Why the name “Dynamic sources”, because they pull dynamic data stored in metafields. Your data that you store in the metafields will be different for each product.
Adding metafields
Login to your Shopify store first. If you do not know how to do that, I’ve written a detailed tutorial here: “How to login into your shopify store?”
For this example I’ll add a metafield to the “Product” page. So let’s go to the “Settings” section of your store:
Go to “Custom data” (marked with 1 in the image below) and select “Products” (marked with 2 in the image below):
Click on any of the “Add definition” buttons like in the image below:
I’ll add a product subtitle metafield.
In the “Name” field (marked with 1 in the image below) add the metafield name, I’ll add “Subtitle”.
On the “Namespace and Key” (marked with 2 in the image below) you don’t have to do anything since this will be added automatically by Shopify.
On the “Description” (marked with 3 in the image below) add the metafield description. I’ll add “Product subtitle”.
Click on “Select type” (marked with 4 in the image below) to set the type of the metafield.
Select “Single line text” like in the image below since we are interested to add a single input box where we can add a product subtitle for each product:
Now you see more options.
Select the “One Value” (marked with 1 in the image below) and check the “Storefronts” (marked with 2 in the image below) in order to allow you to use the metafield for your Storefront in your theme editor with dynamic sources.
If “Storefronts” is not checked your metafield will not be available in the theme editor.
I’ll not use the “Validations” and “Features” sections in this tutorial but depending on your needs you can use them.
Click the “Save” button to save your metafield.
If your metafield was added successfully you’ll see it listed in the “Product metafield definitions” (marked with 1 in the image below):
Before moving to the next step make sure that your metafield is pinned (marked with 2 in the image above).
To check how many pinned metafields you have, check the “Pinned” status (marked with 3 in the image above).
If the metafield is not pinned you’ll not see it displayed in the product page or the resource type for which you’ve created the metafield.
Add data to the metafield
Go to the products page (marked with 1 in the image below) and open a product (marked with 2 in the image below):
Go to the bottom of the page to the “Metafields” section (marked with 1 in the image below) and add a value to the “Subtitle” metafield (marked with 2 in the image below):
Add your text (marked with 1 in the image below).
If your text is wrong you can “Clear” the box with the “Clear” link (marked with 2 in the image below).
After you’ve added the text click the “Save” button (marked with 3 in the image below) to save your changes.
Now we have the metafield created and also data stored inside.
Attach the metafield value to the dynamic source
Now we need to attach it to a dynamic source in order to list the data from the metafield on the store front.
Go to the theme listing page (marked with 1 in the image below) and click on the “Customize” button (marked with 2 in the image below):
Navigate your store inside the theme settings to find the product to which you added data inside the “Subtitle” metafield (marked with 1 in the image below).
In my example, it’s the product (marked with 2 in the image below):
Now you should be on the product page and see the product to which you’ve added the metafield data.
The “Subtitle” metafield is present on all products in your store but is only on the one that you’ve added the data to.
Pay attention to this since if you do not have any data inside the metafield nothing will be displayed and you are inclined to think that the dynamic source assignment is not working.
On the left sidebar add a block or section that has input box setting type.
Since the meta field that we’ve added is of type “Single line text”, meaning it has an inputbox, the dynamic source will work only with setting of type text.
I’ve added a setting of type “Text” (marked with 2 in the image below):
Now you should see the metafield input box which in this case is a “Rich Text” type.
Click on the icon (marked with 1 in the image below) to see the dynamic sources available for this setting type.
Select the “Subtitle” source (marked with 2 in the image below) which comes from the metafield we created earlier.
Click on it and the “Rich text” field will be filled with the dynamic source (marked with 3 in the image below).
If all went well you’ll see the dynamic source data listed on the product (marked with 4 in the image below).
All good, now save your changes (marked with 5 in the image below).
Go to your Shopify store front and now you should see the dynamic source data listed on the product page to which you added the value inside the metafield:
Available dynamic sources
Note that some dynamic sources are already available like: “Product title”, “Product description”, “Vendor”, “Page title” and so on.
As I said before each one of them can be used on the resource type that it belongs to. For example you can’t use a “Page title” on a product page as a dynamic source.
This will give you the ability to reuse them inside each resource type they belong to and wherever you have the possibility to add a dynamic source within that resource type.
Limits
Shopify dynamic sources are limited in order to make the theme performant.
Some Shopify users are not aware how a store speed works and what roles heavy data plays so it is better that there are limitations in place that will help you to not cannibalize your sales.
The limits are 100 dynamic sources per template, and 50 per static section.
JSON template: 100
General theme settings: 100
Section group: 100
Single setting: 50
Static section: 50
Conclusion
Well there is more to talk about dynamic resources, but for the moment this will be enough to help you quickly set up fast custom data on your store front.
In one word dynamic sources gives you the ability to add custom data from metafields directly to your theme without any need of coding.
Of course some complex stuff will require coding, but for simple stuff this will work without any need of coding.
By the way if you need coding help we have an affordable rate and can help you with your projects. We’ve worked along the years with a lot of big brands all over the world in Shopify projects.
Buying from us or at least subscribing to our newsletter shows your appreciation to us for all the hours spent and money spent to create high quality Shopify tutorials.