How to create a template looking like the Default blog template but listing metaobjects instead

Store Design
, ,
1

How to create a “Ingredient list” template looking like the Blog post default template (Blogs > Default blog), listing all the metaobjects of a given metaobjects definition (“Ingredient” in my case). This Ingredient definition includes, amongt other fields:

  • a “Picture of the ingredient” (Key:ingredient.ingredient_picture) made of a File
  • an “Ingredient name” (Key:ingredient.ingredient_name) made of a Single line text
  • and a “Short description of the ingredient” (Key:ingredient.ingredient_short_description) made of a Single line text

These are the 3 fields I would like to be displayed in my new “Ingredient list” template

2

To create an “Ingredient List” template similar to the default blog post template in Shopify, you’ll need to utilize Shopify’s metaobjects and Liquid templating language. Here’s a basic structure:

  1. Create a New Template:

    • In your Shopify admin, create a new template for the ingredient list, similar to the blog template structure.

  2. Loop Through Metaobjects:

    • Use Liquid to loop through the ‘Ingredient’ metaobjects. Retrieve and display each ingredient’s picture, name, and short description.

  3. Display the Fields:

    • For each ingredient, use the appropriate Liquid objects to display the ingredient_picture, ingredient_name, and ingredient_short_description.

  4. Style the Template:

    • Apply CSS to style the layout to match the blog post template.

This involves writing Liquid code and potentially modifying your theme’s HTML/CSS. If you’re not familiar with these, you may want to work with a Shopify developer.

1 Like
3

Thanks Kabir. It is to avoid to have to recreate something from scratch, that I specified that I wanted to based this new template on the Blogs > Default blog template has it is exactly whazt I would like to do in term of look and feel.

4

Got it. Still you need to follow my above steps except creating any new file.

5

@GuillaumeA

I wonder if you are still seeking a workaround for the blog post template that lists all the metaobjects.

If you are considering using an app, here’s an example of a recipe blog post (created by the Easy Content Builder app). All the metaobjects for this recipe are automatically created by the ECB app that covers all the fields you mentioned: picture of the ingredient, ingredient name, and description of the ingredient.

ecb-cookie-recipe.png
ecb-cookie-recipe.png1905×4219 886 KB

*Disclaimer: I’m biased when sharing our own app here, you can browse the app demo to see for yourself (You will find more examples of the ‘recipe-related’ blog posts there).

6

Yes, I found a solution, by building a Collection with all the metaobjects values (all my ingredients). Though we have now a tranlsation and URL issue: https://community.shopify.com/c/shopify-design/translation-issue-with-web-pages-built-with-metaobjects-urls/m-p/2364339#M623417