Solved

Help with Collection Images Dawn 6.0

reelfishy
Excursionist
26 0 2

Hello, I've just upgraded to Dawn 6.0.  www.ReelFishyApparel.com

 

I'm having an issue with Collection Images.  I've uploaded square photos in my Admin > Products > Collections.  The photos look great on my Home Page > Collection List (Shop All Products).  However, when I click to go into the collection (ex: Jackets), the picture is not square.  I have Show Collection Image checked and they suggest 16:9 (For best results, use an image with a 16:9 aspect ratio).  

 

If I change the photos on my Admin > Products > Collections to 16:9, the picture is not correct on my Home Page.

 

If I uncheck the box - Show Collection Image, it doesn't show the image, but it also gets rid of all the collection images.  

 

Is there a way to change to ratio on the collection image to square?

 

Thanks for any help!

Accepted Solution (1)
made4Uo
Shopify Partner
3804 713 1124

This is an accepted solution.

Hi @reelfishy 

 

Here you go. 

1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Asset folder, open the base.css and add the code below

.collection-hero__image-container.media.gradient {
    aspect-ratio: 1;
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 5 (5)

devangfour
Shopify Partner
43 10 8

Hello @reelfishy 

 

I think we need to update some code from admin panel

If you don't mind, Can you please share me private access?

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on devangfour@gmail.com regarding any help
reelfishy
Excursionist
26 0 2

Hello, if you have a solution and let me know the steps and the code to add, I'd like to try it first on my draft version vs my live website.  Thanks for any help!

made4Uo
Shopify Partner
3804 713 1124

This is an accepted solution.

Hi @reelfishy 

 

Here you go. 

1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Asset folder, open the base.css and add the code below

.collection-hero__image-container.media.gradient {
    aspect-ratio: 1;
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
reelfishy
Excursionist
26 0 2

Thank you!  Worked great!

JustMeFrank
Tourist
8 0 2

Thank you for this fix.

Is there a way to fix it on mobile view? 

This worked great for Desktop view, but it still shows 16:9 ratio on mobile view.