Add custom button on product page

Site URL: https://bird-bobcat-b7c3.squarespace.com/butik/p/kopper

Is it possible to add a custom button to a product page like shown on the screen shot?

PW: PRC

Because it is a product page, I can't add a block or add specific custom code for the page.

It's a request from the client so I hope it somehow is possible. The button is suppose to be a scroll down button.

Hi,

This is possible, however

You mean Green circle button on right of Title/price?

This is same for all products or each product = different button?

Click button >> redirect to a new page, open a form or?

On 10/15/2022 at 10:06 AM, tuanphan said:

Hi,

This is possible, however

You mean Green circle button on right of Title/price?

This is same for all products or each product = different button?

Click button >> redirect to a new page, open a form or?

 

Hi

Yes it's the green circle button.

It should be different buttons, but it is most important on this product. 

The button should scroll down to a specific point on the page. It should scroll down to the heading starting with "Single wall".

On 10/26/2022 at 2:01 PM, Sonny_PRC said:

Hi

Yes it's the green circle button.

It should be different buttons, but it is most important on this product. 

The button should scroll down to a specific point on the page. It should scroll down to the heading starting with "Single wall".

Scroll down to same section on all products or different section?

To add Green Button, you can add a Button Block in Product Additional Info, then we will give code to turn it to circle + move its position

On 10/27/2022 at 3:50 PM, tuanphan said:

Scroll down to same section on all products or different section?

To add Green Button, you can add a Button Block in Product Additional Info, then we will give code to turn it to circle + move its position

Scroll down to same section I think.

I've added a button now.

On 11/3/2022 at 9:05 PM, Sonny_PRC said:

Scroll down to same section I think.

I've added a button now.

Hi,

Currently I see 4 buttons. Which button are you referring to?

https://bird-bobcat-b7c3.squarespace.com/butik/p/kopper

On 11/6/2022 at 11:26 AM, tuanphan said:

Hi,

Currently I see 4 buttons. Which button are you referring to?

https://bird-bobcat-b7c3.squarespace.com/butik/p/kopper

The bottom one with the same text as in the first image "Hvad er single og double wall, og hvilke typer kvalitet findes?"

On 11/8/2022 at 2:37 PM, Sonny_PRC said:

The bottom one with the same text as in the first image "Hvad er single og double wall, og hvilke typer kvalitet findes?"

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
  .button-block a {
    width: 150px;
    border-radius: 50% !important;
    height: 150px;
    line-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<script>
  $(document).ready(function(){
    $('.ProductItem .ProductItem-additional .button-block').appendTo('h1.ProductItem-details-title');
});
</script>

On 11/10/2022 at 1:08 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
  .button-block a {
    width: 150px;
    border-radius: 50% !important;
    height: 150px;
    line-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<script>
  $(document).ready(function(){
    $('.ProductItem .ProductItem-additional .button-block').appendTo('h1.ProductItem-details-title');
});
</script>

 

Thank you. But it doesn't work. I also got two other buttons on the page. These are also affected by this script. It's the buttons "Print dine valg" and "Få inspiration her". 
It should only affect the new button.

On 11/16/2022 at 4:29 PM, Sonny_PRC said:

Thank you. But it doesn't work. I also got two other buttons on the page. These are also affected by this script. It's the buttons "Print dine valg" and "Få inspiration her". 
It should only affect the new button.

The code doén't run, or the code run for all buttons?

32 minutes ago, tuanphan said:

The code doén't run, or the code run for all buttons?

It run for all buttons. 

We are about to launch, so I have disabled the script for now.

On 11/21/2022 at 7:32 PM, Sonny_PRC said:

It run for all buttons. 

We are about to launch, so I have disabled the script for now.

Okay. If you need help, just duplicate the site & share link to a product, we will check it again

8 minutes ago, tuanphan said:

Okay. If you need help, just duplicate the site & share link to a product, we will check it again

Ok. https://bird-bobcat-b7c3.squarespace.com/butik/p/kopper-test-test PRC is the password. The page is a little different, but that doesn't matter, the button is there and that is the main thing.