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
3805 713 1127

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

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 6 (6)

made4Uo
Shopify Partner
3805 713 1127

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
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
3805 713 1127

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
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
3805 713 1127

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

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
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!