All things Shopify and commerce
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?
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.
Thanks for the clarification. How can I do it on the Dawn theme?
Hi @RainbowSushi,
Drop the Store URL,
Same look and feel can be generated,
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?
You can edit code in your theme:
Step 1: Go to Online store => Edit code
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:
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
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!
- First, in theme editor you should setup Desktop layout: Stacked
- 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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024