Debut theme - changing settings on product images and headings

Solved
Tourist
49 0 2

Hi,

 

I'm just trying to work out what options I have for changing the layout of my products and descriptions.  In particular I want the words to stay within the confines of the image, and to make the images bigger (so there is less white space between them).  Any ideas?

 

Also, on the actual product pages in the "you may also like" area, the words are all over the place - I'm not sure how to tidy this up.  I've attached a couple of screen shots, and the url is www.ellennyswim.com.

 

Any help much appreciated!

product shot.JPGyou may also like.JPG

0 Likes

Hello 

For first screenshot:

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (min-device-width: 480px){
.grid-view-item__image-wrapper {
    max-width: 300px!important;
}
.grid-view-item__image {
    max-width: 300px!important;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
49 0 2

Hi,

 

I just tried that, but unfortunately it stretched the images and added in a side bar thing:

 

products1.JPG

0 Likes

Okay. 

Please remove that css.
1.Actually your images is of small size thats why images streched.
So if you want image size large then upload large size image.
Otherwise you can display 4 products per row. 

 

2. For "you may also like" products:
 Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.template-product #shopify-section-product-recommendations dl.price {
	justify-content: center;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
49 0 2

Perfect, that fixed the second issue, thank you.

 

How do I change to four products per row?

0 Likes

You can change that setting from backend follow this screenshot:
40.jpg128.jpg129.jpg130.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
49 0 2

Ah of course!  Thank you.

 

So there's no way to contain the text within the boundaries of the image?

0 Likes

Success.

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.h4.grid-view-item__title.product-card__title {
    width: 80%!important;
    padding-left: 18%!important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
49 0 2

Awesome.  That did it.  Thank you (once again!)

0 Likes