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)
made4Uo
Shopify Partner
3540 662 988

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

 

 

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Need a developer?  Do not break the bank. Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

Replies 6 (6)
made4Uo
Shopify Partner
3540 662 988

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

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Need a developer?  Do not break the bank. Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. 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
3540 662 988

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

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Need a developer?  Do not break the bank. Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. 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
3540 662 988

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

 

 

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Need a developer?  Do not break the bank. Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. 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!