Jump to content

Positioning Shopify Buy Button for Products

Recommended Posts

On 5/29/2022 at 3:07 AM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

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

 

Hi @tuanphan, the code you provided above worked great for the store page I was using then. When I added another store in a different style, the code above didn't reposition the "Add to Cart" button (which is a buy button from Shopify) to where I'd like it (see attached image).

Do I need to inject new code to reposition the Add to Cart button for a different store style? Currently the Add to Cart button is positioned here: https://bluishblog.squarespace.com/tiny-keeper/p/tiny-beatrice. I'd like to move it so that it looks like this: https://bluish.ca/baby-and-kids/p/baby-everly-moss.

Thank you so much!!

 

Screen Shot 2023-06-16 at 8.04.27 PM.png

Link to comment
On 6/17/2023 at 7:11 AM, sundayyy said:

Hi @tuanphan, the code you provided above worked great for the store page I was using then. When I added another store in a different style, the code above didn't reposition the "Add to Cart" button (which is a buy button from Shopify) to where I'd like it (see attached image).

Do I need to inject new code to reposition the Add to Cart button for a different store style? Currently the Add to Cart button is positioned here: https://bluishblog.squarespace.com/tiny-keeper/p/tiny-beatrice. I'd like to move it so that it looks like this: https://bluish.ca/baby-and-kids/p/baby-everly-moss.

Thank you so much!!

 

Screen Shot 2023-06-16 at 8.04.27 PM.png

Because you used Embed Block in Second Product.

Change Embed block to Code Block, the code will work

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...

Hello, 

I used your code and it worked great, thank you.

I am now trying to change the padding so that this block will sit in the centre on desktop and mobile. 

please see screenshots and url link.

 

I have already 'centred' the format on shopify when customising the button.

 

Screenshot 2024-06-03 at 11.35.12.png

Screenshot 2024-06-03 at 11.36.57.png

Screenshot 2024-06-03 at 11.38.05.png

Link to comment
On 10/13/2020 at 3:20 PM, tuanphan said:

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>

 

hey this doesn't work for mobile! Is it possible you can amend it please?

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.