Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Positioning Shopify Buy Button for Products


Riccardi

Question

Hello,

I'm currently building out an e-commerce website for our fashion boutique and we're finalizing some technicalities. We currently use Shopify as our inventory database (because Stripe sucks) and we display our product via Squarespace. I've linked each product with an individual Shopify buy button, adding the code to the product's "Additional Information" section. Everything is smooth and the checkout process has no problems, but the biggest problem is the spacing between the description of the product & the positioning of the buy button. You can clearly see it in the screenshots. 

Is there a way I can pad the code to move it up or add the code in a way to have the Shopify buy button directly under the product description?
Adding spacers and other blocks do not help.

Thank you!

buybutton.JPG

buybutton1.JPG

Link to post
  • Answers 34
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

If you'd prefer a professional solution instead of unreliable, unsupported code snippets, you can buy an extension from us. It comes with detailed guidance and full support. If you need fur

I soved for her. Use this code <!-- Add this code above shopify code --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script

Did you solve?

Posted Images

Recommended Posts

  • 0
19 hours ago, HWE said:

Hi, I am also having issues with this... I would like the buy button to appear underneath the price on my product pages, https://www.hotwireextensions.com/shop/p/natural-random-light

Also, does this code go on each individual product page or on the Design > Custom CSS section?

Any help much appreciated!

Edit Code Block (Where you insert Shopify Code) > Add this code to top of Code Block

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
	});
</script>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0

Remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('section.ProductItem-additional .code-block').insertAfter('.ProductItem-product-price');
	});
</script>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0

hello @tuanphanI'm wondering if you can help me too?

I inserted your code above my shopify button however, it seems it's not aligned to my content. Is there something I need to amend to make it align? Preferably next to the quantity button on the right hand side?

 

here's my test product

image.thumb.png.dd74f53d6dab413d00af3aa8cfdf300f.png

Link to post
  • 0
On 10/22/2020 at 10:48 AM, kwalk said:

hello @tuanphanI'm wondering if you can help me too?

I inserted your code above my shopify button however, it seems it's not aligned to my content. Is there something I need to amend to make it align? Preferably next to the quantity button on the right hand side?

 

here's my test product

Can you share link to test product?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0

i am using the shopify buy button on a new squarespace site. I did not realize i could use the square space product with the shopify buy button. Looks like is would be a good solution. Any breadcrumbs for how to make this happen would be MUCH appreciated. Thanks!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...