skip to Main Content

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 %}

2

Answers


  1. 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. 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