Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Solved! Go to the solution
This is an accepted solution.
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.
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;
}
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
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??
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
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..
This is an accepted solution.
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.
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;
}
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024