Create A Buy Button That Goes to /Cart

Highlighted
New Member
4 0 0

I'm trying to embed a buy button on my Shopify blog that adds the product to my site's normal cart (i.e. rockymountainbarber.ca/cart). The reason for this is we allow customers to choose a free sample through a widget that appears on the cart page whenever an item is added to the cart (shown below). However, when I attempt to create a Buy Button, I am only given the following 3 options:

 

1. Add product to cart

2. Direct to checkout

3. Open product details

 

The problem with option 1 is that it creates a "modal" cart which pops up on the right hand side, meaning that customers can't choose their free sample. The problem with option #2 is it directs them immediately to checkout and again, they bypass the free sample selection widget on my cart page. Is there anyway I can edit the Buy Button code so it functions similar to the add to cart button on my product page? I.e. the customer clicks "add to cart" and it just takes them to the normal cart?

free sample widget cart page.png

0 Likes
Highlighted
Shopify Expert
51 12 7

Hey @mmmmmmmm,

 

I wouldn't recommend using a Buy Button for this specific task. Instead, I would embed the HTML product form directly into the post.

 

Copy and paste this code into a blog post:

 

<form method="post" action="/cart/add" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data">
  <input type="hidden" name="form_type" value="product">
  <input type="hidden" name="utf8" value="✓">
  <input type="hidden" name="id" value="28556737547">
  <input type="hidden" name="quantity" value="1">
  <div class="add-to-cart__wrapper">
    <button type="submit" name="add" id="AddToCart-product" class="btn btn--large btn--full btn--clear uppercase addToCart cartbutton" style="visibility: visible;">
      <span id="AddToCartText-product">Add to Cart</span>
    </button>
  </div>
</form>

This will return an add to cart form/button for your "BEARD BALM VARIETY PACK".

 

To change the product, replace the value inside this field: <input type="hidden" name="id" value="YOUR_PRODUCT_ID_HERE">

 

Let me know if you need more help.

 

0 Likes
New Member
4 0 0

This created the "Add to Cart" button perfectly, but is there anyway to also pull in the current price and main image as well?

0 Likes
Highlighted
Shopify Expert
51 12 7

Not without a custom template solution. Even then, it would be tricky to display different products on other posts.

 

In your post, you could manually add the product photo and edit the text inside the button to include the price.

0 Likes
Highlighted
New Member
4 0 0

The only problem with adding the price as text is when the price changes, I'll have to manually edit it later. Is there anyway to pull in the price dynamically? I can live without the image, but having to manually update the price all the time is not realistic. Thanks so much for your help!

0 Likes
Highlighted
Shopify Expert
51 12 7

I understand, but there isn't a simple way to pull any dynamic data without building this form into a custom template.

0 Likes
Highlighted
Astronaut
1129 150 297

You can get both the image and the price if you use the Shopify ajax api. In the case with the product above, beard balm variety pack, you can use the product's url to access the JSON for the product. So if you make a div with a class you can target, you can get the image and the price and append it to the div after page load. So let's say you put a div with the class of price in that same form:

<form method="post" action="/cart/add" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data">
  <input type="hidden" name="form_type" value="product">
  <input type="hidden" name="utf8" value="✓">
  <input type="hidden" name="id" value="28556737547">
  <input type="hidden" name="quantity" value="1">
  <div class="add-to-cart__wrapper">
    <button type="submit" name="add" id="AddToCart-product" class="btn btn--large btn--full btn--clear uppercase addToCart cartbutton" style="visibility: visible;">
   <div class="product_price"></div> <!-- here is where your price will populate -->
      <span id="AddToCartText-product">Add to Cart</span>
    </button>
  </div>
</form>

Then you can use the ajax api to get the stuff with the product handle in script tags at the bottom of the blog post in the HTML editor:

 

$(function(){
  let data = jQuery.getJSON('/products/beard-balm-sample-pack.js');
  data.done(function(){
	response = data.responseJSON;
    let product_price = Shopify.formatMoney(response.price_max);
    $('.product_price').append(product_price)
  });
});

This would append $34.99 to your div with the class "product_price", or whatever the max price it is in the future.

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes