Change Theme List-Collection to display 2 columns.

Fz143
Tourist
9 0 3

Hi,

   I am using a premium theme Fastor, And in the list collection section i managed to make the columns to be 4 in desktop but not sure how to change to 2 columns in mobile and reduce the text size for only in mobile.

Please help.

Thanks

Screenshot (70).png  

 

0 Likes
Fz143
Tourist
9 0 3
{%- assign blocks = section.blocks | sort: 'collection.all_products_count' -%}
<div id="col-main" class="center-column content-with-background">
  <div class="row categories-wall">
    {% if section.settings.display_type == 'all' %}
    {% case section.settings.sort %}
    {% when 'products_high' or 'products_low' %}
    {%- assign collections = collections | sort: 'all_products_count' -%}
    {% when 'date' or 'date_reversed' %}
    {%- assign collections = collections | sort: 'published_at' -%}
    {% endcase %}
    {% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
    {%- for my_collection in collections -%}
    {%- unless my_collection.handle == 'all' -%}
    <div class="col-sm-3">
      <div class="grid">
      <div class="category-wall">
        <div class="image">
          <a href="{{my_collection.url}}">
            {%- if my_collection.image -%}
            <img src="{{my_collection.image.src | collection_img_url: 'medium'}}" alt="{{my_collection.title}}" />
            {%- else -%}
            <img src="{{my_collection.products.first.featured_image | product_img_url: 'medium'}}" alt="{{my_collection.title}}" />
            {%- endif -%}
          </a>
        </div>
        <h3><a href="{{my_collection.url}}">{{my_collection.title}}</a></h3>
        <ul>
          <li>{{my_collection.products_count}} {{my_collection.products_count | pluralize: 'collections.general.product', 'collections.general.products' | t}}</li>
        </ul>
        <a href="{{my_collection.url}}" class="more-categories">{{'collections.general.more_products' | t}}</a>
      </div>
    </div>
    {%- endunless -%}
    {%- endfor -%}
    {% else %}
    {%- for my_collection in collections reversed -%}
    {%- unless my_collection.handle == 'all' -%}
    <div class="col-sm-3">
      <div class="category-wall">
        <div class="image">
          <a href="{{my_collection.url}}">
            {%- if my_collection.image -%}
            <img src="{{my_collection.image.src | collection_img_url: 'medium'}}" alt="{{my_collection.title}}" />
            {%- else -%}
            <img src="{{my_collection.products.first.featured_image | product_img_url: 'medium'}}" alt="{{my_collection.title}}" />
            {%- endif -%}
          </a>
        </div>
        <h3><a href="{{my_collection.url}}">{{my_collection.title}}</a></h3>
        <ul>
          <li>{{my_collection.products_count}} {{my_collection.products_count | pluralize: 'collections.general.product', 'collections.general.products' | t}}</li>
        </ul>
        <a href="{{my_collection.url}}" class="more-categories">{{'collections.general.more_products' | t}}</a>
      </div>
    </div>
    {%- endunless -%}
    {%- endfor -%}
    {% endif %}
    {% else %}
    {% for block in section.blocks %}
    {%- assign my_collection = collections[block.settings.collection] -%}
    <div class="col-sm-3">
      <div class="category-wall">
        <div class="image">
          <a href="{{my_collection.url}}">
            {%- if my_collection.image -%}
            <img src="{{my_collection.image.src | collection_img_url: 'medium'}}" alt="{{my_collection.title}}" />
            {%- else -%}
            <img src="{{my_collection.products.first.featured_image | product_img_url: 'medium'}}" alt="{{my_collection.title}}" />
            {%- endif -%}
          </a>
        </div>
        <h3><a href="{{my_collection.url}}">{{my_collection.title}}</a></h3>
        <ul>
          <li>{{my_collection.products_count}} {{my_collection.products_count | pluralize: 'collections.general.product', 'collections.general.products' | t}}</li>
        </ul>
        <a href="{{my_collection.url}}" class="more-categories">{{'collections.general.more_products' | t}}</a>
        
      </div>
    </div>
    {% endfor %}
    {% endif %}   
  </div>
</div>


{% schema %}
  {
    "name": "Collections list page",
    "settings": [
      {
        "type": "paragraph",
        "content": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections."
      },
      {
        "type": "radio",
        "id": "display_type",
        "label": "Select collections to show",
        "default": "all",
        "options": [
          {
            "value": "all",
            "label": "All"
          },
          {
            "value": "selected",
            "label": "Selected"
          }
        ]
      },
      {
        "type": "select",
        "id": "sort",
        "label": "Sort collections by:",
        "info": "Sorting only applies when 'All' is selected",
        "default": "alphabetical",
        "options": [
          {
            "value": "products_high",
            "label": "Product count, high to low"
          },
          {
            "value": "products_low",
            "label": "Product count, low to high"
          },
          {
            "value": "alphabetical",
            "label": "Alphabetically, A-Z"
          },
          {
            "value": "alphabetical_reversed",
            "label": "Alphabetically, Z-A"
          },
          {
            "value": "date",
            "label": "Date, old to new"
          },
          {
            "value": "date_reversed",
            "label": "Date, new to old"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "collection",
        "name": "Collection",
        "settings": [
          {
            "label": "Collection",
            "id": "collection",
            "type": "collection"
          }
        ]
      }
    ]


  }

 


{% endschema %}
0 Likes
Fz143
Tourist
9 0 3

The above code is my list-collection code

KetanKumar
Shopify Partner
20430 2114 7676

@Fz143 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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 Partner | 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
Fz143
Tourist
9 0 3

dosthfashion.in

0 Likes
KetanKumar
Shopify Partner
20430 2114 7676

@Fz143 

KetanKumar_0-1624821886080.png

 

do you need 1 right?

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 Partner | 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
Fz143
Tourist
9 0 3

No not like this. 

Collections (dosthfashion.in) -- In this page the collections appear 1 collection per row, so I want to make it 2 collection per row.

0 Likes
KetanKumar
Shopify Partner
20430 2114 7676

@Fz143 

now i can see 2 on mobile do you have fixed! 

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 Partner | 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
Fz143
Tourist
9 0 3

But in my phone its still 1 collection per row and i am not sure how to fix it.

 

Hubbliss
New Member
1 0 1

I am using an appyn theme. This is a very user friendly theme. You can managed to make columns by using this theme. I as also using it for my website.