pavilion

Hey @tuanphan is this outside of your wheelhouse of expertise?

No I still need help. I'm trying to install the donation button in the Navigation just like the OP was trying to do.

Hi - this is the website: http://www.thestereotypeproject.org To: Install a mobile optimized donation popup form <script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script><a class="dbox-donation-button" style="background: #f9b41f url(https://donorbox.org/images/red_logo.png) no-repeat 37px;color: #fff;text-decoration: none;font-family: Verdana,sans-serif;display: inline-block;font-size: 16px;padding: 15px 38px;padding-left: 75px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 0 0 #1f5a89;text-shadow: 0 1px rgba(0, 0, 0, 0.3);" href="https://donorbox.org/the-stereotype-project">Donate</a> To use my own link or button: Add a link with a href="https://donorbox.org/the-stereotype-project" and one of the class names should be custom-dbox-popup. Example: <a class="custom-dbox-popup" href="https://donorbox.org/the-stereotype-project">Donate Now</a> You can also have a button image inside the link tag. Example: <a class="custom-dbox-popup" href="https://donorbox.org/the-stereotype-project"> <img src="https://donorbox.org/images/png-donate/button-medium-blue.png" /> </a> Add the below two lines of code anywhere in the page, preferably above the closing </head> tag. <script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script> <script>window.DonorBox = { widgetLinkClassName: 'custom-dbox-popup' }</script> Thanks!

Was anybody able to solve this?

Awesome! Yes this works great now! I've also added the code you shared to remove the spaces below where the add to cart button was but the space still remains. .sqs-add-to-cart-button-wrapper { display: none !important } .ProductItem-details .ProductItem-details-excerpt { margin-bottom : 0; }

Thank you so much! We're really close! You'll see that the black covers the additional info as a box - but not the entire width of the screen? It also doesn't get the related items ether 😕 https://pavilion.squarespace.com/content/p/decoded-caribbean Also is there any way to decrease the extra space between the bottom of the product info and the additional info section?

Sounds good! Will do. Thank you so much again!

I fully understand and I think that would be perfect solution! Thank you! If we can. make the additional info and the footer area black I think what I can do is edit the Images so that they are a specific height to make sure most of the image displays in the top half of the page background, but then make the rest of the image black so that the entire image doesn't get stretched all the way down past the black areas of the additional info and the footer, but instead the majority of it remains in the main mail product detail section. Does that make sense?

Thank you so much! Its working now but its actually making the background of the entire page the image (which incidentally looks great) but I'm actually just trying to have the background of that first immediate section section that has the product images, quantity and buy button in it be the first image. Also i'm hoping that that is the first section after the site header so that the image bleeds up into the site header when the header is set to transparent. Example of the look i'm going for is here: https://pavilion.squarespace.com/inward-hunger Thank you!

Hey Creedon! Thank you so much for this! Unfortunately no dice 😕 implemented it here: https://pavilion.squarespace.com/get-started/p/pod8w6he3gjsmop7h4w6vo3j8vyy4s Took a look at the page source but couldn't tell what wasn't working. Any sense of what is wrong?

Thank so much! My website is here: https://pavilion.squarespace.com password: supersecretpasswordpavilion The page that i'm trying to get the image to format is here: https://pavilion.squarespace.com/get-started/p/pod8w6he3gjsmop7h4w6vo3j8vyy4s The page that I would like to get it look like is this: https://pavilion.squarespace.com/inward-hunger Thank you again for your help!

Creedon this is super super helpful I've been trying to figure this out for some weeks. Is it possible to do this dynamically on a product page? I'm trying to use my first and only product image as the background for the section on the product page. if i'm not mistake it seems like your code will only allow me to change the background image for every product to the same image. Is it possible to use the actual product image as the background image?