Can I arrange my collections into two columns on the home page?

Store Design
, ,
1

I want to make collections on the home page appear as 2 column, is it possible?
For the context, my collections is now in a row, since I only have 2 collections, I want to make them appear as 2 column.

Any help would be appreciate

2

Could you share your store URL?

3

It is possible to display collections in two columns on the home page; however, it is based on which theme you’re using as well.

Here’s one example solution:

  1. Open your theme editor and navigate to the homepage section.
  2. Find the code that displays your collections on the homepage. This could be a loop or a section that displays collections.
  3. Modify the code to include a new CSS class that sets the display to a grid and specifies a two-column layout. For example:
.collection-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
  1. Save your changes and preview the homepage to ensure the collections appear in two columns.

Alternatively, you can use our Weaverse Section Builder app to create and manage custom homepage sections easily. With Weaverse, you can add collections and specify their layout with a drag-and-drop interface, making it easy to create a two-column layout for your collections on the homepage.

4

Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.

5

Hello @pocca ,

You can try to do this:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Section → collection-list.liquid
  • To set the number of columns to 2, change the medium-up–one-half class to medium-up–one-half small-up–one-whole. This will make the collections appear as 2 columns on medium and larger screens, and as a single column on smaller screens.
{% for collection in collections %}
  
    ...
  

{% endfor %}
  • Save and preview.

Hope this can help.

Ali Reviews team.