Prestige Theme - How I Changed the Collection List on Homepage to Show 2 Collections/Row

[mintmojito]

I had 4 collections on my homepage collection list and I was trying to figure out how to show 2 rows with 2 collections each on desktop instead of the default of 3 collections on 1 row and 1 collection on the second row. I couldn't find the answer on these forums so I decided to post my solution here because I know other people have had the same problem.

Go to this section (use ctrl + f) in assets/theme.scss.liquid and change min-width to 50%:

@include av-mq('desk') {
.CollectionItem {
/* added, changed from 33.33333% */
min-width: 50%;
}

[KetanKumar]

Hello, @mintmojito 

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.

[mintmojito]

Hi I was posting this as a solution to the problem in the title so I don't actually need assistance! Just wanted to help others!

[PV_store]

Thanks for this, I’m currently trialing the theme and was curious if this was an option. How does this look on mobile do you know? Does it show 2 collections per row or does it still stack 1 collection on top of one another?

[KetanKumar]

@PV_store 

Thanks for post 

can you please share store url.

[PV_store]

https://planetvintage.store

If you view it on mobile you can see it stacks the collection images, wondering if I can do two side by side, 2 rows

[Daniellegrostai]

Hi do you know how to do this?

[KetanKumar]

@Daniellegrostai 

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.

[mintmojito]

It stacks 1 collection on top of the other

[KetanKumar]

@mintmojito @PV_store 

Thanks for it 

can you please share section screenshot so i will do

[AbdulMannan]

Collections Showing like this.

I want to show my collection like this

How can I do this?

[KetanKumar]

@AbdulMannan 

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.

[AbdulMannan]

https://faaateh.myshopify.com/

View in Mobile mode

Password is

hafiz2001

[AbdulMannan]

Reply Please

[KetanKumar]

@AbdulMannan 

can you please share collection-list section code so i will check and update

[AbdulMannan]

collection-list.liquid

This section?

[AbdulMannan]

Please tell me this section??

[AbdulMannan]

{%- capture flickity_options -%}
{
  "prevNextButtons": false,
  "pageDots": {% if section.blocks.size > 1 %}true{% else %}false{% endif %},
  "setGallerySize": true,
  "wrapAround": true,
  "watchCSS": true,
  "dragThreshold": 8
}
{%- endcapture -%}

<section id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="collection-list">
  <div class="Carousel Carousel--insideDots CollectionList {% if section.settings.add_spacing %}CollectionList--spaced{% endif %}" data-flickity-config='{{ flickity_options }}'>
    {%- for block in section.blocks -%}
      {%- assign collection = collections[block.settings.collection] -%}
      {%- include 'collection-item', collection: collection, apply_overlay: block.settings.apply_overlay -%}
    {%- endfor -%}
  </div>
</section>

<style>
  #section-{{ section.id }} .CollectionItem .Heading,
  #section-{{ section.id }} .flickity-page-dots {
    color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .CollectionItem__Link {
    color: {{ section.settings.button_color }};
    border-color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .CollectionItem__Link::before {
    background-color: {{ section.settings.text_color }};
  }

  @media (-moz-touch-enabled: 0), (hover: hover) {
    #section-{{ section.id }} .CollectionItem__Link:hover {
      color: {{ section.settings.text_color }};
    }
  }
</style>

{% schema %}
{
  "name": "Collection list",
  "max_blocks": 18,
  "settings": [
    {
      "type": "select",
      "id": "image_size",
      "label": "Image size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "normal"
    },
    {
      "type": "checkbox",
      "id": "add_spacing",
      "label": "Add spacing",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "expand_collection",
      "label": "Expand collections to fill row",
      "default": false
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button text",
      "default": "#363636"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1120 x 1200px jpg recommended"
        },
        {
          "type": "select",
          "id": "image_alignment",
          "label": "Image alignment",
          "options": [
            {
              "value": "top left",
              "label": "Top left"
            },
            {
              "value": "top center",
              "label": "Top center"
            },
            {
              "value": "top right",
              "label": "Top right"
            },
            {
              "value": "center left",
              "label": "Middle left"
            },
            {
              "value": "center center",
              "label": "Middle center"
            },
            {
              "value": "center right",
              "label": "Middle right"
            },
            {
              "value": "bottom left",
              "label": "Bottom left"
            },
            {
              "value": "bottom center",
              "label": "Bottom center"
            },
            {
              "value": "bottom right",
              "label": "Bottom right"
            }
          ],
          "default": "center center"
        },
        {
          "type": "select",
          "id": "content_position",
          "label": "Desktop content position",
          "options": [
            {
              "value": "middleLeft",
              "label": "Middle left"
            },
            {
              "value": "middleRight",
              "label": "Middle right"
            },
            {
              "value": "middleCenter",
              "label": "Middle center"
            },
            {
              "value": "bottomLeft",
              "label": "Bottom left"
            },
            {
              "value": "bottomRight",
              "label": "Bottom right"
            },
            {
              "value": "bottomCenter",
              "label": "Bottom center"
            }
          ],
          "default": "bottomLeft"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Sub-heading",
          "default": "Sub-heading"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "info": "If none is set, collection title is used."
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "View products"
        },
        {
          "type": "checkbox",
          "id": "apply_overlay",
          "label": "Apply overlay on image",
          "info": "This can improve text visibility.",
          "default": true
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Collection",
      "name": "Collection list",
      "settings": {},
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

[AbdulMannan]

Please Help me I need your help urgently!!!

[KetanKumar]

yes please 

<section id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="collection-list">
  <div class="Carousel Carousel--insideDots CollectionList {% if section.settings.add_spacing %}CollectionList--spaced{% endif %}">
    {%- for block in section.blocks -%}
      {%- assign collection = collections[block.settings.collection] -%}
      {%- include 'collection-item', collection: collection, apply_overlay: block.settings.apply_overlay -%}
    {%- endfor -%}
  </div>
</section>

<style>
  #section-{{ section.id }} .CollectionItem .Heading,
  #section-{{ section.id }} .flickity-page-dots {
    color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .CollectionItem__Link {
    color: {{ section.settings.button_color }};
    border-color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .CollectionItem__Link::before {
    background-color: {{ section.settings.text_color }};
  }

  @media (-moz-touch-enabled: 0), (hover: hover) {
    #section-{{ section.id }} .CollectionItem__Link:hover {
      color: {{ section.settings.text_color }};
    }
  }
</style>

{% schema %}
{
  "name": "Collection list",
  "max_blocks": 18,
  "settings": [
    {
      "type": "select",
      "id": "image_size",
      "label": "Image size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "normal"
    },
    {
      "type": "checkbox",
      "id": "add_spacing",
      "label": "Add spacing",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "expand_collection",
      "label": "Expand collections to fill row",
      "default": false
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button text",
      "default": "#363636"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1120 x 1200px jpg recommended"
        },
        {
          "type": "select",
          "id": "image_alignment",
          "label": "Image alignment",
          "options": [
            {
              "value": "top left",
              "label": "Top left"
            },
            {
              "value": "top center",
              "label": "Top center"
            },
            {
              "value": "top right",
              "label": "Top right"
            },
            {
              "value": "center left",
              "label": "Middle left"
            },
            {
              "value": "center center",
              "label": "Middle center"
            },
            {
              "value": "center right",
              "label": "Middle right"
            },
            {
              "value": "bottom left",
              "label": "Bottom left"
            },
            {
              "value": "bottom center",
              "label": "Bottom center"
            },
            {
              "value": "bottom right",
              "label": "Bottom right"
            }
          ],
          "default": "center center"
        },
        {
          "type": "select",
          "id": "content_position",
          "label": "Desktop content position",
          "options": [
            {
              "value": "middleLeft",
              "label": "Middle left"
            },
            {
              "value": "middleRight",
              "label": "Middle right"
            },
            {
              "value": "middleCenter",
              "label": "Middle center"
            },
            {
              "value": "bottomLeft",
              "label": "Bottom left"
            },
            {
              "value": "bottomRight",
              "label": "Bottom right"
            },
            {
              "value": "bottomCenter",
              "label": "Bottom center"
            }
          ],
          "default": "bottomLeft"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Sub-heading",
          "default": "Sub-heading"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "info": "If none is set, collection title is used."
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "View products"
        },
        {
          "type": "checkbox",
          "id": "apply_overlay",
          "label": "Apply overlay on image",
          "info": "This can improve text visibility.",
          "default": true
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Collection",
      "name": "Collection list",
      "settings": {},
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

[AbdulMannan]

Sir After Inserting the codes its look like this

What did I do?

All Blank

[KetanKumar]

@AbdulMannan 

oh sorry for that 

can you revert code 

if possible to add me staff or your have contact your theme support team 

[AbdulMannan]

How can I add you?

[KetanKumar]

@AbdulMannan 

https://www.shopify.ca/partners/blog/shopify-collaborator-account

[Anderson10]

Hello Ketan

May I ask if it's possible to look at mine? I was hoping for two 'collection list' collections sitting side by side on mobile view. Mr URL is https://frontiers-man.com/.

Many thanks in advance.