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
2848 525 798

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
2848 525 798

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
2848 525 798

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
2848 525 798

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!