How to Find a Class or ID for our Matching Element Rules

In the near future we will be adding a feature in our matching element rules that will make it easier to find the class or ID on your website that you wish to target, in the meantime here is a walk through on how you can find an element to target! 

 

Example 1: Let say you would like to target your cart total to add a rule that allows you to show a pop up after your cart has hit 500$, here is how you can accomplish that! 

  1. Head to your cart page, if you don't already have an item in the cart please add something! 
  2. Right click on the cart total and hit inspect. If you are not using chrome check out these articles on how to inspect the element for safari, firefox and IE. 
  3. For this example, I like to target the class or ID above the class "money" because there might be some pages that have class = money as well, so targeting basket-right and desktop-3 tablet-6 mobile-3 and money ensures that JUST this class is being targeted on this page. 
  4. When targeting an ID you must use a # before that element and for class use a ".". And when elements are on the same line, you do NOT use a space in between the elements. You only put a space in between elements that are on different lines. So for the above example the matching element rule would look like: #basket-right.desktop-3.tablet-6.mobile-3 .money. 
  5. If you want to trigger a pop up when the basket is above $500 here is how to do that and how the rule would look: #basket-right.desktop-3.tablet-6.mobile-3 .money:sMore(500)

Example 2: Say you already have a menu bar that has a link to free shipping information but instead of directing a customer to another page you want to trigger an information pop up, here is how you can target that! 

  1. Head to the page with the image or button on your site
  2. Right click and hit inspect (use the links above for browsers besides chrome). 
  3. For this example I want to target the free shipping text. When targeting an ID you must use a # before that element and for class use a ".". And when elements are on the same line, you do NOT use a space in between the elements. You only put a space in between elements that are on different lines. To target a paragraph or text inside an element you can use > p. 
  4. Here is how to matching element would appear and how to rule would look: #hello >p 

Example 3: Lets say you want to target your logo on the site to trigger a pop up, here are the steps to do that! 

  1. Head to the page with the image on your site
  2. Right click and hit inspect (use the links above for browsers besides chrome). 
  3. For this example I want to target the free shipping text. When targeting an ID you must use a # before that element and for class use a ".". And when elements are on the same line, you do NOT use a space in between the elements. You only put a space in between elements that are on different lines.
  4. For this example I would only need to target the ID logo like this: #logo. Here is how the rule would look: 
Have more questions? Submit a request

3 Comments

  • 0
    Avatar
    Jeff Delacruz

    We're on squarespace and tried this but it didn't work.  We used classes as opposed to id's because squarespace id's are dynamic. We did manage to do a work around using #anchor tags to do a url activation but we had to do a second redirect on closing X to bring them back to the homepage so that the button could be clicked again.  This causes a refresh on the page, which is sort of annoying.

    Anyone have any luck using squarespace button classes to cause a popup?

    Edited by Jeff Delacruz
  • 0
    Avatar
    Jenna Fortunato

    Hey Jeff!

    I'd be more than happy to look into this for you! 

    What is the website you are working with the the element you are looking to target as well as the promotion you are working on! 

    Feel free to reach out to support@justuno.com with any inquiries as well!

  • 0
    Avatar
    Jeff Delacruz

    Hi Jenna,

    I got it to work!  The issue was that sqaurespace issues dynamicly changing classes & Id's.  When i was able to add an element with a static id it worked perfect!

    You guys are awesome!

    Jeff

Please sign in to leave a comment.