How To Use Metaobjects In Shopify?

We’re diving into the world of meta objects in Shopify and how they can be used to create stylish, dynamic pages for your Shopify store. Don’t worry if you’re new to this – we’re breaking it down step by step so that even beginners can grasp the concept. So, let’s get started!

Understanding MetaObjects and Meta Fields:
Before we delve into the tutorial, let’s clarify some key terms. In Shopify, products and pages are considered as objects. Meta fields are additional fields you can add to these objects, enhancing their functionality. If you want to create an entirely new object, you’ll use meta objects, which is what we’ll explore in this tutorial.

Creating a Creator Meta Object:
First, let’s create a meta object called “creators.” We’ll use this to define the structure for the information we want to display on our pages.

1. Go to the Shopify dashboard.
2. Click on “Content” in the left-hand menu.
3. Under “Meta Objects,” click on “Add Definition.”

Now, we’ll add fields to our metaobject definition:

• Name (single-line text)
• Bio (multi-line text)
• Photo (file)
• Website (URL)

These fields will allow us to store information about creators, such as their names, bios, photos, and website URL.

Adding Entries to the Creators MetaObject:
Once you’ve defined your metaobject, it’s time to add entries.

1. Go to “Meta Objects” in the Shopify dashboard.
2. Click “Add Entry” and select the “creators” definition.
3. Add entries for your creators, including their names, bios, photos, and website URLs.

Creating a Page Template for Creators:
Now, let’s create a page template that will display the information from our creators’ entries.

1. Navigate to “Online Store” and click on “Pages.”
2. Create a new page named “Creators.”
3. Click on “Customize” and create a new template named “Creators.”

Next, we’ll add a section to our creators’ page template using Liquid code. This section will dynamically display the information from our metaobject entries.

Displaying Meta Object Entries on the Page:

1. In your theme customization, click on “Edit Code.”
2. Under “Sections,” click “Add a New Section” and choose “Liquid.”
3. Name the section “Creators.”
4. Replace the section’s code with the provided HTML and Liquid code (you’ll find it in the blog post with this tutorial).

Copy Code

<style>
  .creators-container{
    display: flex;
    background-color: #f6f6f6;
    padding: 3rem;
    margin-top: 5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    column-gap: 2rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }
  img{
      max-width: 100%;
      height: auto;
  }
  .creators-container h4{
      margin-bottom: 0;
  }
  h2{
    font-weight: bold;
  }
  .creators-container .img{
    width: 50%;
  }
  .creators-body{
    width: 50%;
    line-height: 1.8;
  }
  .creators-body h2{
    margin: 0;
  }
  @media only screen and (max-width: 768px) {
      .creators-container{
          flex-direction: column;
      }
    }
  </style>
  {% for creators in shop.metaobjects.creators.values %}
  <div class="creators-container">
    <!-- HTML code for Shopify Meta Object Tutorial by https://websensepro.com -->
    <div class="img">
        <img src="{{ creators.photo | img_url: '300x300' }}">
    </div>
    <div class="creators-body">
        <h2 class="h1">{{ creators.name }}</h2>
        <p class="creators-text">{{ creators.bio }}</p>
        <a href="{{ creators.social }}" class="button button--primary">WebsiteLink</a>
    </div>
  </div>
{% endfor %}
  {% schema %}
    {
      "name": "Creators",
      "settings": [],
      "presets": [{
          "name": "Creators",
          "category": "Text"
    }]
    }
  {% endschema %}

The code includes a for loop that iterates through the creators’ entries, displaying their names, bios, photos, and website URLs on the page.

Save your changes, and you’ll see the creators’ information dynamically populate the page template.

Integrating Meta Fields with Products:
Now, let’s connect our meta object with a product using a meta field. This will allow us to associate a specific creator with a product.

1. Go to “Online Store” and click on “Customize” for the product template.
2. Add a section to display the creator’s information on the product page, similar to how we did it for the creators’ page template.
3. Connect the section to the metaobject “creators” and the relevant fields (photo, name, bio, website URL) using Liquid code.

Once you’ve connected the section to the metaobject and fields, you can choose which creator to associate with a product using the meta field.

Conclusion:
And there you have it! You’ve learned how to create and use meta objects and meta fields to build stylish and dynamic pages for your Shopify store. Whether you’re showcasing creators, products, or any other content, these techniques can add depth and functionality to your online store.

We hope you found this tutorial helpful. If you’d like to explore more Shopify-related topics or have any specific questions, please leave a comment below. Your feedback helps us create more content to support your needs in web design and development. Until the next video, have a fantastic day!