Skip to main content

How to Use the Affiliate Product Block

Affiliate Product - Ruby puts one product card in a post: a photo, a name and a short description, a star rating, the price and a buy button. It suits a post that recommends a single product. Its keywords name Amazon and eBay, but any affiliate link works.

The whole card is a link. A click anywhere on it, not only on the button, opens your Affiliate Link.

An Affiliate Product - Ruby block in a post, outlined in orange: the ThinkPad X1 Carbon Gen 12 photo, a description, a star rating, an Editor's Choice label, $1,649 struck through beside $1,429 and a Check Price on Amazon button

To list one product at several stores with a price for each, use the Affiliate List block instead.

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 Product in the search box.

  4. Click Affiliate Product - Ruby to insert it.

  5. Type the product name and description straight into the card, or in the sidebar's Content panel. Both places edit the same text, and so does the button label on the card.

    An Affiliate Product - Ruby block in the editor: product photo, title, description, star rating, struck-through price beside the sale price, and a Get It Now button

  6. Fill the rest of the Content panel (below), then click Save or Publish.

The post editor with an Affiliate Product - Ruby block selected, the Lenovo ThinkPad X1 Carbon Gen 12 box in the canvas, and the Block tab open on Content: Heading, Heading Tag H3, Table of Content Included, Description and the start of Product Image

Settings​

The block sidebar has two tabs. The Settings tab (the gear icon) holds the Content panel: what the card says and where it links. The Styles tab (the half filled circle) holds seven panels of sizes and colours. Every style field starts empty, which keeps the theme's own look, so you only touch the ones you want to change.

Content​

  • Heading: the product name. Empty by default.
  • Heading Tag: the HTML tag of the name, H2 to H6, p or Div. Default: H3. Pick p or Div when the card should not count as a heading in the post's outline.
  • Table of Content Included: lists the product name in the post's table of contents. Off by default.
  • Description: one or two lines under the name. Empty by default.
  • Product Image: click Add Image to pick the photo from the Media Library.
  • or Enter Custom Link: the address of an image hosted elsewhere, such as the store's own product photo. It is used only when Product Image is empty.
  • Price: the regular price, typed with its currency symbol. Default: $99, so change it before you publish.
  • Discounted Price: fill it and the card shows Price struck through, followed by this one. Empty by default.
  • Rating Percent: a slider from 0 to 100 that fills the five stars, so 90 shows four and a half stars. Leave it alone and no stars are drawn.
  • Rating Meta: a short word printed beside the stars, such as "Best Choice". Empty by default.
  • Affiliate Link: where the card and the button go. Type the full address, starting with https://. Default: #, which goes nowhere.
  • Button Label: the button text. Default: Get It Now.
  • Internal Link?: turn it on when the link points to a page on your own site. The link then opens in the same tab and carries no nofollow or sponsored. Off by default, so the link opens in a new tab with rel="noopener nofollow".
  • Sponsored?: adds sponsored to the 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.

Heading (Styles tab)​

  • Font Size: the product name's size in pixels, with a box each 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.

Image (Styles tab)​

  • Image Width: how wide the product photo is, in pixels, for Desktop, Tablet and Mobile.

Rating (Styles tab)​

  • Size: the star size, from 10 to 50 pixels. Default: 20.
  • Color and Dark Mode - Color: the star colour in light and dark mode.

Price (Styles tab)​

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

CTA Button (Styles tab)​

  • Font Size: the button text's size in pixels for Desktop, Tablet and Mobile.
  • Border Style: a switch that turns the filled button into an outlined one. The Background colour below becomes the outline colour. Off by default.
  • Color: four colours for light mode: Color (the text), Background, Hover - Color and Hover - Background.
  • Dark Mode - Color: the same four colours for dark mode.

Border & Shadow (Styles tab)​

  • Border Style: None, Solid, Dashed, Dotted or Double. Empty by default, so the card 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 card's corners, from 0 to 100 pixels. Empty by default.
  • Shadow: a soft shadow around the card. On by default. Turn it off for a flat card, usually together with a border or a background.
  • Background and Dark Mode - Background: the card's fill colour in light and dark mode.

Inner Padding (Styles tab)​

The space between the card'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.

Related Articles