Solved

find css selectors for checkout

jjjjjjjj
Excursionist
18 0 5

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.

 

Accepted Solution (1)
Eric_Seastrand
Shopify Partner
53 3 48

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 🙂

Eric_Seastrand_0-1614640109090.png

Eric_Seastrand_1-1614640146481.png

View solution in original post

Replies 12 (12)

Eric_Seastrand
Shopify Partner
53 3 48

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!

jjjjjjjj
Excursionist
18 0 5

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 from my sitefrom my sitefrom the plugins instruction pagefrom the plugins instruction page

Eric_Seastrand
Shopify Partner
53 3 48

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.

 

Eric_Seastrand_1-1614638627397.png

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

 


Eric_Seastrand_2-1614638874472.png

 

 

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!

jjjjjjjj
Excursionist
18 0 5

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. 

 

Screenshot 2021-03-01 at 22.59.43.png

Eric_Seastrand
Shopify Partner
53 3 48

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 🙂

Eric_Seastrand_0-1614640109090.png

Eric_Seastrand_1-1614640146481.png

jjjjjjjj
Excursionist
18 0 5

I see. Strange as it was just fine before. Have contacted the theme. Hopefully will hear back quickly. 

Thanks again. 

jjjjjjjj
Excursionist
18 0 5

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.

jjjjjjjj
Excursionist
18 0 5

I forgot to attach this screenshot, in case it explains more. 

Screenshot 2021-03-08 at 10.53.35.png

 

Eric_Seastrand
Shopify Partner
53 3 48

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).

Eric_Seastrand_0-1615331094555.png

Hope this helps - best of luck!

jjjjjjjj
Excursionist
18 0 5

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?

 

 

 

Eric_Seastrand
Shopify Partner
53 3 48

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.

jjjjjjjj
Excursionist
18 0 5

Eric, 

Thank you. for even coming back. I managed to sort the problem in the end. I really appreciate all the help from you.