Make Products Display in Two Rows in Blockshop Featured Collection

New Member
2 0 0

Hi, 

 

My store under development is https://amadora-ice-cream.myshopify.com

Under Featured Collections, I want to show 8 products, in 2 rows with 4 per row. I tried two things. 

1. I tried keeping product count as 8, but it becomes a carousel

2. I tried using two separate featured collection elements, but now heading is coming two times, and too much gap between sections. 

 

What can I do to achieve the above requirement of showing 8 products, in 2 rows with 4 per row.

 

Ashok

0 Likes
Shopify Partner
1657 278 347

Hi @hashtagtech 

On feature collection you have slider so first of all you have to remove slider from this section and then you can set as grid.

check in theme editor may be you have option to change grid from slider.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
2 0 0

My featured collection code is as below. I tried changing slider to grid but page did not load. Can you please let me know what exactly needs to be changed?

{% if section.settings.home-product-slider-collection == blank or collections[section.settings.home-product-slider-collection].handle != section.settings.home-product-slider-collection %}
  {% for c in collections %}
    {% if c.products-count > 0 %}
      {% assign collection = c %}
    {% endif %}
  {% endfor %}
{% else %}
  {% assign collection = collections[section.settings.home-product-slider-collection] %}
{% endif %}

{%- assign slider_limit = section.settings.max_products -%}
{% include 'framework--background-colors', bg_color: section.settings.background-color %}

<div
  class="product-slider{% if collection.products.size < 4 and collection.products.size != 0 %} disabled{% endif %} {{ settings.color-icons-theme }} length--{{ collection.products.size }}"
  style="{% if bg_color %}background-color: {{ bg_color }};{% endif %}"
>
  <div class="row header">
    <div class="columns">
     <h2 class="font--section-heading">
      {% if collection.products.size %}
        {{ collection.title | link_to: collection.url }}
      {% else %}
        {{ 'home.onboarding.featured_collection' | t }}
      {% endif %}
     </h2>
   </div>
  </div>
  <div class="row content">
    <div
      class="product-grid--root"
      data-js-class="ProductGrid"
      data-in-slider="true"
    >
      {% if collection.products.size and collection.products.size > 0 %}
        {% for product in collection.products limit: slider_limit %}
          {% include 'partial--product', view: 'product-grid' %}
        {% endfor %}
      {% else %}
        {% for i in (1..6) %}
          {% include 'partial--product', onboarding: true, index: i %}
        {% endfor %}
      {% endif %}
    </div> <!-- .product-grid.clearfix -->
  </div> <!-- .row.content -->
</div><!-- #product-slider -->

{% schema %}
{
  "name": "Featured collection",
  "class": "section--featured-collection",
  "settings": [
    {
      "id": "background-color",
      "label": "Background color",
      "type": "select",
      "options": [
        { "label": "None", "value": "none" },
        { "label": "Light grey", "value": "light" },
        { "label": "Accent", "value": "accent" }
      ],
      "default": "none"
    },
    {
      "type": "collection",
      "id": "home-product-slider-collection",
      "label": "Choose collection"
    },
    {
      "label": "Amount of products to show",
      "id": "max_products",
      "type": "range",
      "min": 4,
      "max": 20,
      "step": 4,
      "default": 12
    }
  ],
  "presets": [
    {
      "name": "Featured collection",
      "category": "Collection"
    }
  ]
}
{% endschema %}
0 Likes
Highlighted
Shopify Partner
1657 278 347

You can not do from this page you have to find slider Js in theme.js and stop for feature collection by this page,because this js same for all store. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes