Dawn Theme : Featured Collection alignment help

Store Design

Topic summary

Main issue: aligning/spacing products in the Dawn theme’s Featured Collection to achieve a custom layout different from the default grid.

Access/setup: Helper requested store URL and password; initial access failed due to password protection, then was fixed and code could be tested.

Approach 1: Add custom CSS (or code in product.liquid/product-template.liquid) to adjust grid alignment. Initial attempt didn’t work until site access was restored; manual style insertion showed progress.

Images: Desired look relies on product images with identical resolution and transparent backgrounds (.png). User was advised to create consistent .png images (e.g., via Canva) and re-uploaded revised photos.

CSS changes: For desktop (min-width: 990px), target .grid–5-col-desktop .grid__item with max-width (e.g., 30%) and margin (e.g., 0px 25px). These values control item size and spacing; increasing margin spreads items apart.

Implementation: Add the CSS in one place only (e.g., theme.liquid within the via Online Store > Live Theme > Actions > Edit Code). CSS = styling rules that control layout/appearance.

Outcome/status: Visuals “look great” after image updates; further tuning via CSS provided. Final confirmation from the store owner is pending; discussion appears ongoing.

Resources: A YouTube tutorial link was shared for Dawn Featured Collection alignment. Images linked are central to understanding the target layout.

Summarized with AI on January 7. AI used: gpt-5.
1

Hello Everyone!

I’m new to Shopify and designing my very first store. I have a big issue if somebody could help me solve it.

I’ve achieved my ideal featured collection section height and width but i want placement of my products to be different

I’ve attache two picture below of what i have right now and what i want to achieve.

Current : https://ibb.co/HKTRHq2

What i want to achieve : https://ibb.co/vJsxNy7

Any help would be appreciated.

Thank You.

1 Like
2

Hi Rgv1, welcome to Shopify! Could you post or send me the password for your site? I’d like to take a look at the code and see what specifically we could add to your product grid items to get them aligned for you.

Thanks!

3

Hi @Hermit_the_Log

abcd

4

@rgv1

can you please send store url

5

pragatint.com

6

@rgv1

thanks bt its password protect

7

Hi Rgv1,

Try adding the following code to the top of your product.liquid, product-template.liquid, or CSS style sheet. If you’re adding to your existing style sheet, you won’t need the tags
8

should i add to all of these or just any one of these

9

Just adding it to any one of those should do the trick

10

Hi @Hermit_the_Log , I’m having issues. it didn’t work for me

11

Hi @rgv1 I’ll take another look. Did you change the password for the site? I’m having trouble accessing your site now for some reason

12

it should work now

13

Thank you that worked. This is what I’m achieving by manually entering the style code into your site. Is this what you’re looking to do?

Screenshot 2022-08-15 014449.png
Screenshot 2022-08-15 014449.png927×455 55.2 KB

14

this is what I’m trying to get

https://ibb.co/vJsxNy7

15

Something like that would most likely require you to upload .png versions with the same resolution and a transparent background on each photo. I would recommend using Canva to create some new product photos and uploading those first, then we can work on the spacing for you

16

thank you. i’ll be back

1 Like
17

hi @Hermit_the_Log , I’ve uploaded the revised photos can you please check them out?

Thank You

18

Looks great! You can make the photos bigger and more spread out by adding this code here to your CSS file

@media screen and (min-width: 990px)
.grid--5-col-desktop .grid__item {
    max-width: 30% !important;
    margin: 0px 25px !important;
}

Adjusting that 30% will make them bigger or smaller, and adjusting the 25px in the margin code will either spread them out or make them closer together. The bigger the number, the farther apart they’ll go.

Let me know what you think

19

one last this thing. can you guide me where should i post this. i have zero coding background :face_with_head_bandage:

20

Sure thing. Navigate to Online Store > Live Theme > Actions > Edit Code. From here, you’ll want to open your theme.liquid file under the Layout section.

In the theme.liquid file, place this code below within your tags. You’ll want to put towards the end, just before the tag, and then click Save.

Let me know if you have any trouble and what you think of the result