Shopify themes, liquid, logos, and UX
I Need help inn adding rich text block for each of my collection pages. For example I have Diamond, Ceramic and I have added Rich Text to the template but the same text goes across all pages. I just want the text to be about the specific page
Hello @RobbieBursAus
Rich text content to your collection pages using metafields in Shopify. Here's how you can achieve it:
1.Create Metafields:
- Go to "Products" > "Collections" in your Shopify admin.
- Select the collection for which you want to add unique content.
- In the collection settings, look for the newly created metafield (e.g., "Collection Description" or "Rich Text Content").- Enter your unique rich text content for this collection.
2.Display Metafield Content on Collection Pages:
- Edit your collection template file (e.g., collection-template.liquid).
- Use liquid code to retrieve and display the metafield content. Here's an example:
<div class="rich-text-collection">
{{ collection.metafields.custom.collection_description }}
</div>
Replace custom with the actual namespace and key of your metafield.
4.Save and Preview: Save your changes, and then preview your collection pages. Each collection should now display the unique rich text content you added using metafields.
I have followed all the steps. I am getting an awkward code on front end "{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"I am testing this rich text field","bold":true}]},{"listType":"unordered","type":"list","children":[{"type":"list-item","children":[{"type":"text","value":"Easy DOing","bold":true}]},{"type":"list-item","children":[{"type":"text","value":"Easy work","bold":true}]}]}]}"
I am using publisher theme and i entered the code at the bottom of "main collection product grid liquid"
there needs to be a "pipe character" & "metafield_tag" added after the name of the custom created field. For example, I named my new field "bottom_description", so my code looks like this:
<div class="rich-text-collection">
{{ collection.metafields.custom.bottom_description | metafield_tag }}
</div>
Also, I was using the "Debut" theme - so I added this line of code within the "sections/collection-template.liquid" file, and here is a chunk of where I placed the code (just in case this helps anyone else in the future):
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{%- if paginate.pages > 1 -%}
{% include 'pagination', paginate: paginate %}
{%- endif -%}
</div>
<div class="rich-text-collection">
{{ collection.metafields.custom.bottom_description | metafield_tag }}
</div>
</div>
{% endpaginate %}
As soon as you add the pipe character and "metafield_tag" - the weird formatting issues you describe will go away.
I actually wanted this section of text to fall within the default page width, so here is actually a slightly modified example of the chunk of code added (for those who have a theme where "page width" is already established as a CSS class):
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{%- if paginate.pages > 1 -%}
{% include 'pagination', paginate: paginate %}
{%- endif -%}
</div>
<div class="page-width">
<div class="rich-text-collection">
{{ collection.metafields.custom.bottom_description | metafield_tag }}
</div>
</div>
</div>
{% endpaginate %}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025