Positioning Shopify Buy Button for Products

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!!

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!!

 

Because you used Embed Block in Second Product.

Change Embed block to Code Block, the code will work

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.

URL: 

https://www.tightsidelatex.com/latex-briefs-and-thongs/p/briefs-with-contrast-panels

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?

On 6/3/2024 at 11:49 PM, tsl said:

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

What should it look like?