Re: I removed the "add to cart" button in one of my products, yet the product zoom doesn't

Solved

I removed the "add to cart" button in one of my products, yet the product zoom doesn't work..

siliancakery
Tourist
5 0 2

Hello, I need some help here.

 

I'm using the debut theme. I've followed the instruction in this video and removed the "add to cart" button in one of my products, as I want people to email/dm me before I take any of their money.

 

https://www.youtube.com/watch?v=L_PMguOiwmY

 

Yet afterwards, the zoom effect in my product page doesn't work properly anymore.

Moreover, there is a "Buy with ShopPay" button instead that I really want to remove it. Is there a way to fix the problems?

 

Here's the page:  https://siliancakery.ca/collections/rotating-menu/products/vinok-cake

 

Thanks so much. 

 

 

Accepted Solution (1)
made4Uo
Shopify Partner
3839 716 1177

This is an accepted solution.

Hi @siliancakery 

 

I assume you can open the product section that you created. Inside the file, pressed "Ctrl" and "F" to open the search bar, then look for "product-form__item ." Next to it add this "hide-buttons." Click SAVE. Please see image below for placement. 

 

Screenshot 2022-03-08 180422.jpg

 

Then in the theme.css file under the Asset folder, add the code below. 

.hide-buttons {
margin-top: 0 !important;
visibility: hidden !important;
height: 0 !important;
}

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 6 (6)

made4Uo
Shopify Partner
3839 716 1177

Hi @siliancakery ,

 

Deleting the code broke the script code. I would suggest not deleting it to instead just hide it. Revert back to your original code and add this to the theme.css file under the Asset folder.

.product-form__controls-group ~ .product-form__controls-group--submit {
    margin-top: 0 !important;
    visibility: hidden  !important;
    height: 0 !important;
}

 

If this helps, please select as a solution. Thank you

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
siliancakery
Tourist
5 0 2

Hello Made4Uo

My goal is to hide the "add to cart" button in one specific product only. By adding the code above, I assume it'll hide the form in all products??

 

made4Uo
Shopify Partner
3839 716 1177

Hi @siliancakery 

 

That is true. But if you find this class " product-form__controls-group" in your product page and add "hide-buttons" next to it. Then add this code below in the theme.css. This should this should work.

 

.hide-buttons {

margin-top: 0 !important;
visibility: hidden !important;
height: 0 !important;
}

 

Let me know, if it works

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
siliancakery
Tourist
5 0 2

Thanks Made4Uo. 

So 

.product-form__controls-group ~ .product-form__controls-group--submit { margin-top: 0 !important; visibility: hidden !important; height: 0 !important; }

 

at theme.css under Asset, and then 

 

.hide-buttons {

margin-top: 0 !important;
visibility: hidden !important;
height: 0 !important;
}

 

inside the class " product-form__controls-group" in my specific product page??? How to find such page under "edit code"?? Or do I go to the editing interface of that specific product? Sorry for my stupid questions. I'm not too familiar with these.. 

made4Uo
Shopify Partner
3839 716 1177

This is an accepted solution.

Hi @siliancakery 

 

I assume you can open the product section that you created. Inside the file, pressed "Ctrl" and "F" to open the search bar, then look for "product-form__item ." Next to it add this "hide-buttons." Click SAVE. Please see image below for placement. 

 

Screenshot 2022-03-08 180422.jpg

 

Then in the theme.css file under the Asset folder, add the code below. 

.hide-buttons {
margin-top: 0 !important;
visibility: hidden !important;
height: 0 !important;
}

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
siliancakery
Tourist
5 0 2

OMG! Now it works!!!! I have been struggling with the situation for a whole month now! Thank you so sooo sooo sooooo much for the detailed solution!