How to Use Collections on your Site in Shopify

Using collections is such a great way to not only manage and organize related content but also to make it easier for your audience to quickly keep track and view any particular category of the content. Let’s build more attraction and popularity for your website by enabling collections, a very effective content management system to organize content on your site without complexity and headache. To help you solve the problem, this instructional writing on How to use collections on your site will be a great help for your website.

For your information, anything that is not a page or a post can absolutely be grouped to be represented as a collection. However, all elements in the collection should be related to a particular topic.

Related Posts:

In exchange for a fully-equipped and well-organized e-commerce business, you may need to spend just a few minutes to get your collections done. However, if you wonder how to use collections on your site, please read carefully our detailed instruction to get your question solved.

How to use collections on your site in Shopify

When you should use a collection?

The decision to use a collection, a post, or a page would be like this:

+-------------------------------------+         +----------------+
| Can the things be logically grouped?|---No--->|    Use pages   |
+-------------------------------------+         +----------------+
                |
               Yes
                |
                V
+-------------------------------------+         +----------------+
|      Are they grouped by date?      |---No--->|Use a collection|
+-------------------------------------+         +----------------+
                |
               Yes
                |
                V
+-------------------------------------+
|            Use posts                |
+-------------------------------------+

Please note that any separate group of “things” can be grouped in a logical way by a common theme, which is properly not their date.

Basic implementation

In this tutorial, we are taking a page on the demo Bakery Store site, that lists all the cookies we have, as an example.

demo

Step 1: Add a collections object and define collections on the site

To raise your knowledge of defining collections, it occurs in _config.yml. After adding a collections object, please define the collections you want on the site right under collections:

collections:
  cookies:

The items in a collection, called Documents, live in a folder named _*collection_name*. Documents can either be HTML or Markdown. We recommend Markdown because it is more common and easier to work with.

Now let’s create a document for individual cookie. Its photo and title are identified in the front matter and the description.

For example, we will create _cookies/afghan.md for the Afghan cookie and copy the content across:

---
title: Afghan
image_path: https://upload.wikimedia.org/wikipedia/commons/d/d1/AfghanBiscuit.jpg
---
An Afghan biscuit is a traditional New Zealand biscuit made from flour, butter, cornflakes, sugar and cocoa powder, topped with chocolate icing and a half walnut. The recipe[1] has a high proportion of butter, and relatively low sugar, and no leavening (rising agent), giving it a soft, dense and rich texture, with crunchiness from the cornflakes, rather than from a high sugar content. The high butter content gives a soft melt-in-the-mouth texture, and the sweetness of the icing offsets the low sugar and the cocoa bitterness. The origin of the recipe and the derivation of the name are unknown, but the recipe has appeared in many editions of the influential New Zealand Edmonds Cookery Book.

Source [Wikipedia](https://en.wikipedia.org/wiki/Afghan_biscuit)

Step 3: Repeat the step above for the other cookies

We will replace the hardcoded cookie data in cookie.html with your cookie collection data. The collection documents will be available to us at site.*collection_name*, in this case, it is site.cookies.

Iterate over your documents and output the data:

---
layout: page
title: Cookies
---

Please kindly note that you need to restart your Jekyll server to take all changes into application.

Output collection documents as pages

Now let’s try something more advanced when we already have the cookies printed out. More in details, you are able to have the cookie title link to another page with detailed information about that cookie.

Step 1: Add the output: true flag to the collection configuration

Please add an output: true flag to the collection configuration in _config.yml. Then, there will be a page generated by Jekyll for every document:

collections:
  cookies:
    output: true

Step 2: Remove content and image

Remove the content and image in cookies.html. The <h2> will be linked to the generated document page. The URL is available to us at document.url:

---
layout: page
title: Cookies
---

Step 3: Create a layout for the documents

We will create _layouts/cookie.html with a basic layout:

---
layout: page
---
<div class="cookie">
  <h2><img src="" alt="page.title" />Use Collections on your Site</h2>

  <div class="blog-post spacing">
    <p>For every e-commerce site, the photo <a href="https://avada.io/shopify/gallery/">galleries</a> which showcase your products are undoubtedly necessary to gain customers’ trust and attention. However, adding a nicely-displayed photo gallery in Jekyll can be such a challenge for beginners and inexperienced people. With the purpose of solving the problem for people who have troubles implementing a photo gallery, this instructional writing on <strong>how to show a photo gallery on your site</strong> will be a great help for your website.</p>

<p>Depending on how the gallery will be shown, there are two solutions to your problem: using front matter and <a href="https://avada.io/shopify/devdocs/use-collections-on-your-site.html">using collections</a>. Please read these following steps carefully and learn how to show <a href="https://avada.io/shopify/photo-editor/">a photo gallery</a> on your site.</p>

<p><strong><em>Related Posts:</em></strong></p>
<ul>
  <li><a href="https://avada.io/shopify/devdocs/insert-a-layout-collection-and-blog-to-a-static-site.html">How to insert a layout, collection and blog to a static site in Shopify</a></li>
  <li><a href="https://avada.io/shopify/devdocs/display-a-featured-image-on-a-product-page-by-editing-your-theme-code-3.html">How to display a featured image on a product page by editing your theme code for non-sectioned themes in Shopify</a></li>
  <li><a href="https://avada.io/shopify/devdocs/how-to-choose-product-variants-by-clicking-a-variant-image.html">How to choose product variants by clicking a variant image in Shopify</a></li>
</ul>

<h2 id="how-to-implement-a-photo-gallery-on-your-jekyll-site">How to implement a photo gallery on your Jekyll site</h2>
<ul>
  <li><a href="#the-front-matter-method"><strong>The Front Matter method</strong></a>
    <ul>
      <li><a href="#step-1-create-photo-gallery.html-and-add-an-array-with-image-data">Step 1: Create <code class="highlighter-rouge">photo-gallery.html</code> and add an array with image data</a></li>
      <li><a href="#step-2-loop-over-the-array">Step 2: Loop over the array</a></li>
      <li><a href="#step-3-add-some-css">Step 3: Add some CSS</a></li>
      <li><a href="#step-4-adjust-the-functionality">Step 4: Adjust the functionality</a></li>
    </ul>
  </li>
  <li><a href="#the-collection-method"><strong>The Collection method</strong></a>
    <ul>
      <li><a href="#step-1-create-a-photo_gallery-collection">Step 1: Create a <code class="highlighter-rouge">photo_gallery</code> collection</a></li>
      <li><a href="#step-2-iterate-over-the-photo_gallery-collection">Step 2: Iterate over the <code class="highlighter-rouge">photo_gallery</code> collection</a></li>
      <li><a href="#step-3-add-a-weight-variable">Step 3: Add a <code class="highlighter-rouge">weight</code> variable</a></li>
      <li><a href="#step-4-order-the-collection-documents">Step 4: Order the collection documents</a></li>
    </ul>
  </li>
</ul>

<h3 id="the-front-matter-method">The Front Matter method</h3>

<p>This is the most suitable way for you to add the photo gallery on one page.</p>

<h3 id="step-1-create-photo-galleryhtml-and-add-an-array-with-image-data-step-1-create-photo-galleryhtml-and-add-an-array-with-image-data">Step 1: Create <code class="highlighter-rouge">photo-gallery.html</code> and add an array with image data {#step-1-create-photo-gallery.html-and-add-an-array-with-image-data}</h3>

<p>The first thing to do is forming <code class="highlighter-rouge">photo-gallery.html</code>. Then, in the front matter, add an array with image data.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
---
layout: default
images:
  - image_path: /images/cakes/apple-pie.jpg
    title: Apple Pie
  - image_path: /images/cakes/birthday-cake.jpg
    title: Birthday Cake
  - image_path: /images/cakes/black-forest.jpg
    title: Black Forest
  - image_path: /images/cakes/brownie.jpg
    title: Brownie
  - image_path: /images/cakes/cheese-cake.jpg
    title: Cheese Cake
  - image_path: /images/cakes/chocolate-cake.jpg
    title: Chocolate Cake
  - image_path: /images/cakes/fruit-cake.jpg
    title: Fruit Cake
  - image_path: /images/cakes/lamington.jpg
    title: Lamington
  - image_path: /images/cakes/lemon-cake.jpg
    title: Lemon Cake
---

</code></pre></div></div>

<h3 id="step-2-loop-over-the-array">Step 2: Loop over the array</h3>

<p>After getting the data in front matter, in order to output the images in a grid, you need to loop over the array.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
&lt;ul class="photo-gallery"&gt;
  {% for image in page.images %}
    &lt;li&gt;&lt;img src="{{ image.image_path }}" alt="{{ image.title}}"/&gt;&lt;/li&gt;
  {% endfor %}
&lt;/ul&gt;

</code></pre></div></div>

<h3 id="step-3-add-some-css">Step 3: Add some CSS</h3>

<p>Finally, <a href="https://avada.io/shopify/css-editor/">adding some CSS</a> will make your photo gallery display nicely.</p>

<p><img src="https://cdn3.avada.io/media/shopify/rDoC0jf.png" alt="photo gallery" /></p>

<h3 id="step-4-adjust-the-functionality">Step 4: Adjust the functionality</h3>

<p>If you want to reorder items and extend the structure to adjust the functionality, add a link field to the array.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
- image_path: /images/cakes/lemon-cake.jpg
  title: Lemon Cake
  link: /lemon-cake.html
...

</code></pre></div></div>

<p>After that, you need to  output the link in an <code class="highlighter-rouge">a</code> when outputting the images</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
&lt;ul class="photo-gallery"&gt;
  {% for image in page.images %}
    &lt;li&gt;
      &lt;a href="{{ image.link }}"&gt;
        &lt;img src="{{ image.image_path }}" alt="{{ image.title}}"/&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  {% endfor %}
&lt;/ul&gt;

</code></pre></div></div>

<h3 id="the-collection-method">The Collection method</h3>

<p>If you want to display the photo gallery on multiple pages or have a lot of metadata for each image then this is the best method for you.</p>

<h3 id="step-1-create-a-photo_gallery-collection">Step 1: Create a <code class="highlighter-rouge">photo_gallery</code> collection</h3>

<p>Firstly, create a <code class="highlighter-rouge">photo_gallery</code> collection. You need to add metadata for a single image in each document in the collection, for instance, <code class="highlighter-rouge">_photo_gallery/lemon-cake.md</code>.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
---
image_path: /images/cakes/lemon-cake.jpg
title: Lemon Cake
---

</code></pre></div></div>

<h3 id="step-2-iterate-over-the-photo_gallery-collection">Step 2: Iterate over the <code class="highlighter-rouge">photo_gallery</code> collection</h3>

<p>To iterate over the <code class="highlighter-rouge">photo_gallery</code> collection, you can use liquid.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
&lt;ul class="photo-gallery"&gt;
  {% for image in site.photo_gallery %}
    &lt;li&gt;&lt;img src="{{ image.image_path }}" alt="{{ image.title}}"/&gt;&lt;/li&gt;
  {% endfor %}
&lt;/ul&gt;

</code></pre></div></div>

<h3 id="step-3-add-a-weight-variable">Step 3: Add a <code class="highlighter-rouge">weight</code> variable</h3>

<p><code class="highlighter-rouge">Weight</code> is a number that helps you to indicate the photo’s position. Therefore, you can decide the photo order by adding a <code class="highlighter-rouge">weight</code> variable to the front matter of the documents in <code class="highlighter-rouge">photo_gallery</code>.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
---
image_path: /images/cakes/lemon-cake.jpg
title: Lemon Cake
weight: 1
---

</code></pre></div></div>

<h3 id="step-4-order-the-collection-documents">Step 4: Order the collection documents</h3>

<p>Finally, before outputting the photos, you have to order the collection documents by the <code class="highlighter-rouge">weight</code>.</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
...
{% assign sorted_photos = site.photo_gallery | sort: "weight" %}
&lt;ul class="photo-gallery"&gt;
  {% for image in sorted_photos %}
    &lt;li&gt;&lt;img src="{{ image.image_path }}" alt="{{ image.title}}"/&gt;&lt;/li&gt;
  {% endfor %}
&lt;/ul&gt;

</code></pre></div></div>

<h2 id="conclusion">Conclusion</h2>

<p>With this detailed tutorial on <strong>how to show a photo gallery on your site</strong>, we certainly ensure that you can manipulate those above steps and make your job easier. If you want to display a photo gallery using a JavaScript photo gallery, you can apply the same techniques. For <a href="http://sachinchoolur.github.io/lightslider/">lightSlider</a>, it expects the elements in a simple <code class="highlighter-rouge">&lt;ul&gt;</code> structure in the HTML. I hope this article has been helpful to you, you can check out our other articles on <a href="https://avada.io/shopify/devdocs/catalog/">catalog</a> if you want to learn more about this topic.</p>

  </div>
</div>

Then we can set the cookie layout to every document:

---
layout: cookie
title: Afghan
image_path: https://upload.wikimedia.org/wikipedia/commons/d/d1/AfghanBiscuit.jpg
---
An Afghan biscuit is a traditional New Zealand biscuit made from flour, butter, cornflakes, sugar and cocoa powder, topped with chocolate icing and a half walnut. The recipe[1] has a high proportion of butter, and relatively low sugar, and no leavening (rising agent) giving it a soft, dense and rich texture, with crunchiness from the cornflakes, rather than from a high sugar content. The high butter content gives a soft melt-in-the-mouth texture, and the sweetness of the icing offsets the low sugar and the cocoa bitterness. The origin of the recipe and the derivation of the name are unknown, but the recipe has appeared in many editions of the influential New Zealand Edmonds Cookery Book.

Source [Wikipedia](https://en.wikipedia.org/wiki/Afghan_biscuit)

When we’re done, there will be a list of links to cookies, which can direct you to a new page including that cookie’s information:

1

2

Conclusion

So that’s how you use collections on your site. It can’t be denied that the collection is a very powerful feature for e-stores in Shopify. With this feature, you can also add or remove products to a manual collection, delete collection or even change the content of an automated collection. Hopefully, you’ve got a complete view on it by reading our instruction, and if you want to learn more about this topic, check out our articles on catalog and collection pages.

People also searched for:

  • Use Collections on your Site Shopify