How to make the product thumbnails bigger on Dawn Theme?

RainbowSushi
Shopify Partner
4 0 0

My product thumbnails are small, I tried all the other options in the Dawn theme and they're not what I want. I'd like for the images in my product page to be bigger or for the text and images to stretch out. I attached an example of how I'd like them to be. Example . Any Idea how to get that done? 

 

image.jpeg

Replies 7 (7)

tim
Shopify Expert
3466 280 1286

Just in case -- your example site uses a Tailor theme https://themes.shopify.com/themes/tailor/styles/cotton 

So the easiest would be to purchase that theme.

 

Adding desired layout to Dawn is possible, but not a trivial change.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
RainbowSushi
Shopify Partner
4 0 0

Thanks for the clarification. How can I do it on the Dawn theme?

Dawood_Mirza_
Excursionist
70 12 20

Hi @RainbowSushi
Drop the Store URL,
Same look and feel can be generated,

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
RainbowSushi
Shopify Partner
4 0 0

Hi, my store is still not published yet, I put a password because I'm still working on it. is there an easy way to get it done? 

BSS-TechFusion
Shopify Expert
149 26 15

Hi @RainbowSushi 

 

You can edit code in your theme:

Step 1: Go to Online store => Edit code

view (25).png

Step 2: Find file base.css 

Step 3: Add this code bellow at the end of file:

@media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
        max-width: 100%;
    }
}
@media screen and (min-width: 750px) {
    .grid--2-col-tablet .grid__item {
        width: 100%;
    }
}

- This is the result:

view.png

 

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

Have a nice day sir! 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

RainbowSushi
Shopify Partner
4 0 0

Hello!

Yes, this is exactly what I want, but I tried to put in the code and it did not work, any idea why? I took a screen shot of where I added the code. Thank you for trying to help!

Screenshot 2024-05-15 at 9.54.43 AM.png

BSS-TechFusion
Shopify Expert
149 26 15

Hi @RainbowSushi 

- First, in theme editor you should setup Desktop layout: Stacked 

view.png

-  Then you should try add !important property in css code: 

 

@media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
        max-width: 100% !important;
    }
}
@media screen and (min-width: 750px) {
    .grid--2-col-tablet .grid__item {
        width: 100% !important;
    }
}

 

I hope these instructions will help you. Have a nice day sir! 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development