Finding the CSS Query Selector for an element on your store page

You can use your web browser's developer tools for finding an element within your checkout cart's <form> element, then inspect your theme's checkout for an appropriate identifying query selector. Here are some sample steps using Chrome for finding a query selector for a specific element.

  1. Open Chrome Dev tools (cmd/ctrl + alt + j):
  2. Right click on the area where you want to insert Supertime. 
  3. Select Inspect on the context menu. This will open the inspector on to the element you want to get the selector from in order in the dev tools panel:
  4. Right click on the dev tools element to open the context menu. 
  5. Select Copy -> Copy selector on the menu (note: this is Copy selector path on Safari). In the above case, you likely want to get the query selector for the <div> element:

  6. You can now paste this selector (it should look something like: #shopify-section-cart-template > div > div:nth-child(1) > form > div.cart__footer > div > div > div.cart__buttons-container) 
  7. To create a CSS Query Selector that uses a list of multiple selectors, you repeat steps 1-6 and create a list of multiple selectors separated by a comma.