Jump to content

"Add to cart" button underneath "Quick View"

Recommended Posts

Hello!

I am wanting to add an "Add to Cart" button underneath the quick view button when you hover over a product. Like this:
e6f1477ebe8ba505b06b3e4bf7d75f58.jpg

 

I found some other posts on the forum looking for the same, but it looks like the OP didn't reply with the site password. If anyone could help me add this that would be amazing! 


Thank you for your time 🙂

 

Link to comment
  • Replies 6
  • Views 477
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

What is the site URL?

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@HannahReyenne No problem.

Can you help me to understand your requirements a little more? I'm not sure if you're aware but Quick View buttons only appear on hover on desktops/laptops. They aren't available on mobiles or tablets, which can mean than over half your site visitors don't see them (you'd need to check your analytics to know the percentage of your own visitors on mobile).

Are you wanting the cart button to appear in the same way (on hover, on desktop only) or are you looking for something that is always visible, like the example below, or with the button below the price.

If you have a mockup of what you want to see, this would be helpful (I was initially confused by the screenshot in your original post because it looked nothing like your site 😀).

image.gif.61fd7afe552f20141b6ef5f06dfe925b.gif

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@paul2009

Oh, yes! Here is the website from my screenshot:

https://www.pollysnaturalparrotboutique.com/

I was looking for the "Add to cart" button to appear only on hover (on desktop) like the linked site has.

For mobile I was going to place an add to cart button that always shows, like in your capture. That part I did figure out 🙂

Adding a second button that behaves the same as the "quick view" one, but adds the item to your cart has stumped me though, lol. 

Thank you!!

 

Link to comment

I provided a solution to add the "Add to Cart" button below each item on the Product List Page (PLP) in my 2022 post below.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.