Add individual, somewhat complex content (including product suggestions) to collections

Store Design
1

Dear Shopify Community

I would like to add individual content to the collection pages.
The content structure is as follows:

H2 Main title
Main description

H3 Subtitle A
Description A
Featured products A

H3 Subtitle B
Description B
Featured products B

H3 Subtitle C
Description C
Featured products C

The number of sub-blocks varies, sometimes 3, sometimes 4.

How would you best implement this? Should I create an individual template for each collection, or can I solve it somehow using meta fields / meta objects?

Thank you very much for your support!

2

Hey @dantaylor

It’s possible via both (template & metafields). I would suggest to create something like this by using metafields as it will save your time and won’t be too complicated as well. If you can share more details about it in my private messages then I’d be happy to set this up for you as well.

Best,
Moeed

3

Hi,

Hope this will help

  • Don’t make one template per collection (too messy).
  • Instead, use metaobjects → think of them as “fill-in-the-blank forms” you can add to each collection.
  • Each block = Title + Description + Products.
  • Your theme will loop through them and show them on collection page.
  • Flexible > you can add 2 blocks, 3, or 10, without changing code again.

Add a loop that goes through each block. Example (simplified Liquid):

{% for block in collection.metafields.custom.collection_blocks.value %}
  <h3>{{ block.subtitle }}</h3>
  <div>{{ block.description }}</div>
  
  <div class="featured-products">
    {% for product in block.products.value %}
      {% render 'product-card', product: product %}
    {% endfor %}
  </div>
{% endfor %}
4

Hi, thank you for the hint, this helped! I guess I’m onto something now.

I have managed to set up the meta fields and objects so that they are displayed dynamically, so far so good!

However, I would like to change the display of the output products. They should be displayed as if I selected the “featured collection” and added products there manually. What is the best practice in this case? In addition, I would like to adjust further display settings, such as

  • Stack Products OFF
  • Show Carousel Bar ON
  • HIDE View All Link

I’ve added a print screen for reference.

grafik
grafik1009×525 23 KB

5

Hi, any ideas how I can change the design of the “product-card”? What’s the best approach, changing the CSS until it fits, or can I somehow use another “module” instead of the “product-card”? I’ve been trying a few things, but without success so far.