Add to card button , the row too close how can I make a space.

ECO88
Excursionist
11 0 7

Hi,

I did success to edit the script for the 'add to cart 'button and the row is too close. how can I make the row space in between look neat and nice.

also, how can I do with when click on add to cart it still on the same page and no open to your cart page, please 

Screen Shot 2021-10-13 at 8.21.45 PM.png

Screen Shot 2021-10-13 at 8.22.48 PM.png

Replies 17 (17)

KetanKumar
Shopify Partner
36839 3635 11972

@ECO88 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ECO88
Excursionist
11 0 7
dmwwebartisan
Shopify Partner
12280 2546 3694

@ECO88 

 1. In your Shopify Admin go to:  online store > themes > actions > edit code.

2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file.

.grid__item--1588572906201{padding-bottom: 35px;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

@ECO88 

Second solution

 1. In your Shopify Admin go to:  online store > themes > actions > edit code.

2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file.

#shopify-section-1588572906201 .product-card+form {
    padding-bottom: 35px;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KetanKumar
Shopify Partner
36839 3635 11972

@ECO88 

thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-card+form {margin-bottom: 50px !important;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dmwwebartisan
Shopify Partner
12280 2546 3694

@ECO88 

Third solution 

 1. In your Shopify Admin go to:  online store > themes > actions > edit code.

2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file.

.product-card+form {margin-bottom: 50px !important;}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ECO88
Excursionist
11 0 7

Thank you so much, the homepage it ok now the category page is uneven, could you please help 

Screen Shot 2021-10-30 at 12.28.57 PM.png

ECO88
Excursionist
11 0 7
dmwwebartisan
Shopify Partner
12280 2546 3694

@ECO88 

 1. In your Shopify Admin go to:  online store > themes > actions > edit code.

2. Find  Asset > theme.scss.liquid  and paste this at the bottom of the file.

@media only screen and (min-width: 750px) {
.template-collection .grid-view-item { min-height: 20rem !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ECO88
Excursionist
11 0 7

Hi @dmwwebartisan Thank you, It is getting closer to line up but still a bit uneven as the photo.

Screen Shot 2021-10-30 at 9.48.04 PM.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@ECO88 

yes please try this code

.product-card__title {display: inline-block; min-height: 50px ;}
.grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
.grid-view-item__image-wrapper .grid-view-item__image {height: 100%;
    object-fit: contain;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ECO88
Excursionist
11 0 7

Hi @KetanKumar I have change this code

@media only screen and (min-width: 1080px) {
.template-collection .grid-view-item { min-height: 21rem !important;} 

from 20rem to 21 rem now it all line up.

-------------

Another thing this everything when you click add to cart to take you to the check out page, thing I can do to have the pop up on the side instead so people still can continue shopping while one the page 

-------------

and our pagespeed score is pretty low do you have anyway to fix it please?

Screen Shot 2021-10-30 at 10.25.53 PM.png

Screen Shot 2021-10-30 at 10.25.36 PM.png

  

 

ECO88
Excursionist
11 0 7

@KetanKumar another question is can photo of the product have the carousel rather than have to click as individual

Screen Shot 2021-10-30 at 10.53.48 PM.png

?

KetanKumar
Shopify Partner
36839 3635 11972

@ECO88 

do you have like this 

https://codepen.io/Turqueso/pen/rNNzpwb

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ECO88
Excursionist
11 0 7

@KetanKumar  No , I don't. Do I have to add it anywhere?

 

ECO88
Excursionist
11 0 7

Also on the mobile version,

257613105_998084277420183_1131337222591257277_n.jpg

it's not even looking. Could you please help guide me to fix it please.

KetanKumar
Shopify Partner
36839 3635 11972

@ECO88 

try this code

@media only screen and (max-width: 749px) {
.product-card+form input {
    width: 64%;
}
.product-card+form input#quantity {
    width: 34%;
    padding: 8px 4px;
font-size: 9px;
  }
.product-card {min-height: 236px;}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing