I’m developing a custom app for Shopify and I need some help. I want to create a feature that lets store owners toggle the visibility of the ‘Add to Cart’ button on their product pages. The idea is to have a simple switch that can show or hide this button.
I’m not sure how to go about this. Should I use Liquid to modify the product template? Or is there a way to do this through the app itself? I’ve tried looking into Shopify’s documentation, but I’m still a bit lost.
Has anyone done something similar before? Any tips or code examples would be super helpful. I’m comfortable working with Laravel or Node.js, so solutions in either of those would be great.
Thanks in advance for any advice!
hey there nate! i’ve done somthing similar before. you could use a metafield to store the toggle state for each product, then use liquid to check that metafield and show/hide the button. smthing like:
{% if product.metafields.custom.hide_add_to_cart %}
{% else %}
{% endif %}
hope this helps!
I’ve tackled this issue before in one of my Shopify projects. Instead of using Liquid, I found it more flexible to handle this through JavaScript. Here’s what worked for me:
-
Create a setting in your app’s admin panel for merchants to toggle visibility.
-
When the setting is changed, update a custom app metafield for the store.
-
On the front-end, use the Shopify JavaScript SDK to fetch this metafield value.
-
Based on the value, dynamically show/hide the ‘Add to Cart’ button.
This approach gives you real-time control without needing to modify theme files. It’s also more scalable if you want to add more granular controls later.
One caveat: Make sure to handle the brief moment when JavaScript is loading to prevent flickering. You can initially hide the button with CSS and show it once your script determines it should be visible.
Let me know if you need more specifics on implementation!