HOW TO CHANGE THE SIZE OF PRODUCT IMAGE ON FEATURED COLLECTION DAWN THEME?

Shopify Discussion
1

Hi, the images on the featured collection look so big. I want to change the size .

1 Like
2

I agree! I’d like to know that as well

1 Like
3

Hi @MAFER22 and @Cotten

You can do the following to size the images.

  1. From you Admin page, go to Online store > Themes > Customize
  2. Click the Featured Collection in your left hand side. This should open a panel on your right hand side
  3. Click the Custom CSS and place the code below. See image
.collection .card__inner {
    width: 50%;
    margin: auto;
}

made4Uo_1-1686355731678.png
made4Uo_1-1686355731678.png1901Ă—914 194 KB

4

Hi Made4Uo,

This solution worked great. Ideally I’d like the product description underneath to line up with the new image size. Is there some extra code I can add in to make this happen?

Thanks,

5

Hi @mikebutcher

Yes, you will need to add the {{ product.description }} code. I am assuming you have the latest theme. Please follow the instructions below.

  1. From your Admin page, go to Online Store > Themes > Select the theme you want to edit > Click the three dots > Edit code

  2. Open the card_product.liquid under the Snippet folder

  3. Look for the word “card__information” somewhere line 146. Then add the code below. See image for reference.

NOTE: The code below only applies to featured collection section. If you want it to apply to all product card, just paste the code {{ card_product.description }}

{% if section.id contains "featured" %}
 {{ card_product.description }}
{% endif %}

Be mindful in using this, since some product have a long description

made4Uo_0-1717058347285.png
made4Uo_0-1717058347285.png1018Ă—813 46.9 KB

6

HI! THANKYOU I have been searching and searching for a code that works & this is the only code I have found that works to rezise featured collection titles on the dawn theme However, it changes both desktop & mobile- making it the perfect size on desktop but TINY on mobile. Is there some extra code to add to this that works just for desktop & doesn’t change mobile? I am so desperate! my desktop looks terrible