Featured Category CSS Design Help - Dawn Theme

Store Design
, ,

Topic summary

A user is customizing the featured collection section on their Shopify Dawn theme homepage to match a reference design. They want to replicate specific styling elements including slider functionality, product grid layout, borders, and sizing—excluding the pink color scheme.

Progress made:

  • Adjusted full-width settings to reduce oversized product grids
  • Implemented custom CSS code (added before closing </body> tag in theme.liquid) to style the collection section
  • Added borders and adjusted grid sizing through code modifications

Current issue:

  • Product images are appearing aligned to the right side of the desktop view instead of being centered
  • User suspects the custom CSS code is causing this alignment problem

A community helper (kaalTechGeeks) has been providing iterative CSS solutions and troubleshooting guidance. The discussion includes multiple code snippets and screenshot references showing the desired vs. actual layouts. The centering issue remains unresolved and awaits further assistance.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello all,

I have a little problem. I Use the Dawn Theme from Shopify and I want several changes for my featured category section on the main page.

hb1.PNG
hb1.PNG1529×882 272 KB

So this is the actual one. And I want it exctly to look like this one (except for the colors). I am very thankful for any kind of help.

hb2.PNG
hb2.PNG1888×899 154 KB

2

Hi @TommySete ,
Do you want the slider feature & add to cart button design as on reference in your website or is there anything else I am missing?
Please guide me also it would be great if you can share your website URL so that I can work on the solution and update you.
Thanks

3

Hello and thanks for the help.

Yes, also the slider. And anything else except the rosa color :slightly_smiling_face:

The shop ist:

https://bit.ly/3tFb5e8

And the password is: JayJayOk

4

Hey @TommySete ,
It says the password is wrong

5

Try it now please

6

Hi @TommySete ,
so I looked at your website and the product grids looks really huge and I can notice that you have set them up to full width to remove that just uncheck the box shown in the image below in your customization settings

kaalTechGeeks_0-1668795224339.png
kaalTechGeeks_0-1668795224339.png401×162 2.83 KB

And I can see that the slider is already implemented on desktop for your store, what you need to do is increase the number of product that can be shown to more than 3.
Hope this will work

7

Already done:

TommySete_0-1668795814979.png
TommySete_0-1668795814979.png271×273 3.93 KB

Now only the design part is missing :slightly_smiling_face:

8

@TommySete Just copy paste the below code just at the bottom of the theme.liquid file just before the closing body tag ()

This will make your featured collection as shown in image below

kaalTechGeeks_1-1668796635029.png
kaalTechGeeks_1-1668796635029.png1546×772 119 KB

Thanks

1 Like
9

Perfect. But how do I get the boxes a bit bigger each and with the border?

Like https://kyliecosmetics.com/en-eu

10

@TommySete
You need to just replace the code I sent you before with the one I am adding below

And the grid would be coming like the below image:

kaalTechGeeks_0-1668798626879.png
kaalTechGeeks_0-1668798626879.png1538×748 146 KB

11

Can you help me again please:

TommySete_0-1668799733495.png
TommySete_0-1668799733495.png1905×843 215 KB

The Pictures are on the right side of the desktop and not in the center. Is this because of the code?