Venture Theme - Changing Home Page Collection List Display

Solved
whitefox
Excursionist
13 0 7

Hi, On the Venture theme, I am trying to get collection lists to display 2 collections per row on mobile as opposed to the standard 1 per row on the home/index page.

I have modified the code inside list-collections-template.liquid (code below minus schema) - my modification works correctly on the www.url.com/collections page, but the changes are not working on the home page.

I've been looking but I can't seem to find the code that is over-riding for the home page.. - The Url for the store is rmhrvparts.com

Help would be appreciated, thanks.

 

{% if section.settings.layout == 'grid' %}
  {% if section.settings.display_type == 'all' %}
    {%- assign collection_count = 0 -%}
    {% for collection in collections %}
{% comment %}
      {% unless collection.handle == 'frontpage' %}
        {%- assign collection_count = collection_count | plus: 0 -%}
      {% endunless %}
{% endcomment %}
    {% endfor %}
  {% else %}
    {%- assign collection_count = section.blocks.size -%}
  {% endif %}

  {% assign number_rows = 1 %}

  {% case collection_count %}
    {% when 1 %}
      {% assign grid_item_width = 'small--one-half medium-up--one-third' %}
      {% assign height = 450 %}
    {% when 2 %}
      {% assign grid_item_width = 'small--one-half medium-up--one-third' %}
      {% assign height = 450 %}
    {% when 3 %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
      {% assign height = 330 %}
    {% when 4 %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
      {% assign height = 235 %}
    {% when 5 %}
      {% assign grid_item_width = 'small--one-half medium-up--one-fifth' %}
      {% assign height = 235 %}
    {% else %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
      {% assign height = 235 %}
      {% assign number_rows = collection_count | divided_by: 4.0 | ceil %}
  {% endcase %}
{% endif %}

<div class="page-width" data-section-id="{{ section.id }}" data-section-type="collections-list">
  {% if section.settings.display_type == 'all' %}
    {% case section.settings.sort %}
      {% when 'products_high' or 'products_low' %}
        {%- assign list_collections = collections | sort: 'all_products_count' -%}
      {% when 'date' or 'date_reversed' %}
        {%- assign list_collections = collections | sort: 'published_at' -%}
      {% else %}
        {%- assign list_collections = collections -%}
    {% endcase %}
    {% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
      <div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
        {% assign row_number = 1 %}
        {% for collection in list_collections %}
          {%- assign featured_collection = collection -%}
          
      
        {% unless collection.handle == 'frontpage' %}
            {% if section.settings.layout == 'list' %}
              {% include 'collection-list-item' %}
            {% else %}
              {% if collection_count > 5 and forloop.index > 4 %}
                {% assign row_number = forloop.index | divided_by: 5.0 | ceil %}
              {% endif %}
              {% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
            {% endif %}
          {% endunless %}

        
        {% endfor %}
      </div>
    {% else %}
      <div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
        {% assign row_number = 1 %}
        {% for collection in list_collections reversed %}
          {%- assign featured_collection = collection -%}
        
        
          {% unless collection.handle == 'frontpage' %}
            {% if section.settings.layout == 'list' %}
              {% include 'collection-list-item' %}
            {% else %}
              {% if collection_count > 5 and forloop.index > 4 %}
                {% assign row_number = forloop.index | divided_by: 5.0 | ceil %}
              {% endif %}
              {% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
            {% endif %}
          {% endunless %}
        
        
        
        {% endfor %}
      </div>
    {% endif %}
  {% else %}
    <div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
      {% assign row_number = 1 %}
      {% for block in section.blocks %}
        {%- assign featured_collection = collections[block.settings.collection] -%}
        {% if section.settings.layout == 'list' %}
          {% include 'collection-list-item' %}
        {% else %}
          {% if collection_count > 5 and forloop.index > 4 %}
            {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
          {% endif %}
          {% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
</div>

 

KetanKumar
Shopify Partner
14304 1664 5143

@whitefox 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
whitefox
Excursionist
13 0 7

@KetanKumar Thanks, the url was listed in the original post.. but here it is again - www.rmhrvparts.com

0 Likes
KetanKumar
Shopify Partner
14304 1664 5143

@whitefox 

KetanKumar_0-1612676985127.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
whitefox
Excursionist
13 0 7

@KetanKumar Thank you,

How can I edit the div#collection-grid-item anchor style? the class "collection-grid-item" doesn't seem to be present in the theme CSS stylesheet.

I see in your screenshot its source is "inspector-stylesheet"? Would you be willing to help me find where to make those modifications in the theme code?

I found the first .grid and .grid--no--gutters, I can't find the second .grid with the "zoom" property either.

kind regards

KetanKumar
Shopify Partner
14304 1664 5143

This is an accepted solution.

@whitefox 

it's grid code after you can change as you like

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

@media only screen and (max-width: 749px) {
#collection-list-grid .grid__item {
    width: 50%;
}
.featured-card--contain {
padding: 0px 5px;
}
.featured-card--contain .featured-card__image-container {
max-height: 100% !important;
    max-width: 100% !important;
}
.featured-card__title {
font-size: 18px;
height: 72px;
}
.featured-card__image-wrapper {
    padding-top: 100% !important;
}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
whitefox
Excursionist
13 0 7

@KetanKumar 

Thanks so much, this displays 2 per row like I am trying to get. It introduced one small problem - one of the collection grid cards on the page does not display at the same size as the others with a slight gap at the bottom (highlighted with red below). Is there a simple way to make these consistent?

Screen Shot 2021-02-06 at 11.32.35 PM.jpg

KetanKumar
Shopify Partner
14304 1664 5143

@whitefox 

it collection name issue some it to long but now i have update code can you please again review code and apply

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
whitefox
Excursionist
13 0 7

@KetanKumar  Everything is working I think. Thanks so much for your time as always!

KetanKumar
Shopify Partner
14304 1664 5143

@whitefox 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes