Shopify Question posted in
The Shopify help center can be found here.

How can I output the products from a section using schema collection – Shopify

I am new to shopify and I am trying to show the products from a collection.

I made a section in sections and used shopify schema to display this setting.

Only the header and description is showing in the page.

How can I display all the products from the chosen collection in the page ? I’ve search the web all day for an answer.

enter image description here

This is the schema I have.

Hope someone can help me ,thank you.

<h3>{{ section.settings.title }}</h3>

<p>{{ section.settings.column_richtext }}</p>

<a href="{{ section.settings.collection}}"></a>

{{ section.settings.collection | products}}


{% schema %}
  {
    "name": "Collection list 2",
    "class": "index-section",
    "max_blocks": 3,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Collection list 2"
      },
      {
         "type": "richtext",
         "id": "column_richtext",
         "label": "Short Description",
         "default": "<p></p>"
      },
      {
        "id": "collection",
        "type": "collection",
        "label": "Chose a collection"
      },
      {
        "type": "range",
        "id": "grid",
        "label": "Collections per row",
        "min": 2,
        "max": 4,
        "step": 1,
        "default": 3
      }
    ],
    "blocks": [
      {
        "type": "collection",
        "name": "Collection 2",
        "settings": [
          {
            "type": "collection",
            "id": "collection2",
            "label": "Collection 2"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Collection list 2",
        "category": "Collection",
        "blocks": [
          {
            "type": "collection"
          },
          {
            "type": "collection"
          },
          {
            "type": "collection"
          }
        ]
      }
    ]
  }
{% endschema %}
Tags:

2

Answers


  1. 0

    Use this to access products:

    {%- assign collection = collections[section.settings.collection] -%}

{%- for product in collection.products -%}
    {{ product.title }}
{%- endfor -%}

    You cannot paginate the collection object unless you’re on the collection page. Using for loop as per the example above I think you can get only 50 products.

    Login or Signup to reply.
  2. 0

    here is section code add create new section and add into related template

    
<div class="page-width">
  {%- comment -%} {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  {%- endcomment -%}
  
  {%- assign collection = collections[section.settings.collection] -%}

  {% case section.settings.grid %}
    {% when 2 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign max_height = 345 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign max_height = 250 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign max_height = 195 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
  {% endcase %}

  {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

  <div class="grid grid--uniform grid--view-items">
    {% for product in collection.products limit: product_limit %}
      <div class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
        {% include 'product-card-grid', max_height: max_height %}
      </div>
    {% else %}

      {% for i in (1..product_limit) %}
        <div class="grid__item .grid__item--{{section.id}} {{ grid_item_width }}">
          <div class="grid-view-item">
            <a href="#" class="grid-view-item__link">
              <div class="grid-view-item__image">
                {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
              </div>
              <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
              <div class="grid-view-item__meta">
                {% include 'product-price' %}
              </div>
            </a>
          </div>
        </div>
      {% endfor %}
    {% endfor %}
  </div>

  {% if section.settings.show_view_all %}
    <hr class="hr--invisible"></hr>
    <div class="text-center">
      <a href="{{ collection.url }}" class="btn">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
  {% endif %}

</div>

{% schema %}
  {
    "name": "Featured collection",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Featured collection"
      },
      {
        "id": "collection",
        "type": "collection",
        "label": "Collection",
         
      },
      {
        "type": "range",
        "id": "grid",
        "label": "Products per row",
        "min": 2,
        "max": 5,
        "step": 1,
        "default": 3
      },
      {
        "type": "range",
        "id": "rows",
        "label": "Rows",
        "min": 1,
        "max": 5,
        "step": 1,
        "default": 2
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show product vendors",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_view_all",
        "label": "Show 'View all' button",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured collection",
        "category": "Collection"
      }
    ]
  }
{% endschema %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search