Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • Recipe Article (with MetaObjects)
  • Set up MetaObjects
  • Create a recipe entry
  • Connect the MetaObject to the Blog Post with a Metafield
  • Set up template to connect with MetaObject
  • Swap the blog post template
  • Shop the Recipe Section
  • Learn more about MetaObjects:
  1. Fundamentals
  2. Templates

Blog Posts

PreviousBlogsNextCollection

Last updated 1 year ago

Recipe Article (with MetaObjects)

Set up MetaObjects

To create a MetaObject, you'll need to go to Content > MetaObjects in the sidebar of your Shopify store admin. Once you're there, you'll need to click 'Manage definitions' then choose 'Add definition'.

You'll need to give the MetaObject a name. I called mine Recipe. Then you'll need to start adding fields. The fields of a MetaObject are basically the same as a Metafield (you may already be familiar with) so you can add text, richtext, references, images, videos etc.

The fields for this recipe template are:

  • Recipe title - single line text

  • Prep Time - single line text

  • Cook Time - single line text

  • Yields - single line text

  • Ingredients - rich text

  • Story - rich text

  • Story Image - File (specific file type - image)

  • Directions - rich text

  • Directions Image - File (specific file type - image)

Create a recipe entry

Once you have the definition set up, the next step is to create an entry (or more!) with the recipe information. We're actually only using the Recipe title for our own reference to make it easier to find (you'll see why as we go).

Connect the MetaObject to the Blog Post with a Metafield

MetaObjects are their own thing and aren't associated with any other object so we need to connect the MetaObject entries with the blog post via Metafield.

If you go back to manage definitions and choose 'View all definitions' you'll also see the metafield options. Choose Blog Posts and then 'Add definition'. Here you'll add a definition (I called it recipe post) and choose the type to be MetaObject.

You'll then choose the type of MetaObject. You'll want to choose the definition you made earlier in this article - likely Recipe.

At this point, you'll go to a specific blog post and connect the MetaObject entry with the metafield. You'll find the MetaObject entry by the recipe title - this is why we added it, otherwise it will just have random numbers and letters.

Set up template to connect with MetaObject

Here's a video to explain

Swap the blog post template

The final thing you'll need to do for this template to be live is set the blog template. To set the blog template go into the Blog Post and at the bottom right hand corner you'll see a Theme template dropdown. Choose the recipe template you just made.

*NOTE* templates are only available in this dropdown if they exist on the published theme.

If you're doing this on an unpublished theme, you can see how each recipe will look by setting the template at the top and choosing the blog posts on the sidebar. Here's a little gif:

Shop the Recipe Section

The shop the recipe section at the bottom of the template works a little differently. It scans the blog article for any products from your shop mentioned and adds them to this section. For this reason, I put links to the products in each recipe in the rich text editor for each blog post.

If there are no links to products in a blog, then the whole section won't show up.

Learn more about MetaObjects:

MetaObjects