Re: How to make the product thumbnails bigger on Dawn Theme?

How to make the product thumbnails bigger on Dawn Theme?

RainbowSushi
Shopify Partner
10 1 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 Partner
3847 377 1411

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
10 1 0

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

Dawood_Mirza_
Trailblazer
135 18 29

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
10 1 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? 

BSSCommerce-B2B
Shopify Partner
1954 562 561

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

RainbowSushi
Shopify Partner
10 1 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

BSSCommerce-B2B
Shopify Partner
1954 562 561

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now