Liquid, JavaScript, themes, sales channels
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!
User | RANK |
---|---|
12 | |
10 | |
7 | |
7 | |
6 |
There’s no one-size-fits-all commerce solution, so we keep innovating to help every size b...
By Jasoh Feb 9, 2023Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023