Solved

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

LTS
Tourist
5 0 2

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!

 

 

screenshot 1.jpgscreenshot 2.jpg

Accepted Solution (1)

UmairA
Shopify Partner
1106 101 225

This is an 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.

View solution in original post

Replies 9 (9)

UmairA
Shopify Partner
1106 101 225

This is an 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
Tourist
5 0 2

This worked! Thank you!

UmairA
Shopify Partner
1106 101 225

@LTS ,

 

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

LTS
Tourist
5 0 2

@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?

 

 

screenshot of burning oils.jpg

LitExtension
Shopify Partner
4860 1002 1143

Hi @LTS,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
LitExtension
Shopify Partner
4860 1002 1143

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
LitExtension
Shopify Partner
4860 1002 1143

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
shannonwurster
Visitor
1 0 0

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. Rectangle.PNGSquare.PNG

LitExtension
Shopify Partner
4860 1002 1143

Hi @LTS,

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

beforebeforeafterafter

Code:

{%- assign featured_media_aspect_ratio = 1 -%}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify