How can I add a Subscribe and Save button to my product collection?

[iamtricia]

Hello! I need some help with my Shopify website. I want to put a save and subscribe switch button on each product on the homepage featured collection. just like on this website. https://wilewomen.com/ and when they switch the price will switch also to subscription price.  

[Filar_co]

Hello, 
This feature is using compare_at_price entity which visibility state change is triggered when clicking the button on the frontend. This can be achieved using Liquid in your theme files, just add some css styling on top of that and you're good to go. Also remember to add "Compare at price" to your products and variants in the Shopify Admin Dashboard -> products. Hope this helps. If you'd like assistance for this process, please feel free to contact me here: hello@filar.co

[iamtricia]

Yeah i need more help.

[iamtricia]

What liquid should i use?

[Filar_co]

To create a button in a Shopify store using Liquid code that toggles the visibility of the "compare at price" on a product page, you'll need to use a combination of Liquid, JavaScript, and CSS. Here's a step-by-step guide on how to do this:

1. Edit the Product Template - go to edit code:

   Open your Shopify theme editor, and find the product template where you want to add this functionality. Typically, this is in a file called product.liquid.

2. Add the Button Markup:

   Add a button to your product template. Here's an example:

   liquid

   <button id="toggleCompareButton">Toggle Compare Price</button>

3. Add the CSS for Hiding the Compare Price:

   You can add a CSS class to your theme's stylesheet to hide the compare price by default. For example:

   css

   .hidden-compare-price { display: none; }

4. Toggle Compare Price with Javascript:

   Add JavaScript to your theme to toggle the visibility of the compare price when the button is clicked. You should include this script at the end of your product template, just before the closing </body> tag:

   html

   <script> document.addEventListener("DOMContentLoaded", function () { var comparePrice = document.querySelector(".compare-price"); var toggleButton = document.getElementById("toggleCompareButton"); if (comparePrice) { toggleButton.addEventListener("click", function () { comparePrice.classList.toggle("hidden-compare-price"); }); } }); </script>

   In this code, we're assuming that the compare price element has a class of "compare-price" and that you're toggling the class "hidden-compare-price" to control its visibility. I would have to inspect your website or theme to make sure how it is implemented in this particular one.

5. Test and Customize:

   After making these changes, save your theme and test it on a product page. Customize the button's appearance and position, as well as the CSS for the compare price, to match your theme's design.

Remember to backup your theme and test thoroughly, as custom code changes can sometimes cause issues. Make sure to adapt the code to fit the specific structure and class names used in your theme.

Please note that Shopify themes may vary, so it's essential to understand your theme's structure and class names to implement this successfully.
All this said it's important to understand that various cases might require different approach. If you will still need help you can contact me through the email I mentioned before. I can implement this feature for you and add 20% discount on the service. 

Have a good day!

[Filar_co]

You could also take a look at this thread to better understand how to use JS and Liquid together: 

https://community.shopify.com/c/shopify-design/how-liquid-amp-javascript-work-together/m-p/843824