Relevant Products
Last updated
Last updated
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.
<!--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><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>
<!--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><!--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>.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);
}
}
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 page.
You can also adjust background shape and color in the component CSS.
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.
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.
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.
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.
E-Commerce Content Marketing: 5 Brands You Can Learn From Sleeknote
6 Product Recommendation Examples in Ecommerce and Best Practices to Use Them Wisely Nosto
7 Ways Blogging Can Help You Grow Your Online Store Pixel Union
