Hi all,
I am new to Shopify and desperately need help to find CSS Selectors for my Checkout page and Add To Cart page. I just need to identify them. I have tried Chrome Developer Tools but not been able to figure this out.
Any chance someone can help me with this? I am using Showcase theme and my site is https://jgcontemporary.art
Many thanks in advance.
What are you trying to achieve by having these selectors?
When you say âAdd to Cart pageâ do you mean the product detail page? https://jgcontemporary.art/collections/original-art/products/copy-of-casino-pam-glew
Typically a CSS Selector refers to a specific element on a page - not the entire page itself - hence the question about what youâre trying to achieve.
Great looking store btw!
Hi Eric,
Thanks so much for your reply. And for the compliment on the site! Itâs my first time working on a shopify site so really appreciate it.
So, I am adding a plugin for a financial service I offer to my customers which allows them to buy the works now and pay for it over 10 months.
The plugin is not from the Shopify App store and I have to implement it manually. The plugin is now installed but I canât activate it on the site until I fill in these selectors.
I have included screenshots below. I hope theyâd explain better.
Really appreciate you trying to help.
required. I have
The context is super helpful - and makes sense what youâre after. Iâm making some assumptions here, but I think I understand what the app is looking for.
Probably the âAdd to cart CSS Selectorâ refers to the âadd to cartâ button on your product detail page. That selector is probably
form[action="/cart/add"] button[type="submit"]
That is - the submit button within the form which sends users to the /cart/add URL in your Shopify store. Ie, the add-to-cart button.
For âCheckout Page CSS Selectorâ they probably mean âselector for the button that takes you to the checkoutâ. Looks like your theme has two of those: one that pops up in the top right after you add the product to the cart, and a second one on the actual /cart page. So your selector that targets either of those buttons would look like:
a[href="/checkout"], .checkout-btn
I did notice that your cart page requires the user to check the box âI AGREE TO THE TERMS AND REFUND POLICYâ. But Iâd bet this app is going to let users bypass that step (as does the âCheckoutâ button in the popup cart). The app/them developer might know how to work around that.
Best of luck!
Amazing. Thank you so much Eric. I will try those tomorrow (as itâs quite late over here) and see how I get on with your suggestions. I Will let you know once I try.
May I ask you something else? I just noticed that suddenly my menu is much bigger in height than it was before. No idea what happened in the last hour or so as I havenât touched anything, but suddenly itâs not looking right. How can i fix this quickly? I tested the sit eboth in safari and chrome and have cleaned.
Thank you again.
Looks like the extra black space stems from having extra padding on your logo element (see screenshots below). If you remove that padding, the menu snaps back to regular size - though that could have unintended repercussions (Iâm not familiar with this theme).
Luckily, your theme developer should be able to help with issues like these. Thatâs the sort of white-glove service you [should] get with a paid theme 
I see. Strange as it was just fine before. Have contacted the theme. Hopefully will hear back quickly.
Thanks again.
Hi Eric,
Hope you are well.
So the previous selectors didnât work. this was the reply from the guy whoâs helping me with this service (heâs not a developer so canât help me to locate these selectors himself):
âthe CSS selectors are for cart and product pages, and you need two for each, and place them in those boxes. Price and Location (Page). The checkout box will do nothing on the checkout, and can be ignored.â
Would you kindly be able to have a look one more time into this?
Thank you in advance.
Iâm still a bit hazy as to what these selectors refer to ⌠but the one in there (.product-single__meta) isnât anywhere on your page, so that probably isnât it.
Maybe give this one a try?
.product-area__details
Also, I know they told you that the checkout one isnât important, but it seems to be causing a javascript error because itâs missing. You might want to try just putting some random characters in there to see if itâll make this JS error go away. I am pretty sure the thing causing this error will prevent it from working at all (even if your other selectors are correct).
Hope this helps - best of luck!
Thanks Eric. They managed to install it for me at the end. Except, I now noticed that while the plugin is showing fine and working fine on desktop as well as iPad, it doesnât show up on phones. I checked on phones as well as android. Would this be caused by the JS error ou mention?
Unfortunately I donât have an Android device to test with, but it seems unlikely theyâd be related. Worth noting: That error is no longer appearing on desktop.
Eric,
Thank you. for even coming back. I managed to sort the problem in the end. I really appreciate all the help from you.
