Amazon product integration on my product page shows book image way too big

Hi,

In addition to physical books of mine that I have for sale on my website, I would like to display an Amazon Kindle novelette I wrote, which I've only made available as an Amazon ebook. Ideally, it would be an image the same size as my other books, but when the customer clicks, it takes her directly to the Amazon page. My only options are a physical copy that goes into the cart or a digital copy which requires me to make a digital file available. I used the Amazon integration tool but it does not integrate visually onto my product page and instead shows up in the footer as an enormous image of the jacket, which I cannot resize. Looking for help. Thanks.

Edited to include address for page in question: https://www.ashleyshelby.com/books

18 hours ago, Ashley77 said:

In addition to physical books of mine that I have for sale on my website, I would like to display an Amazon Kindle novelette I wrote, which I've only made available as an Amazon ebook.

The first step will be to add this eBook as a 'product' on your store page. By adding it as a product - with the title, image and the price - it will appear on the product list page, alongside the other physical products.

When users click on this product, they'll be sent to the product detail page (PDP). Once you've added this product, we can suggest some code to customise the page by removing the Add to Cart button and replacing it with a 'Buy eBook on Amazon' link.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you so much for taking the time to answer. I did create a physical product page for the ebook but am not sure how to integrate a Buy eBook on Amazon link. I'm afraid I know nothing about coding. Editing to add the link to the book on Amazon: https://www.amazon.com/dp/B0C1V8JCRB and the link to the book's product page: https://www.ashleyshelby.com/books/the-archivist-of-third-chance

2 hours ago, Ashley77 said:

I did create a physical product page for the ebook

Great!

Next step, can you edit the product description by adding a couple of blank lines and then adding the text "Buy eBook from Amazon" (or your preferred caption)?

Please hyperlink this text (see below) so that it links to your purchase link on Amazon (I don't know the URL).

Thank you for making this so easy and for being to generous with your time and expertise. I've done what you suggested and it does link directly to my page on Amazon. Thank you! Is there any way to make the hyperlink into a button?

Also I notice I still have the Add to Cart button. I am unable to figure out how to delete that, so right now someone could actually add this "book" to their cart. Are there other steps I should be taking having completed this one? Thank you!

https://www.ashleyshelby.com/books/the-archivist-of-third-chance

Thank you so much! This worked brilliantly. Thank you so very much!

12 minutes ago, Ashley77 said:

Thank you so very much!

You're so welcome 😀

Hey @paul2009, I'm commenting on the off-chance you see this before I've found someone local to help me. I'm trying to implement the above code on a client's website for an eBook product... it isn't working for me, however, they're using Squarespace 7.0 so I'm wondering if that is a factor?

5 hours ago, cherrypiejay said:

it isn't working for me, however, they're using Squarespace 7.0

Yes, this was provided for version 7.1. You’ll need to adjust it for a version 7.0 template as every 7.0 template is different. Please follow the guide above (without adding the CSS) and then provide a link to the page so we can take a look. 

Hey @paul2009! We are looking for this exact solution but are on version 7.0.  Do you have any ideas how to apply this solution to our version?  I have followed the above steps minus the CSS 

19 hours ago, Jenell said:

We are looking for this exact solution but are on version 7.0.  Do you have any ideas how to apply this solution to our version?

As you have the Product Waitlist feature enabled, you may want to try this instead:

.ProductItem[data-item-id="64de28e1c47649745ed0bd3c"] p a[href^="https://www.amazon.com/dp"] {
  border-width: 2px;
  border-style: solid;
  font-family: proxima-nova;
  font-weight: 600;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .2em;
  padding: 17px 34px;
  text-transform: uppercase;
}

.ProductItem[data-item-id="64de28e1c47649745ed0bd3c"] .product-mark.sold-out {
  display:none;
}

.product-restock-notification[data-product-id="64de28e1c47649745ed0bd3c"] {
  display:none!important;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you so much - that worked perfectly, I so appreciate your help and expertise!!

Hi there @paul2009! I'm hoping you can help me with this as well 🙂 I'm trying to add the code but am having trouble. I'd like to get the products on this site to link to an email address (info@blackbookstyle.com), so clients can book an appointment directly. The site is below - any help would be greatly appreciated! 

https://blackbookstyle.com/dress-rentals/p/lilia-stogova-silver-cape-gown-fits-size-us-8-10-

1 hour ago, garlandehaney said:

I'd like to get the products on this site to link to an email address

@garlandehaney Please see this thread as the principle is the same:

Will this change the style of the cart button for all of the items in the store? 

We have some of our items are available to order direct from us and others available on Amazon. 

I can't seem to be able to do this for an individual product. I don't see an option to add the code. CSS is not something I am fluent in.

main store page: https://storymonsters.com/store

book available on Amazon: https://storymonsters.com/store/desertfriends-secondedition

Thanks

Hi @paul2009 I hope you can help! I have tried to do the above as I need a link to go out to a separate website rather than add to cart for my products too. I think the problem with copying and pasting the exacy code is that I need my individual product ID number and i have no idea how to find this?

Hope you are able to help, the site isn't currently live as I am working on it behind the scenes with a new theme.

Cheers!

Em

: )

3 hours ago, emilyforgot said:

Hope you are able to help, the site isn't currently live as I am working on it behind the scenes with a new theme.

Hi @emilyforgot

To provide specific advice, I'll need to be able to view the webpage.

I am not sure what you mean when you say "working on it behind the scenes with a new theme.". Does this mean you are previewing a new template in Squarespace 7.0? If yes, you won't be able to provide an accurate link. However, if you're just building a new site then you should be able to provide a link to the page. My guide, How to Post a Forum Question should help to explain 🙂.

Alternatively, if you find it difficult to obtain the product number, another alternative would be to add a Code Block to the Additional Information section of the product and paste a version of the code there.

Paul

@paul2009 Thanks for this solution - I want to use it for a product I'm going to sell on Amazon but, how do I find the data item ID of the product item on my shop page?

This bit below:

.ProductItem[data-item-id="64de28e1c47649745ed0bd3c"]

Never mind - figured it out with Chrome Inspect.

Hi @paul2009 - I have a SquareSpace store selling printed magazines, and I wish to add a new digital edition for which I need to link to Issuu.com. I have created a Product (here: https://www.ultra-magazine.com/shop/issue-19-digital-edition) but like others above I have not been able to remove the Purchase button. I am running SquareSpace v7.0.

I have tried adding your CSS code to the Custom CSS dialog, changing the data-item-id to "6683cdca687af43a7a5aca64" which is I believe correct. But the Purchase button still appears. Can you help, please?

@Thumbcandy You can use this CSS code

body#item-6683cdca687af43a7a5aca64 div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

I need to do this on a site I am developing now, and the client wants to direct clients to purchase a site on an external site, not amazon. I just want some of their products to redirect, not all. Please help.

9 minutes ago, yknott said:

the client wants to direct clients to purchase a site on an external site, not amazon. I just want some of their products to redirect, not all.

There are a couple of ways you can go about this.

One is a technique, I think, @paul2009 covers earlier in this thread. That technique is to hide the normal add to cart button with CSS. Then add a link to the products description to link to the external selling site. It also may be possible to style that button with some CSS to make it look more like a button. I think I have seen several posts covering that technique. I don't have any links.

The other method is to use JavaScript code to alter the built-in atc button to do the redirect. Please see the following.

Let us know how it goes.

hello @paul2009 - this entire thread has been super helpful. thank you. wondering if possible to just remove the button and quantity boxes entirely from product page for a specific product? or exactly where to be directed for css code (mentioned above) for one specific product in store that is to be purchased through Amazon? https://stone.coach/workbook/p/handbook-for-coaching-business-executives-in-their-quest-for-truth