Collection at bottom of blog post

asmi131
New Member
4 0 0

Hi all!

I want to have a featured collection at the bottom of blog posts on my page (to ty and monetize blog visits).

I'm not sure how to do this.

Can someone help?

Thanks,

Alex

0 Likes
Leon
Shopify Staff
Shopify Staff
205 1 62

Hey, Alex.

Leon here from Shopify Support.

Adding products to the bottom of any blog post is very simple to complete. Once you've written the blog post you can add products or collections anywhere within the post using the Shopify Buy Button.

If you don't currently have the Buy Button you can add this sales channel by following our help guide

Following the directions in this guide, you'll select a collection and customize how you'd like it to appear within your blog post, then copy the embed code to your clipboard.

Navigating over to your blog post, in the Rich Text Editor (RTE) you need to select the "Show HTML" button: 

Once selected, scroll to the bottom of the blog source code, or locate a position from within the source code and Paste the code you copied from the Buy Button sales channel. 

Once it's pasted, you can save your changes and view the blog post to see how your collection looks. 

More info: Writing Blogs and Creating Buy Buttons

All the best! 

Leon 

0 Likes
samyben
Tourist
7 1 0

it does't work for me


@Leon wrote:

Hey, Alex.

Leon here from Shopify Support.

Adding products to the bottom of any blog post is very simple to complete. Once you've written the blog post you can add products or collections anywhere within the post using the Shopify Buy Button.

If you don't currently have the Buy Button you can add this sales channel by following our help guide

Following the directions in this guide, you'll select a collection and customize how you'd like it to appear within your blog post, then copy the embed code to your clipboard.

Navigating over to your blog post, in the Rich Text Editor (RTE) you need to select the "Show HTML" button: 

Once selected, scroll to the bottom of the blog source code, or locate a position from within the source code and Paste the code you copied from the Buy Button sales channel. 

Once it's pasted, you can save your changes and view the blog post to see how your collection looks. 

More info: Writing Blogs and Creating Buy Buttons

All the best! 

Leon 


 

0 Likes
moderntribe
Excursionist
11 0 5

Hi! I was able to figure this out using the District theme to put a featured collection preview on my blog posts. My full write up on this is here: https://moderntribe.com/blogs/news/how-to-add-a-featured-collection-to-blog-post-in-shopify

 

Paste this below this section in article-template.liquid below the following 2 lines:

            

   {{ article.content }}
   </div>

 

 

{%- assign tag = article.image.alt -%}
{%- assign collection = collections[tag] -%}
{%- assign product_limit = 8 -%}


{% if collection.products.size > 0 %}
<div class="featured-collection layout-8 lazyload" data-section-id="{{ section.id }}" data-section-type="featured-collection-section">
<div class="wrapper">
    <div class="grid">
      <div class="box header">
        <div class="image-table">
          <div class="details">
              <h4>Shop {{ collection.title | escape }}</h4>
          </div>
        </div>
      </div>
      {% for product in collection.products limit: product_limit  %}
       {% include 'product-grid-item' %}
      {% else %}
        {% for i in (1..product_limit) %}
          {% include 'placeholder-product-grid-item' %}
        {% endfor %}
      {% endfor %}
    </div>
       <div class="box header">
        <div class="image-table">
          <div class="details">
              <a href="{{ collection.url }}" class="button large outline">View more</a>             </div>
        </div>
      </div>
  </div>
</div>
{%endif%}

 

0 Likes
pokpok
Tourist
6 0 1

Hi, I'm using debut theme and use the collection.liquid (featured collection section for Debut theme) and everything works fine, the section and the collection appears according to the assign code, except the image of the products didn't appear. Do I have to assign any specific code instead of the original liquid code.

 

Thanks in advance!

0 Likes
jorgenovo04
Tourist
3 0 0

I am using the debut theme as well and this is what I get after adding 

{%- assign tag = article.image.alt -%}
{%- assign collection = collections[tag] -%}
{%- assign product_limit = 8 -%}


{% if collection.products.size > 0 %}
<div class="featured-collection layout-8 lazyload" data-section-id="{{ section.id }}" data-section-type="featured-collection-section">
<div class="wrapper">
    <div class="grid">
      <div class="box header">
        <div class="image-table">
          <div class="details">
              <h4>Shop {{ collection.title | escape }}</h4>
          </div>
        </div>
      </div>
      {% for product in collection.products limit: product_limit  %}
       {% include 'product-grid-item' %}
      {% else %}
        {% for i in (1..product_limit) %}
          {% include 'placeholder-product-grid-item' %}
        {% endfor %}
      {% endfor %}
    </div>
       <div class="box header">
        <div class="image-table">
          <div class="details">
              <a href="{{ collection.url }}" class="button large outline">View more</a>             </div>
        </div>
      </div>
  </div>
</div>
{%endif%}

under  

{{ article.content }}
</div>

 

Screen Shot 2020-10-30 at 10.57.29 AM.png

Was anyone able to find a solution with debut theme?

0 Likes
tyson19
New Member
1 0 0

Hello,

It was necessary to copy the content from file collection.liquid, then : 

  1. redefine declarations the copy. values defined on  {% schema %} section. i.e : {%- assign product_limit = section.settings.grid %} need to redefined as follows {%- assign product_limit = 3 -%}).
  2. review values in copy. Change references to {% schema %} values. i.e :  value {% case section.settings.grid %} will become {%- assign grid = 3 -%}{% case grid %} 
  3. delete all values after {% schema %}
  4. Once all values are defined, you can proceed to copy the new fresh section in article-template.liquid. After section article.content like follows : 

<div class="rte">
{{ article.content }}
</div>

<div class="page-width">

new fresh content

..

</div>

NB :  collection value can be hardcoded but it can be variabilized.

Hope it helps,

 

0 Likes
beerfox
New Member
1 0 0

I have the same problem as @pokpok, however, using the Supply theme. 

 

I have inserted @moderntribe code which works great, except that the product images do not display. Title, price etc. display as expected. 

 

Possibly some part of product-grid-item.liquid is stopping the image from displaying?

 

If anyone has a solution to this, it would be greatly appreciated!

 

 

0 Likes
Growthfamily
Shopify Partner
14 0 2

The Buy button solution works like a charm! 

If you want to do the opposite (featuring a blog article in a collection), you can use this app : https://apps.shopify.com/blog-articles-in-collection

Thibault. 

0 Likes