Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

How to use metaobject with theme sections?

Annie

Written by Annie

Last updated

337 views

On this page


Demo

If you want to have a section that displays different content for each product/collection page, you use MetaObject to build the data structure and connect with the section of the theme.

In this article, we guide you on building an 'Accordion' on product page. You can do similar steps for other sections. Let's check this example:

1. Create MetaObject

  • Go to Content > MetaObject > Add definition > Fill in any name you want. Example: Accordion for FAQ

  • Click 'Add field' > Then you create some fields for data in the section.

Note: The type in each field must be matched with the field type in theme section.

111.gif

Example: if you use Accordion. You will create 2 fields:

  • Accordion label => Single text (One value)

  • Accordion content => Rich text

Click 'Save'. Please follow this video:

2. Add entry

Go to Content > MetaObject > 'Accordion for FAQ' > 'Add entry'

You fill in the data for each Accordion item you want. Follow this video:

3. Create Metafield definition

Go to Settings > Custom data > Products/Collections (If you are building the section on collection page) > Add definition

  • Name: Any name you want. Example: FAQ product

  • Content type: Metaobject

  • Reference: "Accordion for FAQ" at step 1

  • One entry or List of entries (if you want to have many accordion blocks for each product)

Please follow video below:

4. Select entry for Products/Collections

Go to Products > open product > scroll down to Metafields > Select entry. You can select one entry or many entries.

Follow this video:

5. Connect MetaObject in Theme customize

Go to Theme Customize > Product page > open section > 'Connect dynamic source' with MetaObject.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.