Adding a class to a button for analytics.

Technical Q&A
1

Hi Community,

Here is my online store link: https://setu.in/

On my home page, there are 2 sections, “Best Sellers” & “Limited Offers”.

What I want to do is, add a css class on the “Add to cart” button on the product card in these 2 specific sections for analytics.

However I cant find the liquid code file for the same, the 2 sections are coming from collections that have been created for the store. Both the collection share a common template so I’m not sure if that is even possible. If anyone has a solution for this I would really appreciate the help.

Screenshot from 2022-09-14 13-17-09.png
Screenshot from 2022-09-14 13-17-09.png1591×725 216 KB

Screenshot from 2022-09-14 13-17-16.png
Screenshot from 2022-09-14 13-17-16.png1595×764 310 KB

2

@Aliasgar Debut. OKay.

  • You can create duplicates of the section and add the class to duplicate
  • Keep the original for others
3

Thanks for the reply, I’m using debut theme.

4
  • Your screenshots do not look like the standard debut theme. The product grid looks different
  • In a normal debut theme, there is no add-to-cart button on this featured collection slider
  • In theory, you can duplicate the section called - collection.liquid
  • Call the new one collection2.liquid and add the class to button here.
5

Can you tell me in detail how I can do that? Im still new to liquid so I don’t understand the proper file structure yet.

6

Have you sorted this out?

7

No, I did some exploring in the liquid files and found that the button used in these 2 sections are coming from a “add to cart” liquid file. Adding the class to that button does the job, however the class shows up on all the collection pages. I need to create a different template for these 2 templates however I need some guidance with that.