Jump to content

Add custom button on product page

Recommended Posts

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.

SS.jpg

Edited by Sonny_PRC
Link to comment
  • Replies 12
  • Views 815
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
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".

Link to comment
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

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

Link to comment
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

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

 

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

Link to comment
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?

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

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

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.