Display content based on metafield or tag

[otachies]

Hi. We want to dynamically add a ‘Designer Bio’ on every product that is assigned with the Tag (or metafield - we don’t know wich is the best) related to this specific designer.

We are migrating from Magento. There we had an attribute called ‘Designer’ with preselected values to choose from. Same as a simple line metafield on Shopify.

On the template we see if a product has this attribute and show a specific block based on it.

Basically:

If designer = Joe - then display - Joe’s block.

All the merchant needed to do was add a designer attribute and create a designer block with the content desired to each designer. Simple.

On Shopify we don’t know where to start.

1. I believe using Metafields will be simpler. The dropdown value with all designers facilitates when adding a product.

2. Where can we create the designer block? Do we need to hard code it or is there a way to use the 2.0 sections to create? It would be awesome.

The content would be similar to every designer: Title, Text description and image.

Using Pages seems to be a possible approach, but I don’t like the idea of having to create a page template using sections for each designer and assign them to a page.

If it works we will replicate it to create Features Blocks that are common to groups of products to enhance our product page.

Thanks a lot.

[made4Uo]

Hi @otachies ,

Welcome to Shopify! You are in the right track. Yes, metafield will be simplier

For question number 2, you are right, the best option is use the page for each designer

1. From your Admin Page, click Online Store > Pages
2. Enter the Title, Text description and image but note the handle you are using.

If you go to the page you created, click Edit Website SEO, the handle is the contact on this image below. We will use the handle for the metafield

Call the page using the metafield

Use the code reference below to call the page in product page

{% assign designer_handle = product.metafields.custom.designer_handle | metafield_text | append: '-page' %}
            {{ pages[designer_handle].content }}

See image for metafield settings. Note: Make sure the options are the same with the page handle

[otachies]

Thank you, @made4Uo .

This is basically what we were doing in Magento.

2 things that Shopify bugs me for now:

1. Just hoped that Shopify would have a Block system that would be invisible to customers unless used on Pages, Products, etc. I just don’t like that every page on Shopify is crawled and have a direct link to it. Or maybe is just a new thing to me and I’m not used to it.

2. I can’t use Sections/Blocks directly on Pages. First we need to assign a template. When you have lots of content it could get messy handling pages and templates.

The same thing with Products. I wanted to be able to create specific content for each product separately to enrich the description without coding.

But that’s just me whishing.

Regarding the question itself:

Can I accomplish the same thing using tags? In case of Features it would be simpler to add for each product and could have more than one feature assigned to.

In this case we should have a naming system like: feature_sample1, feature_sample2.

And crawl the tags to search for a feature_ tag.

Is it possible?

Thanks so much for your attention

[otachies]

Hey, @made4Uo

We tried this approach and it works.

We implemented with the following structure:

{%- if product.metafields.global.designer -%}
  {%- assign designer_handle = product.metafields.global.designer | replace:" ", "-" -%}
            {{ pages[designer_handle].content }} 
  {%- endif -%}

It looks if the designer is assigned, inputs a ‘-’ between the designer name (usually the page handle is the name of the page, in this case the designer) and display its content.

It works pulling the content from the page.

BUT if we want to display all the page with the template. Is it possible?

Now it only displays the content on the ‘Page’ section created on the WYSIWYG. But in order to use the Section Everywhere Editor, we need to assign a template. It is easier to the merchant to edit the content and create beautiful sections there.

But the template itself is not rendered.

Do you know a way we can accomplish this?

Thanks

[made4Uo]

I am not really sure if I understand. You want a dynamic template? Which it can change the content base on the metafield? That would be a little complicated. You have to replace the necessary dynamic codes

[otachies]

Hum, let me try to point to what would be the possible solutions.

Working Solution:

• Create a block for each designer using pages.

We have this working. We create each designer a specific page and puts the content in there.

Downsize: it is a bit difficult for the merchant to style the HTML. Any change in the code could break the layout.

We tried to create a unique theme template for each designer and assign to each page. (In the case above we had a Theme Template = ‘designer-larissa-batista’ instead of ‘Default page’)

This way all the content could be inserted through the theme editor.

On the template we had a section with the image and text. Simple and effective.

The problem: any template structure is not rendered on frontend. If we have three beautiful section there it does not appear. Only what is on the Page content.

I did not find any liquid tag that could render this template.

Best case scenario:

One template that handles all variables: title, image, description, link to collection.

All based on ONE metafield (designer) that we already have working.

With this metafield we’d fetch the information (title, image, description, link) from some source and we’d only need to insert this information one time.

Every time we assign a designer to a product, it gets all these informations and render on frontend.

Right now, I don’t have a clue on which source

And if we change the layout for the designer, we’d only change it once.

I believe this might be possible.

[GailR]

Hi, This solution looks very close to what I want to do, but since I am new to Shopify (although I have a lot of website and ecommerce experience), I need a little clarification.

1. As I understand it, I create a page for each designer and then enter each page’s handle as a value in the metafield’s list of values. Is that correct?

2. This is where I am really stuck. Where and how do I put in the code to call the page in the product page?

3. Once I have put in that code correctly and choose a designer from the value list of the metafield for a product, the designer’s page with all the HTML formatting will show up on that product page, correct?

Thanks so much for your help!