I am working with a client who wants to get involved with Amazon Affiliate marketing on her site.
She recently emailed me with the following question:
I signed up to be an Amazon affiliate, and it seems that if you want to include an image of the book as a link, etc., you need to put the actual code into the body of the page.
I would prefer to not grant her designer access. Is there a way to do this without granting her access?
Yes there is. The easiest way would be adding a code/embed field to a CMS collection that handles any of her product posts.
Got it.
A couple of follow-up questions until I can use actual code from her as an example to test this.
If my client wants to list several books as affiliate links within a Rich Text Field, how would that work? See read-only link.
When I embed the code, do I need to somehow attach it to an image of the book, or does Amazon generate the book image within the code?
Hey, I can’t speak for how the amazon embeds work. But I would imagine it probably generates its own self-contained component including the product image but I could be wrong. Are we sure it’s a full-on embed and not just a tracking URL?
For custom HTML in the middle of a rich text field, I’d recommend checking out this: Powerful Rich Text by Finsweet
Edit: here’s a quick amazon affiliate link explainer: How to Tell if a Link Is an Amazon Affiliate Link?
A couple of final (I think) questions.
I implemented an actual example my client gave me and used Finsweet’s Rich Text code, but I am still running into two issues.
The image and text embedded from the link is too small, but I’m not sure how to classify HTML in my Rich Text style guide page so I can style it to be bigger. It’s a mix of a link, text blog, and image.
The affiliate code only works when I paste it into a current H4 header with text as a link (the way the other book titles are styled in the read-only link right now). I can’t simply paste it anywhere. Why is this happening? I suppose I could instruct my client to create an H4 link header, then paste the code into the header, but I would love to allow her to simply paste it where she wants.
Here is the Read-Only link from the test page.
https://preview.webflow.com/preview/before-bethlehem?utm_medium=preview_link&utm_source=designer&utm_content=before-bethlehem&preview=1f76b4eb025c8d9e134d1e40f6d15f8d&pageId=630f8d7bbeb094f7399c401b&itemId=6351685941c8771bcce011c7&workflow=preview
a. Double-click the Rich Text element to open the Rich Text editor.
b. Click on the embedded image to select it.
c. Click on the “Settings” tab in the right-hand panel.
d. In the “Class” field, enter a custom class name (e.g. “embedded-image”).
e. Click on “Save” to close the panel.
f. Go to the page settings and open the “Custom Code” tab.
g. Add the following CSS code to adjust the size of the image:
.embedded-image img {
width: 100%;
height: auto;
}
This will make the image fill the width of its container while maintaining its aspect ratio. You can adjust the values as needed.
If you want to allow your client to paste the code anywhere, you can create a custom class for the code block and apply it to any element in the Rich Text field. Here’s how:
a. In the page settings, open the “Custom Code” tab.
b. Add the following code to create a custom class for the affiliate code:
.affiliate-code { display: inline-block; }This will create a class called “affiliate-code” that makes the block of code display as an inline-block element, which allows it to be placed inside other elements.
c. In the Rich Text editor, select the text where your client wants to insert the affiliate code.
d. Click on the “Settings” tab in the right-hand panel.
e. In the “Class” field, enter “affiliate-code” to apply the custom class to the selected text.
f. Click on “Save” to close the panel.
This will wrap the selected text in a code block with the “affiliate-code” class, allowing the affiliate code to function properly.
Click here.
