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

Store Design
1

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%;
}

2 Likes
2

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.

3

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!

4

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?

1 Like
5

@PV_store

Thanks for post

can you please share store url.

6

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

7

It stacks 1 collection on top of the other

8

@mintmojito @PV_store

Thanks for it

can you please share section screenshot so i will do

9

Hi do you know how to do this?

1 Like
10

@Daniellegrostai

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

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

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

11

AbdulMannan_0-1631690043686.png
AbdulMannan_0-1631690043686.png383×481 155 KB

Collections Showing like this.

AbdulMannan_0-1631690487471.png
AbdulMannan_0-1631690487471.png335×950 341 KB

I want to show my collection like this

How can I do this?

1 Like
12

@AbdulMannan

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

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

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

1 Like
13

https://faaateh.myshopify.com/

View in Mobile mode

Password is

hafiz2001

14

Reply Please

1 Like
15

@AbdulMannan

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

1 Like
16

collection-list.liquid

This section?

17

Please tell me this section??

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

{% 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 %}
1 Like
19

Please Help me I need your help urgently!!!

20

yes please


{% 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 %}
1 Like