"i only speak liquid" #75: Metaobjects as a dynamic source

Hey everyone,

Woohoo! This is Kenny’s 3rd of 4 edits of “i_only_speak_liquid” 🔥🔥🔥

A bit about Kenny:  

Kenny’s a shopify developer, who ex-Bondfire agency. He’s based out of LA & has built beautiful sites like Rishi Tea, Imogene + Willie & Body Bio.

Let’s GO 📚

What I’ve been thinking about:

Dynamic sources are a powerful tool for giving merchants greater flexibility and control over the custom sections and themes Shopify developers build. One of my favorite aspects is that they allow merchants to take regular section files and then pipe dynamic data into them when they are placed in product or collection pages. Store owners with moderate technical proficiency can create their own metafields and metaobjects to inject customized data directly into new sections on their PDP or PLP, all without the help of a developer. in this article I'll demonstrate how to use a custom metaobject to dynamically populate a specific section on a PDP.

Let's start by defining a section schema for a "Timeline" section. This section includes a heading and supports up to three "Timeline Steps.”

{% schema %}
{
  "name": "Timeline",
  "tag": "section",
  "max_blocks": 3,
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    }
  ],
  "blocks": [
    {
      "type": "timeline-step",
      "name": "Timeline Step",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "details",
          "label": "Details"
        }
      ]
    }
  ]
}
{% endschema %}

We can include this section on a PDP without dynamic sources, but the content will be static and won’t show unique data for each product. Let’s create a custom metaobject meant to store all of the structured data required to populate this section on a PDP.

Here, we have a metaobject called “Product Timeline” meant to store timeline data specific to individual products. It includes fields for the section heading and three "Timeline Steps," each consisting of "Phase Title" and "Phase Details.”

Next, we'll create a Product metafield that references our new "Product Timeline" metaobject. This metafield allows each product to store its unique timeline data.

To implement this on a PDP, we'll add our "Timeline" section to the product page and link its fields to our metaobject through dynamic sources:

• For the heading, click the dynamic source icon and select: Product Template → Product Timeline → Heading.

  

• For each timeline step, add a block and similarly connect each block's fields (title and details) to their corresponding "Phase Title" and "Phase Details" fields in the metaobject.

Once everything is wired up, the PDP will feature a dynamically populated "Timeline" section tailored uniquely to each product.

3 links you can’t miss:

📌 Loom: A fantastic tool for quickly creating explanatory videos for clients.

📌 Notion Calendar: I use Notion for both personal and business task management. The Notion Calendar integration effortlessly syncs due dates and reminders from Notion databases directly to your calendar.

📌 Poor Charlie’s Almanac: A collection of talks from Charlie Munger. It’s inclusion here may seem odd, but there are a lot of great insights about business and life throughout.

1 app I like:

Shoplift: I just started using this app for A/B testing and I have been super happy with it’s ease of use and it’s ability to run theme tests, section tests, and custom JavaScript tests.

One learning as a freelancer:

Don’t burn yourself out. It can be hard to say no to projects if you’re on a roll and getting a lot of great opportunities. It’s essential you know when to say no. Burnout and stress can manifest itself in unexpected ways and you may not realize you’ve reached the tipping point till you’ve already crossed it. Be mindful of your limits, work within your means, and learn how to say no.

-Kenny