The Book Sales page that all writers should have on their blogs and website

Many published writers don't have the technical skills to build or maintain a book's sales page on their author's website or blog. They use lots of links to different publications, books, and audiobooks. That's often messy. I designed a simple, single-page that lists all books with links to their Goodreads reviews, Amazon (or other) sales point, and audibook sales point, that doesn't require HTML skills or coding. Claude Chrome Extension can build directly into the blog/page or writers can copy/paste the HTML by simply clicking on Edit Page.

Prompt / skill content

I want you to build a styled HTML page that showcases my books, with links

to where readers can find them online. Here are the exact specifications:

PAGE TITLE: [Your title, e.g. “My Books”]

SUBTITLE: [Your subtitle, one short sentence - or leave blank if you don’t want one]

DESIGN:

Compact horizontal row layout, so all my books are visible at a glance

Small cover image (about 38x54px) on the left of each row

Book title and author in the middle (flex-grow column)

A fixed-width “actions” area on the right of each row, containing:

A text button labelled “Goodreads” in a brown accent colour

A shopping cart icon slot

A headphones icon slot

The icon slots reserve horizontal space even when no icon is shown

(use an empty placeholder of the same width), so that the Goodreads

buttons align vertically across all rows

The cart icon should be omitted (replaced by empty placeholder) for

books with no buy URL

The headphones icon should be omitted (replaced by empty placeholder)

for books with no audiobook URL

Warm paper, cream and brown colour palette

Serif font for titles (Playfair Display from Google Fonts)

Sans-serif font for body text (DM Sans from Google Fonts)

All CSS embedded in a <style> block, no external frameworks

Mobile-responsive: icons remain visible at all screen sizes

ICONS:

Use inline SVG icons, not Unicode emoji or external icon fonts

About 18-20px each, in a gold tone (#b8883a)

On hover, darken slightly to the brown accent

Each icon must have a title attribute for accessibility

(e.g. title=”Buy on Amazon”, title=”Listen on Audible”)

URL SEARCH REQUIREMENTS:

GOODREADS URL: Search the web to find the verified Goodreads URL for

each book (do not invent it). If you cannot find it, leave the

Goodreads button off that row and tell me.

PUBLISHED TITLE AND AUTHOR: For each book where you found a Goodreads

page, use the EXACT published title and author name shown on Goodreads,

NOT the title or name I typed below. My typed versions are just search

hints - replace them with the published versions, including

capitalisation, punctuation, subtitles, and accents. If Goodreads is

not available for a book, fall back to my typed title and author.

BUY URL: I provide the direct product URL for each book in the list

below. Use exactly the URL I give you - do not search for an

alternative, do not modify it, do not link to a search page.

If a book has a buy URL: include the shopping cart icon linking

to that URL.

If a book is marked “Buy URL: none”: OMIT the cart icon entirely

for that row. Do not show a non-functional icon.

AUDIOBOOK URL: I provide the direct audiobook URL for each book in

the list below. Use exactly the URL I give you.

If a book has an audiobook URL: include the headphones icon

linking to that URL.

If a book is marked “Audiobook URL: none”: OMIT the headphones

icon entirely for that row. Do not show a non-functional icon.

Before generating the file, confirm to me which books will show

which icons, and show me the published title and author name you

will use for each row, so I can verify.

COVER IMAGES:

For each book, find a real cover image in this priority order:

First try covers.openlibrary.org (search by ISBN or book title).

If the book is not on Open Library or the image is a placeholder,

use the cover image from the verified Goodreads page. The Goodreads

cover URL is in the og:image meta tag on each book’s page, in the

format https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/{hash}/{bookId}.jpg.

If still not found, use the cover from the buy URL page (Amazon,

publisher site, etc.).

IMPORTANT - referrer policy: when using Goodreads cover URLs on pages

hosted on third-party domains (WordPress, Substack, etc.), the Goodreads

CDN may refuse to serve the image unless the <img> tag includes

referrerpolicy=”no-referrer”. Always add this attribute to every cover

image tag to prevent broken thumbnails.

Verify visually that each cover URL returns the correct cover for

the book, not a generic placeholder or a wrong edition.

Include a fallback text element in case any image fails to load.

BOOKS:

For each book, provide the title, author, buy URL, and audiobook URL.

If a URL is not available, write “none” and that icon will be omitted.

[If you have categories, list them; if not, list books directly.]

[CATEGORY 1 - e.g. Fiction]

Title: [Book title]

Author: [Author name]

Buy URL: [Direct product URL, e.g. https://www.amazon.com/dp/XXXX]

Audiobook URL: [Direct audiobook URL, e.g. https://www.audible.com/pd/XXXX] or none

Title: [Book title]

Author: [Author name]

Buy URL: [URL]

Audiobook URL: [URL or none]

[CATEGORY 2 - e.g. Non-Fiction]

Title: [Book title]

Author: [Author name]

Buy URL: [URL]

Audiobook URL: [URL or none]

ROW STRUCTURE AND LINK BEHAVIOUR (important):

The row has two parts: the LEFT side (cover + title + author, NOT

clickable as a single link) and the RIGHT side (a fixed-width “actions”

area containing the Goodreads button and the two icon slots).

DO NOT wrap the cover and title/author area in a link to Goodreads.

The cover image and the title text should be plain elements, not

links. The ONLY clickable elements on the row are the Goodreads

button, the cart icon, and the headphones icon.

This is critical: a wrapping row link interferes with clicks on the

individual icons and causes them to fail. Do not include it.

The right-side actions area has THREE slots, in this order:

Goodreads text button (always present if a Goodreads URL is found)

Cart icon slot (icon if buy URL provided, empty placeholder of the

same width if not)

Headphones icon slot (icon if audiobook URL provided, empty

placeholder of the same width if not)

The placeholder slots reserve horizontal space so that the Goodreads

buttons across all rows align vertically, regardless of whether each

individual book has a buy or audiobook icon. This visual alignment

is important.

Each icon must be its own independent <a> element. The cover image

and title text must NOT be wrapped in any link.

DELIVERABLE:

A single, downloadable HTML file

HTML comments showing me how to add a new book later

Before generating the final file, show me the list of all URLs and

cover images you have found, so I can verify them

Do not finalise until I approve.