Product category page = 3 columns, product page = 1 column.

I have only three products in my store. 

I want to display all three products in three columns on my store page. 

On category pages, I want to display only one column (for my one product per category) 

Please can you help? 

4 hours ago, Ianthe said:

I have only three products in my store. 

I want to display all three products in three columns on my store page. 

On category pages, I want to display only one column (for my one product per category) 

 

Please can you help? 

Can you share the direct links to those pages so I can take a look?

6 hours ago, Beyondspace said:

Can you share the direct links to those pages so I can take a look?

Here is the shop page https://www.ianthe.house/our-properties. I have set it as single column for now, as single column looks better on the product category pages, given we have just one product per category. 

However, I would love to see three columns on the shop page so our three products are side by side (the single column view for the product page shows images that are way too big for what I would like to see!), and just one column on the category pages, to display our single product per category without leaving excess white space for columns where additional (currently non-existing) products might be. 

The issue seems to be that the shop and category pages follow the same structure by default. 

Thank you so much for your help, its sincerely appreciated.

6 hours ago, Ianthe said:

Here is the shop page https://www.ianthe.house/our-properties. I have set it as single column for now, as single column looks better on the product category pages, given we have just one product per category. 

However, I would love to see three columns on the shop page so our three products are side by side (the single column view for the product page shows images that are way too big for what I would like to see!), and just one column on the category pages, to display our single product per category without leaving excess white space for columns where additional (currently non-existing) products might be. 

The issue seems to be that the shop and category pages follow the same structure by default. 

 

Thank you so much for your help, its sincerely appreciated.

From your description, I understand that:

- On Our Properties — Ianthe House, you need 3 columns (side by side)

- On the categories pages (children of Our Properties — Ianthe House), it still keeps 1 column

Is it correct? If it is, you can try the following CSS code

@media only screen and (min-width: 768px) {
  .nested-category-children ~ .products-flex-container .list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

My testing

Shop page

Categories Page

Hope it can help

4 hours ago, Beyondspace said:

From your description, I understand that:

- On Our Properties — Ianthe House, you need 3 columns (side by side)

- On the categories pages (children of Our Properties — Ianthe House), it still keeps 1 column

Is it correct? If it is, you can try the following CSS code

@media only screen and (min-width: 768px) {
  .nested-category-children ~ .products-flex-container .list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

My testing

Shop page

 

Categories Page

Hope it can help

Thank you so much for getting back to me so quickly.

That is exactly the effect I am looking for!

However, for me it works for the shop page, but the category pages still show as two columns (see below). It looks better, but still not the one column I was hoping for!

What column settings have you set as default to begin with? I tried with three and two, but I still can't seem to get the category pages to show as one column. 

Thank you so much for your help again, hopefully third time lucky?!

On my desktop, it has only one column on London Page

Have you checked it again?

10 hours ago, Beyondspace said:

On my desktop, it has only one column on London Page

Have you checked it again?

I had a friend attempt a fix for me. It does now show like this for me, but the images are way too short. I would like them to be standard full screen dimensions for images displayed in this way. 

Might you be able to help me understand how to correct the image height? 

Thank you so much again!