How can Add a secondary buy boton (external link)

Site URL: https://elhiloediciones.squarespace.com/libros/p/peroatulado

Hi, I sell print books but I also sell the digital version of the book in an external plataform.

In a product page, I'd like to add a new boton (Buy Ebook) next to Add to cart boton

Is it possible?

Thanks

Maribel

Hi, 

First, add a Code Block in Additional Info >> paste this line

<a href="https://amazon.com" class="buy-ebook-link">Buy Ebook</a>

When you done this, let me know. We will give the code to make this code to button & move its position to next to compared button

Hi Tuanphan, 

Many thanks for your answer.

It's done now: https://www.elhiloediciones.com/libros/p/porquelescuestaaprenderamishijos

 I wait for your instructions, thanks a lot!

Don't remove above code. Add this 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() { 
		$('a.buy-ebook-link').appendTo('div.sqs-add-to-cart-button-wrapper');
	});
</script>
<style>
  /* Compared ebook button */
a.buy-ebook-link {
    -webkit-transition: .1s opacity linear;
    -moz-transition: .1s opacity linear;
    -o-transition: .1s opacity linear;
    transition: .1s opacity linear;
    -webkit-backface-visibility: hidden;
    color: #fff;
    background-color: #649ca0;
    border-color: #649ca0;
    font-family: Merriweather Sans;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    line-height: normal;
    padding: 1.5em 2.505em;
}
a.buy-ebook-link:hover {
    opacity: 0.8;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
a.buy-ebook-link {
    margin-left: 20px;
    white-space: nowrap;
}
</style>

Thanks a lot, works perfect!!!

On 7/21/2021 at 10:17 PM, Maribeltb said:

Thanks a lot, works perfect!!!

Do you need to fix these?

Site URL: https://www.spanishlanguagecentreuk.com/

1. (Tablet – Homepage) Background image doesn’t show in full size

2. (Mobile – Homepage) The same here

3. (Tablet – Homepage) Make text and plus on the same row

4. (Tablet – Footer) Word break

5. (Mobile – Footer) Want to make “Follow us on” and social icons on the same line

6. (Mobile – Overlay menu) Chat icon overlap on button

7. (Online Course) Browser tab name still show “Store 2”

https://www.spanishlanguagecentreuk.com/online-courses

8. (Mobile – Product) Want to show breadcrumb on the top of product? (As on desktop/tablet)

9. (Tablet – Contact us) Make email not break

https://www.spanishlanguagecentreuk.com/contact