FROM CACHE - en_header
Promotion image

Help in mobile view of collections

Help in mobile view of collections

AryavK
Trailblazer
266 9 43
‎12-07-2024 01:16 AM

Hello! 
My site is www.faithandyou.in

 

There is a custom cellections liquid file i have on my site.

 

It loops and autoplays the categories every 2.5 seconds but i need help.

 

The collection list is too tiny on mobile

 

AryavK_0-1733552176936.png

 

 

And on desktop the images get cut off on the right side

 

AryavK_1-1733552176891.png

 

 

This is my custom-collection-list.liquid! HOW CAN WE FIX THIS???

 

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}
<!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
  .mySwiper {
      padding-bottom: 30px;
  }
  
  .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next {
      display: block;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      color: black;
  }
  
  .mySwiper .swiper-button-prev::after, .mySwiper .swiper-button-next::after {
      font-size: 22px;
  }
  
  .mySwiper .swiper-pagination .swiper-pagination-bullet {
      width: 15px;
      height: 15px;
      background: #d07e13;
  }
</style>
  
<div class="color-{{ section.settings.color_scheme }} gradient grid--{{ section.settings.columns_desktop }}-col-desktop">
  <div class="collection-list-wrapper isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
        <h2
          id="SectionHeading-{{ section.id }}"
          class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        >
          {{ section.settings.title }}
        </h2>

        {%- if section.settings.show_view_all and show_mobile_slider -%}
          <a
            href="{{ routes.collections_url }}"
            id="ViewAll-{{ section.id }}"
            class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
          >
            {{- 'sections.collection_list.view_all' | t -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}
    {% comment %} 
    <slideshow-component class="slider-mobile-gutter slider-component-desktop {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      <ul
        class="slideshow slider slider--everywhere custom-collection-listing collection-list contains-card contains-card--collection{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
        id="Slider-{{ section.id }}"
        role="list"
      >
        {%- liquid
          assign columns = section.blocks.size
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks -%}
          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class=" slideshow__slide slider__slide grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
            {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
            {% render 'custom-card-collection',
              card_collection: block.settings.collection,
              card_collection_image: block.settings.card_collection_image,
              media_aspect_ratio: section.settings.image_ratio,
              columns: columns,
              placeholder_image: placeholder_image
            %}
          </li>
        {%- endfor -%}
      </ul>
        <div class="slider-buttons no-js-hidden">   
          
            <div class="slider-counter caption">
              <span class="slider-counter--current">1</span>
              <span aria-hidden="true"> / </span>
              <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
              <span class="slider-counter--total">{{ products_to_display }}</span>
            </div>
          
          <div class="slider-button-button">
            <button
                type="button"
                class="slider-button slider-button--prev"
                name="previous"
                aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
                aria-controls="Slider-{{ section.id }}"
            >
            {% render 'icon-caret' %}
            </button>
            <button
              type="button"
              class="slider-button slider-button--next"
              name="next"
              aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
              aria-controls="Slider-{{ section.id }}"
            >
            {% render 'icon-caret' %}
            </button>
          </div>
        </div>
                  
      {%- if show_mobile_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.blocks.size }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slideshow-component>
    {% endcomment %} 
    
    <div class="swiper mySwiper">
      <ul class="swiper-wrapper" id="Slider-{{ section.id }}" role="list" >
        {%- liquid
          assign columns = section.blocks.size
          if columns > 3
            assign columns = 3
          endif
        -%}
        {%- for block in section.blocks -%}
          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="swiper-slide custom-slider-slide grid__item{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}"
            {{ block.shopify_attributes }}
          >
            {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
            {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
            {% render 'custom-card-collection',
              card_collection: block.settings.collection,
              card_collection_image: block.settings.card_collection_image,
              media_aspect_ratio: section.settings.image_ratio,
              columns: columns,
              placeholder_image: placeholder_image
            %}
          </li>
        {%- endfor -%}
      </ul>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      <div
        class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
        {% endif %}
      >
        <a
          href="{{ routes.collections_url }}"
          class="button"
          id="ViewAllButton-{{ section.id }}"
          aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
        >
          {{- 'sections.collection_list.view_all' | t -}}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 4,
      spaceBetween: 1,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>
{% schema %}
{
  "name": "Custom collection list",
  "tag": "section",
  "class": "section section-collection-list custom-collection-list",
  "max_blocks": 15,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Collections",
      "label": "t:sections.collection-list.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 7,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "scheme-1"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "t:sections.collection-list.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.collection-list.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.collection-list.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "t:sections.collection-list.blocks.featured_collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
        },
        {
          "type": "image_picker",
          "id": "card_collection_image",
          "label": "Image",
          "info": "Image sizes to 1080 x 1080 pixels"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom collection list",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}
{% render "custom-collection-list-css", section_id:section.id  %}
faith&you
496 Views
0 Likes
Report
Replies 6 (6)

DaisyVo
Shopify Partner
4460 499 594
‎12-07-2024 04:19 AM

Hi @AryavK 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

@media screen and (max-width: 768px){
li.swiper-slide.custom-slider-slide.grid__item {
    width: 23% !important;
}
}

 

Here is the result: https://prnt.sc/QWQOOoEtdcD4
 
I hope this helps
 
Best,
 
Daisy

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
447 Views
0 Likes
Report
In response to DaisyVo

AryavK
Trailblazer
266 9 43
‎12-07-2024 04:23 AM

Hi daisy. Thanks for replying so fast!

 

But the code did not work tho. What i want is that to make the pics on mobile to get larger.

faith&you
442 Views
0 Likes
Report
In response to AryavK

DaisyVo
Shopify Partner
4460 499 594
‎12-07-2024 07:38 AM

Hi @AryavK 

 

For this task, please follow these steps:

  1. Create Two Blocks:

    • Add one block for desktop and another for mobile. 
    • For the mobile version, create a new file with the same content as the desktop version, but modify the section to accommodate 6–7 images (matching the number of images currently available).
    • DaisyVo_1-1733575127920.png

       

  2. Adjust the Width:

    • Update the width in our code, increasing it to 50% so the display appears larger.

I hope this helps

 

Best,

 

Daisy

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
412 Views
0 Likes
Report
In response to DaisyVo

AryavK
Trailblazer
266 9 43
‎12-07-2024 07:52 AM

Hi! Thanks. This helps a lot but I cant understand how to do it. Can you please provide the code to be added + where it should be added _ the code to change.

 

TYSM!

faith&you
409 Views
0 Likes
Report
In response to DaisyVo

AryavK
Trailblazer
266 9 43
‎12-07-2024 11:05 AM

Pls reply quickly @DaisyVo 

faith&you
394 Views
0 Likes
Report
In response to DaisyVo

AryavK
Trailblazer
266 9 43
‎12-07-2024 09:15 PM

Hello @DaisyVo . Pls reply fast

faith&you
359 Views
0 Likes
Report

Community Blog Articles

May '25.jpg
Celebrating our Members of May '25

June brought summer energy to our community. Members jumped in with solutions, clicked ...

By JasonH Jun 5, 2025
441285313-63bbef53-3fbe-4e8b-a706-5b37afa90468.png
Automate store operations with Shopify Academy & Coding with Jan

Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...

By Jacqui May 7, 2025
April 25.jpg
Highlighting our Members of April '25

Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...

By JasonH May 2, 2025
Terms of Service Privacy Policy