How to Use the Affiliate List Block

Affiliate List - Ruby shows one product at several stores. A header holds the product name, a short description and an optional best price. Under it, each store is an Affiliate List Item row with the store's logo or name, its price and a buy button. Use it when the same product sells in more than one place; for a single product card, use the Affiliate Product block.

Add the block

1. Go to Posts > Add Post, or open a post you already have.
2. Click the + button at the top left of the editor to open the block inserter.
3. Type Affiliate List in the search box.
4. Click Affiliate List - Ruby to insert it. It arrives with one empty Affiliate List Item row inside.
5. Type the product name and the description straight into the block's header. They have no field in the sidebar. You can type the best price label and amount there too.
6. Click the row and fill its sidebar, one store per row (see Affiliate List Item below). Click Add Logo in the row to pick the store's logo from the Media Library.
7. To add another store, select the list and click the + button at the bottom of it. Only Affiliate List Item rows go inside, and you will not find that block in the main inserter: it exists only inside an Affiliate List - Ruby.
8. Click Save or Publish.

Settings

Select the list itself, not a row, to see its settings. The Settings tab (the gear icon) holds Content and for Affiliate Item; the Styles tab (the half filled circle) holds five more panels. Every size and colour starts empty, which keeps the theme's own look.

The rows carry their own content only. Their sizes, price colour and button colours are all set once on the list, in for Affiliate Item, and apply to every row.

Content

• Heading Tag: the HTML tag of the product name, H2 to H6, p or Div. Default: H3.
• Table of Content Included: lists the product name in the post's table of contents. Off by default.
• Best Price Link: makes the best price a link, for example to the cheapest store. Type the full address with https://. It opens in a new tab and carries nofollow. Empty by default.
• Best Price Label: the small text above the best price. Empty by default. The "Best Price" you see greyed out is only a hint, so type a label if you want one shown.
• Best Price: the lowest price, typed with its currency symbol. Empty by default. Leave it empty and the header shows no best price at all, label included.

for Affiliate Item

These style every row in the list.

• Logo Width: the store logo's width, in pixels.
• Item Heading: the size of each row's brand name, in pixels, for Desktop, Tablet and Mobile.
• Price Size: the size of each row's price for Desktop, Tablet and Mobile.
• Price Color: Color and Dark Mode - Color for the row prices.
• Button Size: the button text's size for Desktop, Tablet and Mobile. Default: 12 on all three.
• CTA Button Border Style: turns the filled buttons into outlined ones. The button Background colour becomes the outline colour. Off by default.
• Border Radius: rounds the buttons' corners, from 0 to 100 pixels. Empty by default.
• Button Color: four colours for light mode: Color (the text), Background, Hover - Color and Hover - Background.
• Dark Mode - Button Color: the same four colours for dark mode.

Heading (Styles tab)

• Font Size: the product name's size in pixels for Desktop, Tablet and Mobile.
• Color and Dark Mode - Color: the name's colour in light and dark mode.

Description (Styles tab)

• Font Size: the description's size in pixels for Desktop, Tablet and Mobile.
• Color and Dark Mode - Color: the description's colour in light and dark mode.

Best Price (Styles tab)

• Font Size: the best price's size in pixels for Desktop, Tablet and Mobile.
• Color and Dark Mode - Color: the best price's colour in light and dark mode.

Border & Shadow (Styles tab)

• Border Style: None, Solid, Dashed, Dotted or Double. Empty by default, so the list has no border.
• Border Width and Border Color (with its Dark Mode - Color): these appear once Border Style is set to anything but None. Pick a colour too, or the border will not show.
• Border Radius: rounds the list's corners, from 0 to 100 pixels. Empty by default.
• Shadow: a soft shadow around the list. On by default.
• Background and Dark Mode - Background: the list's fill colour in light and dark mode.

Inner Padding (Styles tab)

The space between the list's edge and its content, set side by side for Desktop, Tablet and Mobile. The defaults are 30px on every side on desktop, 25px on tablet and 20px on mobile. The canvas shows a new value once you click outside the panel.

Affiliate List Item

Click a row to see its settings. A row has one panel, Content, and no Styles tab of its own.

• Brand Name: the store's name, printed beside its logo. Empty by default. You can also type it in the row.
• Add Custom Logo URL: the address of a logo hosted elsewhere. It is used only when no logo was picked with Add Logo in the row.
• Price: the store's price, typed with its currency symbol. Default: $99, so change it on every row.
• Discounted Price: fill it and the row shows Price struck through, followed by this one. Empty by default.
• Affiliate Link: where the row's button goes. Type the full address with https://. Default: #, which goes nowhere.
• Button Label: the button text. Default: Get It Now. Clear it and the row shows no button.
• Internal Link?: turn it on when the button points to your own site. It then opens in the same tab with no nofollow or sponsored. Off by default, so the button opens in a new tab with rel="noopener nofollow".
• Sponsored?: adds sponsored to the button's link, which tells search engines it is a paid link. Off by default. Turn it on for affiliate links. Internal Link? removes it again, since a link to your own site is never paid.