Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
Solved! Go to the solution
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 🙂
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.
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 🙂
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 forgot to attach this screenshot, in case it explains more.
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.
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024