# Relevant Products

If you’re working on content marketing for an ecommerce business, sharing links to, photos of, and information about productions mentioned in the story can be a great way to serve your readers and increase their likelihood of turning into customers.

## **Examples**

### Relevant product on the side

![](/files/-ME3H6jbO-ljtnXPeNQy)

#### How to make the relevant product on the side

{% embed url="<https://drive.google.com/file/d/100pPY0XW7NJYZPuOkYD3YTYiXphJqQqz/view?usp=sharing>" %}

### Full-width block with background shapes

![](/files/-ME3H6jdJ8UyUw2siAN9)

{% tabs %}
{% tab title="4 columns grid HTML" %}

```markup
<!--Related Products (grids, 4 cols)-->
<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Related products</h3>
<div class="stk-snippets-related-products stk-grid stk-grid__layout_matrix" data-ce-tag="grid">
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
</div>
```

{% endtab %}

{% tab title="6 columns grid HTML" %}

```markup
<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Related products</h3>
<div class="stk-snippets-related-products stk-grid stk-grid__layout_matrix" data-ce-tag="grid">
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
</div>

```

{% endtab %}

{% tab title="10 columns grid HTML" %}

```markup
<!--Related Products (grids, 10 cols)-->
<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_400000__style_medium_header">Related products</h3>
<div class="stk-snippets-related-products stk-grid stk-grid__layout_matrix" data-ce-tag="grid">
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
  <div data-col-width="3" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
  <div data-col-width="3" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
</div>
```

{% endtab %}

{% tab title="12 columns grid HTML" %}

```markup
<!--Related Products (grids, 12 cols)-->
<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Related products</h3>
<div class="stk-snippets-related-products stk-grid stk-grid__layout_matrix" data-ce-tag="grid">
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
  <div data-col-width="4" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-products__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-products__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Card content" class="stk-snippets-related-products__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__mb_05">Poc Octal</h4>
        <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><span class="stk-reset">This helmet gives maximum protection, ventilation, comfort, lightness, precise fit, and safety while practicing road cycling with full a guarantee that your adventure will be a success.</span></p>
        <button data-stk-button="1" class="stk-reset stk-theme_00000__stk-btn_basic">Buy</button>
      </div>
    </div>
  </div>
</div>
```

{% endtab %}

{% tab title="CSS" %}

```css
.stk-snippets-related-products {
  --photo-height: 360px;
  --photo-height-m: 200px;
  margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-related-products__card > :last-child,
.stk-snippets-related-products__content > :last-child {
  margin-bottom: 0;
}

.stk-snippets-related-products__card {
  position: relative;
  z-index: 1;
}

.stk-snippets-related-products__photo img {
  object-fit: cover;
}

.stk-snippets-related-products__content {
  padding: 30px 0 50px;
}

@media (min-width: 769px) {
  .stk-snippets-related-products__card:after {
    content: '';
    display: block;
    background: linear-gradient(-45deg, transparent 60px, #FFF5D3 60px);
    position: absolute;
    top: 40px;
    right: -20px;
    bottom: 0;
    left: -20px;
    z-index: -1;
  }

  .stk-snippets-related-products__photo,
  .stk-snippets-related-products__photo .stk-mask,
  .stk-snippets-related-products__photo img {
    width: 100%;
    height: var(--photo-height);
  }
}

@media (max-width: 768px) {
  .stk-snippets-related-products {
    background: no-repeat center bottom  / 100% calc(100% - 40px) linear-gradient(-45deg,transparent 60px,#fff5d3 60px);
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .stk-snippets-related-products__photo,
  .stk-snippets-related-products__photo .stk-mask,
  .stk-snippets-related-products__photo img {
    width: 100%;
    height: var(--photo-height-m);
  }
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-related-products {
    background: no-repeat center bottom  / 100% calc(100% - 40px) linear-gradient(-45deg,transparent 60px,#fff5d3 60px);
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-related-products__card:after {
    display: none;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-related-products__photo,
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-related-products__photo .stk-mask,
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-related-products__photo img {
    width: 100%;
    height: var(--photo-height-m);
  }
}

```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**Select the code component with the same number of columns as in the grid system of your post.**

Replace style id \`**stk-theme\_00000**\` with yours before adding it to your Style Manager. For more info, please go to the [Introduction](/components-library/getting-started/introduction.md) page.

You can also adjust background shape and color in the component CSS.
{% endhint %}

## **Content Experience Impact**

Including dynamic links about products mentioned in your content marketing reduces the number of steps between someone being interested in your products and actually purchasing them. These can include product imagery, the price, a small description, and a button to learn more or buy now. This not only ups engagement by creating a visual element instead of plain old text links, but also increases the likelihood of conversion by providing a streamlined experience.

{% hint style="success" %}

### Dos

* Include products most related to the content at hand. If you mention specific products in your blog post, including those in a related products component is an easy option. If not, think of the products most useful to someone who might be reading this post.&#x20;
* Build your relevant product components using an API tied directly to your store database, so that any product details that change automatically update across content pieces. This prevents information in your content from being outdated quickly.
  {% endhint %}

{% hint style="danger" %}

### **Don'ts**

Don’t feel like you have to include relevant products components in all of your ecommerce blogs. Some posts may be more about thought leadership and building trust with your readers than driving towards purchasing specific products, and it’s better to leave the products out of those to avoid seeming too salesy.
{% endhint %}

## **Learn More**

[**E-Commerce Content Marketing: 5 Brands You Can Learn From**](https://sleeknote.com/blog/e-commerce-content-marketing-examples)\
\&#xNAN;*Sleeknote*

[**6 Product Recommendation Examples in Ecommerce and Best Practices to Use Them Wisely**](https://www.nosto.com/blog/product-recommendations-examples/)\
\&#xNAN;*Nosto*

[**7 Ways Blogging Can Help You Grow Your Online Store**](https://pixelunion.net/blogs/state-of-the-union/7-ways-blogging-can-grow-your-online-store)\
\&#xNAN;*Pixel Union*

## **Extra Inspiration**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://setka.gitbook.io/components-library/engagement-and-sales/relevant-products.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.