Jump to content

Is there a link/url for an 'Add to cart' action of a product in Squarespace?

Recommended Posts

Hey peeps!

 

I hope I can explain this the easiest as I'm unable to find this answer anywhere online.

 

Let's say I add a simple text block and type "product 01". And then I wanted to hyperlink that "product 01" that once clicked, it would perform an add to cart action on a specific product I have in my store. Is that possible?

 

So in other words, is there a URL that adds a product of yours to the shopping cart or is that ONLY possible by using the product 'add to cart' button?

 

I deeply appreciate your help!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

On 1/13/2022 at 11:09 PM, romerodan said:

Hey peeps!

 

I hope I can explain this the easiest as I'm unable to find this answer anywhere online.

 

Let's say I add a simple text block and type "product 01". And then I wanted to hyperlink that "product 01" that once clicked, it would perform an add to cart action on a specific product I have in my store. Is that possible?

 

So in other words, is there a URL that adds a product of yours to the shopping cart or is that ONLY possible by using the product 'add to cart' button?

 

I deeply appreciate your help!

You can try adding to the link to this text with href="/cart"

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

SS does not expose an interface for adding products to a cart via a URL.

However it may be possible to use a code block with code similar to the following and then modify it with CSS to look more like a link.

<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button" style="visibility: visible;">

  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode" data-collection-id="[enter collection id here between double quotes]" data-item-id="[enter data item id here between double quotes]" role="button" tabindex="0" data-product-type="1" data-use-custom-label="false" data-original-label="Add To Cart">
  
    <div class="sqs-add-to-cart-button-inner">
    
      Add To Cart
      
      </div>
      
    </div>
    
  </div>

This code requires knowing the collection and product ids.

Original button.

727851740_ScreenShot2022-01-15at3_05_05PM.png.9677a4112ad2c6b577d5fe718c882070.png

After some minimal styling to show that is may be possible to make the button look like a link.

1601400348_ScreenShot2022-01-15at3_07_04PM.png.37ce83bad21396246fe08e97beb4c80f.png

There is a caveat this technique will only work with products that don't have variants.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 10 months later...
On 1/15/2022 at 6:13 PM, creedon said:

SS does not expose an interface for adding products to a cart via a URL.

However it may be possible to use a code block with code similar to the following and then modify it with CSS to look more like a link.

<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button" style="visibility: visible;">

  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode" data-collection-id="[enter collection id here between double quotes]" data-item-id="[enter data item id here between double quotes]" role="button" tabindex="0" data-product-type="1" data-use-custom-label="false" data-original-label="Add To Cart">
  
    <div class="sqs-add-to-cart-button-inner">
    
      Add To Cart
      
      </div>
      
    </div>
    
  </div>

This code requires knowing the collection and product ids.

Original button.

727851740_ScreenShot2022-01-15at3_05_05PM.png.9677a4112ad2c6b577d5fe718c882070.png

After some minimal styling to show that is may be possible to make the button look like a link.

1601400348_ScreenShot2022-01-15at3_07_04PM.png.37ce83bad21396246fe08e97beb4c80f.png

There is a caveat this technique will only work with products that don't have variants.

What code / injection is needed to have this become a waitlist form when out of stock?

Link to comment
2 hours ago, adamfriedman21 said:

What code / injection is needed to have this become a waitlist form when out of stock?

I know of no way to use that code to do what you want.

However you don't need code to have a waitlist. SS has a built-in feature for what you want to do.

120152676_ScreenShot2022-11-22at12_32_26PM.png.055bc0b5789d08ee601d839a1f0ee53e.png

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
25 minutes ago, creedon said:

I know of no way to use that code to do what you want.

However you don't need code to have a waitlist. SS has a built-in feature for what you want to do.

120152676_ScreenShot2022-11-22at12_32_26PM.png.055bc0b5789d08ee601d839a1f0ee53e.png

Yes, it is set, however when I added the custom add to cart button (via code block per your instruction), the waitlist doesn't appear.

waitlist enabled product : https://www.shufflehouse.co/shop/p/4-week-program

custom product page (in progress) with add to cart button added via code block (ID and collection linked to above waitlist enabled product per your instruction) : https://www.shufflehouse.co/1-on-1

As you can see, the waitlist doesn't appear when adding the add to cart via code block. Any ideas? 

Edited by adamfriedman21
Link to comment
31 minutes ago, adamfriedman21 said:

As you can see, the waitlist doesn't appear when adding the add to cart via code block. Any ideas?

It appears that the waitlist option only appears in the product detail page.

I just tried a product block and those don't show a waitlist option.

I have no other options off the top of my head.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 1/15/2022 at 6:13 PM, creedon said:

SS does not expose an interface for adding products to a cart via a URL.

However it may be possible to use a code block with code similar to the following and then modify it with CSS to look more like a link.

<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button" style="visibility: visible;">

  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode" data-collection-id="[enter collection id here between double quotes]" data-item-id="[enter data item id here between double quotes]" role="button" tabindex="0" data-product-type="1" data-use-custom-label="false" data-original-label="Add To Cart">
  
    <div class="sqs-add-to-cart-button-inner">
    
      Add To Cart
      
      </div>
      
    </div>
    
  </div>

This code requires knowing the collection and product ids.

Original button.

727851740_ScreenShot2022-01-15at3_05_05PM.png.9677a4112ad2c6b577d5fe718c882070.png

After some minimal styling to show that is may be possible to make the button look like a link.

1601400348_ScreenShot2022-01-15at3_07_04PM.png.37ce83bad21396246fe08e97beb4c80f.png

There is a caveat this technique will only work with products that don't have variants.

Hey, this doesn't work with Express Checkout. It still shows the automatic "Purchase" button. I have changed my "Custom Button Label" as well, still doesn't work. Any ideas?

 

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.