Positioning Shopify Buy Button for Products

On 9/24/2020 at 8:01 PM, herbspice said:

Can you please help @tuanphan? I want to put our Shopify buy buttons directly beneath the product title of all of our products. Or it can be just below the price; that can work, but

Did you solve?

Yes, I did. Thanks for your help!

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!

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>

Thanks so much, that's great. Is it possible to get the button to show in between the price and the description? 

https://www.hotwireextensions.com/shop/p/frame-light

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>

Amazing! Thanks so much for your help

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

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?

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!

@tuanphan Could you help me with this too? Here are the changes I'm trying to make: Move the product details up to align with the top of the image, move Shopify add to cart button to just below product description, hide cart. Here's the url: https://bluish.ca/baby-and-kids/p/baby-isla Thank you!

On 5/27/2022 at 11:33 AM, sundayyy said:

@tuanphan Could you help me with this too? Here are the changes I'm trying to make: Move the product details up to align with the top of the image, move Shopify add to cart button to just below product description, hide cart. Here's the url: https://bluish.ca/baby-and-kids/p/baby-isla Thank you!

 

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>

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>

 

Thank you @tuanphan! How about the space above the product title? How can I move the product details on the right side to be top aligned with the image on the left? Thanks again!!

On 5/31/2022 at 1:23 AM, sundayyy said:

Thank you @tuanphan! How about the space above the product title? How can I move the product details on the right side to be top aligned with the image on the left? Thanks again!!

#1. Add to Design > Custom CSS

/* padding above product title */
section.product-details.ProductItem-details {
    padding-top: 0px;
}

#2. You mean all element will stacked with

breadcrumb

image

description

Is this right?

On 5/31/2022 at 11:25 PM, tuanphan said:

#1. Add to Design > Custom CSS

/* padding above product title */
section.product-details.ProductItem-details {
    padding-top: 0px;
}

#2. You mean all element will stacked with

breadcrumb

image

description

Is this right?

Yes that's right!

On mobile though, how can I move the price so that it's just below the product name? Please see picture. Same link as before.

Thank you @tuanphan!

On 6/7/2022 at 11:02 PM, sundayyy said:

Yes that's right!

On mobile though, how can I move the price so that it's just below the product name? Please see picture. Same link as before.

Thank you @tuanphan!

The product url doesn't work now. Can you check it again?

https://bluishblog.squarespace.com/baby-and-kids/p/baby-isla

On 6/11/2022 at 3:43 AM, tuanphan said:

The product url doesn't work now. Can you check it again?

https://bluishblog.squarespace.com/baby-and-kids/p/baby-isla

@tuanphan I'm sorry, the page was temporarily disabled. It works now. Looking forward to your help.

Thank you!

On 6/28/2022 at 4:47 AM, sundayyy said:

@tuanphan I'm sorry, the page was temporarily disabled. It works now. Looking forward to your help.

Thank you!

 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-product-price {
    order: 0 !important;
    margin-bottom: 0 !important;
}
}

Hi! For some reason none of these codes are working when I go to inject it into the 'additional info' section. It says the script is disabled - any recommendations on what to do? I would like the button to be moved up directly under the details of the product. Not sure if I am putting the code in the wrong place or if the code just does not work for my website.

See website here: https://www.kuzyk.co/shop/p/denim-lilly-b-dress

On 7/11/2022 at 4:39 PM, oliviac said:

For some reason none of these codes are working when I go to inject it into the 'additional info' section. It says the script is disabled - any recommendations on what to do? I would like the button to be moved up directly under the details of the product.

Personally, I don't recommend any of the code snippets in this thread (as I explained above) because they rely on jQuery and are likely to slow down your website even further than the Shopify code. We have a ready made solution that doesn't have these issues and comes with step-by-step instructions.

That said, to test code first check that your Code Block is set to HTML. Then test it by browsing the website from another browser or a private browser window - without logging on to the site.

On 4/25/2020 at 11:20 PM, tuanphan said:

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  // move shopify to product description
  // checked by tuan phan squarespace forum
$(document).ready(function() {
$('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
});
</script>

 

Hey Tuanphan, 

I've applied your code but I want to move the button to sit below the product title and price. Can you advise please? 

Thanks in advance! 

https://hexahedron-iguana-cd6z.squarespace.com/shop/p/matis-cool-legs

pw: midas2023

On 1/18/2023 at 10:37 PM, DreamrW said:

Hey Tuanphan, 

I've applied your code but I want to move the button to sit below the product title and price. Can you advise please? 

Thanks in advance! 

https://hexahedron-iguana-cd6z.squarespace.com/shop/p/matis-cool-legs

pw: midas2023

 

Use this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  // move shopify to product description
  // checked by tuan phan squarespace forum
$(document).ready(function() {
$('section.ProductItem-additional .code-block').insertAfter('.ProductItem-product-price');
});
</script>

On 1/19/2023 at 11:31 PM, tuanphan said:

Use this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  // move shopify to product description
  // checked by tuan phan squarespace forum
$(document).ready(function() {
$('section.ProductItem-additional .code-block').insertAfter('.ProductItem-product-price');
});
</script>

 

Awesome, thank you! 

Is it possible to remove the Squarespace QTY and BUY buttons? 

On 1/21/2023 at 10:05 PM, DreamrW said:

Awesome, thank you! 

Is it possible to remove the Squarespace QTY and BUY buttons? 

Add this code under

<style>
  .product-quantity-input, .sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>

3 hours ago, tuanphan said:

Add this code under

<style>
  .product-quantity-input, .sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>

 

Thanks for this!