FROM CACHE - en_header

increase the size of the product grid

FindWorld
Pathfinder
145 6 73

Hello community,
Could you help me, please?
I'm trying to increase the size of the product grid, I'd like it not to change the size because of the text, can you see that products that have 2 lines and 1 line change the size? Can you help me?
on cell phone and computer I would like to change this

My store: findworld.com.br
Password: edit321

Thanks

FindWorld_1-1625585331549.png

 

 

Replies 9 (9)
ZestardTech
Shopify Expert
3589 592 831

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.template-index .grid__item .h4.grid-view-item__title.product-card__title {
min-height: 104px;
}
@media screen and (max-width:749px){
.template-index .grid__item .h4.grid-view-item__title.product-card__title {
min-height: 104px;
padding: 10px 10px 10px;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Kinjaldavra
Shopify Partner
2302 569 1407

hello @FindWorld

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. 

 

.template-index .grid__item .h4.grid-view-item__title.product-card__title {
min-height: 105px;
}
@media screen and (max-width:749px){
.template-index .grid__item .h4.grid-view-item__title.product-card__title{
min-height: 100px;
padding: 20px 10px 10px;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
FindWorld
Pathfinder
145 6 73

Hi friends, thanks for the help.

When I move the mouse over the grid and the button appears, it seems that it takes off a little bit down, can you tell me how to raise the button a little? Because when he appears, he moves the things that are down to the bottom.

FindWorld_1-1625672789318.png

and in the last product line, this one, could you help me, please?

Thanks @Kinjaldavra @ZestardTech 

FindWorld
Pathfinder
145 6 73

Friend,
Can you see that a product has no comparison price and is a little higher? Is it possible to make everyone the same? I didn't want to edit only it, because if I put it up for promotion, I'll have to change the code too.

ZestardTech
Shopify Expert
3589 592 831

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media only screen and (min-width: 750px){
.product-card:hover .price--on-sale .btn--see-product {
margin-top: 33px;
}
#shopify-section-16215495893789c7e1 .product-card .price {
margin-top: 10px;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
FindWorld
Pathfinder
145 6 73

Hello friend, thanks for the help.
Could you help me fix the button? When the item has no promotion, it goes up a lot and when it has promotion, the button moves the section from below

FindWorld_0-1625719977031.png

 



FindWorld
Pathfinder
145 6 73

If you go to my page and hover over the product, you can see that the button when it appears moves the section from below. @ZestardTech 

ZestardTech
Shopify Expert
3589 592 831

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media only screen and (min-width: 750px){
    #shopify-section-16215495893789c7e1 .product-card .price {
        min-height: 81px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    .product-card:hover .btn--see-product {
        max-height: 40px;
    }
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
FindWorld
Pathfinder
145 6 73

Hello friend, I don't think it worked, I added it now.