How to set up 3 columns in Dawn theme's featured collection widget?

Store Design
,
1

I’m trying to get the featured collection widget on Dawn to only show 3 columns. The current set up allows for 2, 4,…

How do I change this so that 3 columns is an option?

2

Hi
This is Victor from PageFly - Shopify Page Builder App

It will require some custom code to be added to your theme style file to accomplish this

Step 1 : Online Stores > More action > edit code > find on this

PageFlyVictor_0-1670982763562.png

And find for base.css

Step 2 : Paste the code at the bottom of the file

.grid--4-col-desktop .grid__item {
  max-width: unset !important;
}

.grid {
  column-gap: unset !important;
}

li.grid__item {
width: 32% !important;
}

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

Hi @kemmieg ,

I checked and it allows change to 3, have you tried this setting?

Screenshot.png
Screenshot.png688×871 29.8 KB

Hope it helps!

4

that makes 4 columns. If you have more than 3 items in the collection, that gives you 4 columns I only want 3.

5

This did not work. Still had 4 columns only the 4th item was huge. I just want 3 products from the collection to show.

6

Hi @kemmieg ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px){
  .collection-list .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
  }
}

Hope it helps!

7

Hi @kemmieg
Basically, the Dawn theme setting is fixed for the layout/products
I think you should try the custom CSS code to achieve it without affecting the theme settings.

Hope this can help you solve the issue
Thank you