increase the size of the product grid

FindWorld
Explorer
145 6 68

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

 

 

0 Likes
Pallavi
Shopify Expert
2172 353 463

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
Natztech
Shopify Partner
1308 359 895

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
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
FindWorld
Explorer
145 6 68

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 @Natztech @Pallavi 

0 Likes
FindWorld
Explorer
145 6 68

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.

0 Likes
Pallavi
Shopify Expert
2172 353 463

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
0 Likes
FindWorld
Explorer
145 6 68

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
Explorer
145 6 68

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. @Pallavi 

0 Likes
Pallavi
Shopify Expert
2172 353 463

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
Explorer
145 6 68

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

0 Likes