Advanced: This code displays related products within the body of any blog post where you place the [gcontent] tag. It determines which product to show based on keywords in blog post's URL.
This code works by checking the handle of a blog post for keywords you define. If one is found, then that product's information is outputted in a box inside of the blog post. There is a "fallback" product that will display if no keyword is found in the URL. This product should be a general, all purpose product. It's important to note that if your blog handle has more than one valid keyword, more than one product box will display. You can add additional "elsif" statements to display additional product boxes triggered by additional keywords.
The CSS provided will put the content in a light gray box in your theme fonts.
Please note: Using these code snippets may require some knowledge of HTML, CSS and Liquid. If you need assistance getting the code examples to work or meet your more specific needs, consider hiring a developer to help. These code snippets may not work in all themes or store configurations, so be sure to test everything thoroughly.
Change the values in bold to fit your needs. Be sure the "use Liquid" checkbox is checked.
{% if article.handle contains "keyword-1" %}
<div class="gcontent-article-related">
<h6>Product 1 Name</h6>
<p>Product 1 summary <a href="/products/product-1-url/" target="_blank">Product link text</a></p>
</div>
{% elsif article.handle contains "keyword-2" %}
<div class="gcontent-article-related">
<h6>Product 2 Name</h6>
<p>Product 2 summary <a href="/products/product-2-url/" target="_blank">Product link text</a></p>
</div>
{% else %}
<div class="gcontent-article-related">
<h6>Fallback Product Name</h6>
<p>Fallback product summary <a href="/products/fallback-product-url/" target="_blank">Product link text</a></p>
</div>
{% endif %}
We recommend adding it to the end of the file. Please note you can adjust the code in bold to change sizes and spacing as needed.
.gcontent-article-related { border: 1px solid #ccc; padding: 20px; margin-left: 0px; margin-right: 0px; margin-top: 20px; margin-bottom: 20px; }
.gcontent-article-related h6 { font-size: 24px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 10px; }
.gcontent-article-related p { font-size: 18px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; }