FROM CACHE - en_header
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Some merchants and partners are experiencing problems when logging into their Shopify accounts. We will continue to provide updates to you here.

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

Solved
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)

Accepted Solutions
made4Uo
Shopify Partner
2590 477 720

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;
}

 

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

Replies 6 (6)
made4Uo
Shopify Partner
2590 477 720

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
2590 477 720

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
2590 477 720

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;
}

 

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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!