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.
Solved! Go to the solution
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!
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
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:
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.
This is an accepted solution.
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
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?
Hope this helps - best of luck!