Insert Product Grid into (manual) page

Highlighted
New Member
3 0 0

Hi,

My client is selling art, and we have created a vendor page (the Artist), that shows the list of vendors, which links to a manual page.

On that Artist (manual) Page, we are using the "Pages" module to show their bio.

Under the bio, I want to list all of the products/art by that Artist (Vendor).

I know a link can be added to the page, e.g:         /collections/vendors?q=vendor-name 
and I have read the article that showcases a collection on an artist page: https://shopify.dev/tutorials/feature-a-subset-of-collections-on-a-page

But that script/guide only shows 1 image - the collection, whereas I am looking to have a grid of all the vendor products under their bio.

Can anyone point me in the right direction please? 

I can't locate some code/snippet that allows me to look up all products based on a vendor name.

0 Likes
Highlighted
New Member
3 0 0

I think I have worked it out

 

<div class="page-width page-content">

  {%- include 'breadcrumbs' -%}

	<div class="grid">
    <div class="grid__item medium-up--three-quarters medium-up--push-one-eighth">

      <div class="rte rte--nomargin">
        {{ page.content }}
      </div>

    </div>
  </div>

</div>

{%- capture id -%}{{ page.title | handleize }}{%- endcapture -%}
{%- assign collection = collections[id] -%}
{%- assign product_limit = 8 -%}


{% if collection.products.size > 0 %}
<div class="featured-collection layout-8 lazyload" data-section-id="{{ section.id }}" data-section-type="featured-collection-section">
<div class="wrapper">
    <div class="grid">
      <div class="box header">
        <div class="image-table">
          <div class="details">
              <h4>Shop {{ collection.title | escape }}</h4>
          </div>
        </div>
      </div>
      {% for product in collection.products limit: product_limit  %}
       {% include 'product-grid-item' %}
      {% else %}
        {% for i in (1..product_limit) %}
          {% include 'placeholder-product-grid-item' %}
        {% endfor %}
      {% endfor %}
    </div>
       <div class="box header">
        <div class="image-table">
          <div class="details">
              <a href="{{ collection.url }}" class="button large outline">View more</a>             </div>
        </div>
      </div>
  </div>
</div>
{%endif%}
0 Likes