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.
- Open Chrome Dev tools (
cmd/ctrl + alt + j):
- Right click on the area where you want to insert Supertime.
- 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:
- Right click on the dev tools element to open the context menu.
- 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:
- 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)
- 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.
