How do I change the size of collection featured image for dawn theme

[LTS]

Greetings! I'm very new to Shopify. My site is: https://lt-squared.myshopify.com

I have the Dawn theme.

I have several products. Some are products without variants and some are in collections with variants. I love the size of the image on the products that aren't in collections. However, the main image on the collection product page with variants is smaller, rectangular and doesn't seem to flow. It doesn't show the full image of my product. Can someone please assist me on changing the size from rectangular (products in collections) to square (like the products not in collections)?

I am able to resize my own pictures to the square size.

I have included 2 screenshots for reference. The black soap foaming wash picture (square) is the size that I would like the coconut oil picture (rectangular) to be.

Thanks in advance!

[UmairA · Accepted solution]

Hi @LTS ,

Add the following code to your theme.css file

@media only screen and (min-width: 768px) {
.collection-hero__image-container {

    min-height: 500px !important;
    min-width: 500px !important;

}
}

Hope it fixes your issue.

[LTS]

This worked! Thank you!

[UmairA]

@LTS ,

You are always welcome. Let me know if you need help with anything else.

[LTS]

@UmairA Thank you! I actually do have another question. On this page, I want to offer a click box of some type to ask the customer if they want an oil dropper with their oil. It would cost $1 if they click yes to the oil dropper, or keep the price the same if they click no.

Is this possible?

[LitExtension]

Hi @LTS,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[LitExtension]

Hi @LTS,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[LitExtension]

Hi @LTS,

I don't understand, you followed my instructions and it works fine. You can check by removing the above CSS, everything still renders fine as the instructions changed at snippets > product-card.liquid file.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[shannonwurster]

Hi Umair, 

I am using debut them and I would like the opposite. The picture of the collection on the website is square and I want it to conform to the rectangle size that I uploaded on the admin size. 

[LitExtension]

Hi @LTS,

Go to snippets > product-card.liquid file, change code:

beforeafter

Code:

{%- assign featured_media_aspect_ratio = 1 -%}

Hope it helps!