How do I build custom product cards like these to put insert into my blog posts? With minimal custom design and button to the affiliate website. Like in the picture added.
Affiliate website = an external website?
I’m going to guess that in an average blog post you might have 1 or 2 product cards.
The approach I’d use for that is;
- Make a Webflow component for the product card, put it on your blog page at the bottom.
- Give it properties for the name, description, photo, and link URLs to your affiliate partner
- Use Finsweet Powerful Rich Text to reference your component in the blog content where you want, e.g.
{{ product1 }}** - Create the appropriate Product fields in the CMS for your blog post, and link them to the component
- Wrap the component in a DIV, which you use conditional visibility on- so that in the case you have no product, you won’t get a blank card at the bottom of the page
- Repeat for a product2, product3, if you need support for several.
** Note, both Webflow and Finsweet use the term “component” but they’re not related. Just be aware of that so you’re not confused.
To create custom product cards with minimal design and a button linking to an affiliate site, use a simple CMS setup. Add a “Products” collection with fields for the product name, image, description, and affiliate link. In your blog post template, use a Collection List to dynamically pull product details and style the cards with a clean layout. Use a button element linked to the affiliate URL and apply minimal styling for consistency across posts.