How to create the posts in Markdown and publish them as a blog in Shopify

Although Markdown has just been launched since 2004, this syntax is a working tool for the users to create articles easier by converting text to valid HTML. Considered as one of plain-text syntax, Markdown is the effective working tool for not only writers but also editors because this HTML language can be converted to many output formats and support HTML.

By reducing distractions, the users can create the blogs post and qualified content in WordPress because Markdown has just a few basic syntaxes. Besides, the Markdown’s formats are still influenced by existing text-to-HTML filters such as Setext, atx, Textile, reStructuredText, Grutatext, and EtText.

However, if you are the beginner or you are running a self-version, it is necessary for you to consider on this guiding article How to create the posts in Markdown and publish them as a blog in Shopify. This tutorial will give the Shopify store owners understandable and simple procedure to make a post in Markdown and launch it.

How to create the posts in Markdown and publish them as a blog in Shopify

Step 1: Create a post

Firstly, the admins can create a new file for our first post: _posts/2016-04-03-chocolate-chip-cookies.md.

In our post, we’ll start with empty front matter. We need this empty front matter to tell Jekyll that this isn’t a static file. Then we’ll add our Markdown content:

---
---
The chocolate chip cookie was invented by Ruth Graves Wakefield. She owned the Toll House Inn, in Whitman, Massachusetts, a very popular restaurant that featured home cooking in the 1930s. Her cookbook, Toll House Tried and True Recipes, was first published in 1936 by M. Barrows & Company, New York. The 1938 edition of the cookbook was the first to include the recipe "Toll House Chocolate Crunch Cookie" which rapidly became a favorite cookie in American homes.

We’ll repeat this for another post, _posts/2016-04-04-sourdough-bread.md

---
---
Sourdough bread is made by the fermentation of dough using naturally-occurring lactobacilli and yeast. Sourdough bread has a mildly sour taste not present in most bread made with baker's yeast and better inherent keeping qualities than other bread, due to the lactic acid produced by the lactobacilli.

Step 2: List all posts

We have two blog posts on our site, let’s have a page which lists all the posts. We’ll create blog.html in the root of the site and add front matter to set the layout and title:

---
layout: page
title: Blog Page
---

Next, we’ll output the blog posts in an unordered list, each post will have a link and title. Jekyll gives us access to an array of all the posts at site.posts. A post object has special properties. url is the URL for the generated post page, date is (by default) the date specified in the file name and title is (by default) the title specified in the file name:

...
<ul>
  
    <li><a href="/resources/best-free-shopify-themes.html">Top 30+ Best free Shopify themes</a></li>
  
    <li><a href="/resources/shopify-stores-for-sale.html">Shopify Stores For Sale: Where To Buy Or Sell A Shopify Store</a></li>
  
    <li><a href="/resources/best-shopify-themes-templates.html">35+ Best Shopify Themes/Templates</a></li>
  
    <li><a href="/resources/shopify-plus-reviews.html">Shopify Plus 2020 Reviews</a></li>
  
    <li><a href="/resources/successful-stores-for-inspiration.html">Top 35+ Best Successful Shopify Stores for Inspiration in 2020</a></li>
  
    <li><a href="/resources/best-shopify-customer-services.html">Top 10 Best Shopify Customer Services</a></li>
  
    <li><a href="/resources/shopify-pricing-plans.html">Shopify Pricing Plans - How To Choose The Right Plans For Your Store</a></li>
  
    <li><a href="/resources/shopify-partner-program.html">What Is The Shopify Partner Program? How To Become A Partner?</a></li>
  
    <li><a href="/resources/must-have-shopify-apps.html">Top 31+ Must-have Shopify Apps for your Shopify Store in 2020</a></li>
  
    <li><a href="/resources/link-building.html">Link Building For Ecommerce: The Easy Guide To High Ranking (2020)</a></li>
  
    <li><a href="/resources/google-adwords-guide.html">A Comprehensive Guide To Using Google Adwords</a></li>
  
    <li><a href="/resources/create-a-lead-generation-system.html">How To Create A Lead Generation System That Always Wins For eCommerce</a></li>
  
    <li><a href="/resources/advanced-content-promotion-strategies.html">10 Advanced Content Promotion Strategies For 2019</a></li>
  
    <li><a href="/resources/create-marketing-funnel.html">The Ultimate Guide On Creating A Marketing Funnel</a></li>
  
    <li><a href="/resources/best-shopify-store-examples-inspiration.html">35+ Best Shopify Store Examples for Inspiration in 2020</a></li>
  
    <li><a href="/resources/login-admin-partner-dashboard-customer-account.html">How to Login to Shopify Admin, Partner Dashboard & for Customer Account</a></li>
  
    <li><a href="/resources/start-a-shopify-store-with-no-money.html">How To Start A Shopify Store With No Money</a></li>
  
    <li><a href="/resources/make-money-with-shopify.html">How to Make Money with Shopify in 2020</a></li>
  
    <li><a href="/resources/what-is-shopify-how-shopify-works.html">What Is Shopify? How Does Shopify Work Exactly?</a></li>
  
    <li><a href="/resources/top-free-shopify-business-name-generators.html">Top 11 Awesome Free Shopify Business Name Generators</a></li>
  
    <li><a href="/resources/shopify-review-pros-cons.html">Shopify Reviews for 2020: Pros and Cons</a></li>
  
    <li><a href="/resources/drop-surfing-vs-dropshipping.html">What is Drop Surfing Ecommerce? Drop Surfing vs. Dropshipping</a></li>
  
    <li><a href="/resources/sell-on-ebay.html">How to Sell on eBay in 2020? Checklist for successful!</a></li>
  
    <li><a href="/resources/maketing-strategies-to-grow-business.html">8 Ecommerce Marketing Strategies to Grow Your Business</a></li>
  
    <li><a href="/resources/complete-guide-facebook-advertising-for-beginners.html">The Complete Guide to Facebook Advertising for Beginners</a></li>
  
    <li><a href="/resources/market-your-business-with-facebook.html">Facebook Marketing: How to Market your Business with Facebook</a></li>
  
    <li><a href="/resources/ecommerce-seo-guide.html">Ecommerce SEO: An A-Z Guide to Increase Organic Traffic Growth</a></li>
  
    <li><a href="/resources/marketing-automation-for-ecommerce.html">Marketing Automation for eCommerce: Definition, Guide, Tools, Tips</a></li>
  
    <li><a href="/resources/find-products-for-online-business.html">The Simple 5-Phase Process to Find Products for Online Business</a></li>
  
    <li><a href="/resources/inbound-marketing-for-online-business.html">Inbound Marketing For Online Business: Attract Customers Naturally</a></li>
  
    <li><a href="/resources/how-to-use-google-shopping.html">How To Use Google Shopping: Promote Products Online 5x Better</a></li>
  
    <li><a href="/resources/sell-on-amazon.html">How to Sell on Amazon? A Guide To Start Quickly!</a></li>
  
    <li><a href="/resources/mobile-ecommerce-for-online-business.html">Mobile Ecommerce Most Essentials For Your Online Business Success</a></li>
  
    <li><a href="/resources/name-your-brand.html">How To Name Your Brand? 10 Naming Tips for Your Business</a></li>
  
    <li><a href="/resources/copywriting-for-ecommerce.html">Ecommerce Copywriting: How to Grow Businesses with Just Words</a></li>
  
    <li><a href="/resources/email-marketing-for-ecommerce.html">The Ultimate Guide to Ecommerce Email Marketing</a></li>
  
    <li><a href="/resources/creating-a-logo.html">How To Create A Logo For Business - A Complete Guide</a></li>
  
    <li><a href="/resources/what-to-sell-online.html">How You Can Easily Find: What To Sell Online In 2019</a></li>
  
    <li><a href="/resources/use-instagram-for-business.html">Using Instagram for Business: Attract Customers with Visual Content</a></li>
  
    <li><a href="/resources/profitable-ecommerce-content-marketing.html">The Secrets of Profitable E-commerce Content Marketing</a></li>
  
    <li><a href="/resources/online-store-builder.html">7 Best Online Store Builders To Quickly Start Your Business</a></li>
  
    <li><a href="/resources/choose-an-ecommerce-hosting.html">How to Choose an Ecommerce Hosting Plan for Your Business</a></li>
  
    <li><a href="/resources/find-a-profitable-niche.html">How To Find A Profitable Niche For Dropshipping</a></li>
  
    <li><a href="/resources/choose-a-domain-name.html">The Complete Guide on How To Choose A Domain Name</a></li>
  
    <li><a href="/resources/choose-shopify-theme.html">How to Choose Shopify Themes That Sell: The Ultimate Guide</a></li>
  
    <li><a href="/resources/best-stock-photos-sites.html">11 Best Stock Photo Websites to Get Free (& Paid) Images</a></li>
  
    <li><a href="/resources/proven-business-ideas.html">20 Proven Business Ideas (With Examples To Learn From)</a></li>
  
    <li><a href="/resources/guide-to-find-supplier-on-alibaba.html">A Comprehensive Guide on How to Find a Supplier on Alibaba</a></li>
  
    <li><a href="/resources/ecommerce-business-models.html">Ecommerce Business Models: Top 4 Types that Work</a></li>
  
    <li><a href="/resources/start-online-business.html">Start an Online Busines: How to Do It from Scratch</a></li>
  
    <li><a href="/blog/build-fashion-store.html">8 Steps to Start an Online Fashion Store with Shopify</a></li>
  
</ul>

create the posts in Markdown and publish them as a blog in Shopify 2

Step 3: Generate post layout

The generated page currently has no styling because there’s no layout. Let’s create a layout at _layouts/posts.html, inherit the page layout then output the title, date, and content. Jekyll automatically converts the markdown content into HTML:

---
layout: page
---

<h2 class="spacing">How to create the posts in Markdown and publish them as a blog</h2>
<p>2019-02-17 00:00:00 +0000</p>

<p><strong>Using collections</strong> 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 <strong>How to use collections on your site</strong> will be a great help for your website.</p>

<p>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.</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/insert-a-sort-by-menu-to-collection-pages.html">How to insert a Sort by menu to collection pages in Shopify</a></li>
  <li><a href="https://avada.io/shopify/devdocs/update-the-collection-template.liquid-file.html">How to update the collection-template.liquid file in Shopify</a></li>
</ul>

<p>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 <strong>how to use collections on your site</strong>, please read carefully our detailed instruction to get your question solved.</p>

<p><strong>How to use collections on your site in Shopify</strong></p>

<ul>
  <li><a href="#when-should-you-use-a-collection"><strong>When should you use a collection?</strong></a></li>
  <li><a href="#basic-implementation"><strong>Basic implementation</strong></a>
    <ul>
      <li><a href="#step-1-add-a-collections-object-and-define-collections-on-the-site">Step 1: Add a collections object and define collections on the site</a></li>
      <li><a href="#step-2-create-a-document-for-each-cookie">Step 2: Create a document for each cookie</a></li>
      <li><a href="#step-3-repeat-the-step-above-for-the-other-cookies">Step 3: Repeat the step above for the other cookies</a></li>
      <li><a href="#step-4-replace-the-hardcore-cookie-data-in-cookies-html-with-data-from-your-cookie-collection">Step 4: Replace the hardcore cookie data in <code class="language-plaintext highlighter-rouge">cookies.html</code> with data from your cookie collection</a></li>
    </ul>
  </li>
  <li><a href="#output-collection-documents-as-pages"><strong>Output collection documents as pages</strong></a>
    <ul>
      <li><a href="#step-1-add-the-output-true-flag-to-the-collection-configuration">Step 1: Add the <code class="language-plaintext highlighter-rouge">output: true</code> flag to the collection configuration</a></li>
      <li><a href="#step-2-remove-content-and-image">Step 2: Remove content and image</a></li>
      <li><a href="#step-3-create-a-layout-for-the-documents">Step 3: Create a layout for the documents</a></li>
    </ul>
  </li>
</ul>

<h3 id="when-should-you-use-a-collection">When you should use a collection?</h3>
<p>The decision to use a collection, a post, or a page would be like this:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>+-------------------------------------+         +----------------+
| Can the things be logically grouped?|---No---&gt;|    Use pages   |
+-------------------------------------+         +----------------+
                |
               Yes
                |
                V
+-------------------------------------+         +----------------+
|      Are they grouped by date?      |---No---&gt;|Use a collection|
+-------------------------------------+         +----------------+
                |
               Yes
                |
                V
+-------------------------------------+
|            Use posts                |
+-------------------------------------+
</code></pre></div></div>
<p>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.</p>

<h3 id="basic-implementation">Basic implementation</h3>
<p>In this tutorial, we are taking a page on the <a href="https://github.com/CloudCannon/bakery-store-jekyll-template/tree/collections">demo Bakery Store site</a>, that lists all the cookies we have, as an example.</p>

<p><img src="https://d1qmdf3vop2l07.cloudfront.net/quiet-lily.cloudvent.net/compressed/2307e8a30e71523ff924fbc518c57a22.png" alt="demo" /></p>

<h4 id="step-1-add-a-collections-object-and-define-collections-on-the-site">Step 1: Add a collections object and define collections on the site</h4>
<p>To raise your knowledge of defining collections, it occurs in <code class="language-plaintext highlighter-rouge">_config.yml</code>.
After adding a collections object, please define the collections you want on the site right under <code class="language-plaintext highlighter-rouge">collections</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>collections:
  cookies:
</code></pre></div></div>
<p>The items in a collection, called Documents, live in a folder named <code class="language-plaintext highlighter-rouge">_*collection_name*</code>. Documents can either be HTML or Markdown. We recommend Markdown because it is more common and easier to work with.</p>

<h4 id="step-2-create-a-document-for-each-cookie-step-2-create-a-document-for-each-cookie">Step 2: Create a document for each cookie {#step-2-create-a-document-for-each cookie}</h4>
<p>Now let’s create a document for individual cookie. Its photo and title are identified in the front matter and the description.</p>

<p>For example, we will create <code class="language-plaintext highlighter-rouge">_cookies/afghan.md</code> for the Afghan cookie and copy the content across:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
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)
</code></pre></div></div>

<h4 id="step-3-repeat-the-step-above-for-the-other-cookies">Step 3: Repeat the step above for the other cookies</h4>

<h4 id="step-4-replace-the-hardcore-cookie-data-in-cookies-html-with-data-from-your-cookie-collection">Step 4: Replace the hardcore cookie data in <code class="language-plaintext highlighter-rouge">cookies.html</code> with data from your cookie collection</h4>
<p>We will replace the hardcoded cookie data in <code class="language-plaintext highlighter-rouge">cookie.html</code> with your cookie collection data. The collection documents will be available to us at <code class="language-plaintext highlighter-rouge">site.*collection_name*</code>, in this case, it is <code class="language-plaintext highlighter-rouge">site.cookies</code>.</p>

<p>Iterate over your documents and output the data:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: page
title: Cookies
---

</code></pre></div></div>
<p>Please kindly note that you need to restart your Jekyll server to take all changes into application.</p>

<h3 id="output-collection-documents-as-pages">Output collection documents as pages</h3>
<p>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.</p>

<h4 id="step-1-add-the-output-true-flag-to-the-collection-configuration">Step 1: Add the <code class="language-plaintext highlighter-rouge">output: true</code> flag to the collection configuration</h4>
<p>Please add an <code class="language-plaintext highlighter-rouge">output: true</code> flag to the collection configuration in <code class="language-plaintext highlighter-rouge">_config.yml</code>. Then, there will be a page generated by Jekyll for every document:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>collections:
  cookies:
    output: true
</code></pre></div></div>

<h4 id="step-2-remove-content-and-image">Step 2: Remove content and image</h4>
<p>Remove the content and image in <code class="language-plaintext highlighter-rouge">cookies.html</code>. The <code class="language-plaintext highlighter-rouge">&lt;h2&gt;</code> will be linked to the generated document page. The URL is available to us at <em>document</em>.url:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: page
title: Cookies
---

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

<h4 id="step-3-create-a-layout-for-the-documents">Step 3: Create a layout for the documents</h4>
<p>We will create <code class="language-plaintext highlighter-rouge">_layouts/cookie.html</code> with a basic layout:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
layout: page
---
&lt;div class="cookie"&gt;
  &lt;h2&gt;&lt;img src="" alt="page.title" /&gt;Use Collections on your Site&lt;/h2&gt;

  &lt;div class="blog-post spacing"&gt;
    &lt;p&gt;For every e-commerce site, the photo &lt;a href="https://avada.io/shopify/gallery/"&gt;galleries&lt;/a&gt; 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 &lt;strong&gt;how to show a photo gallery on your site&lt;/strong&gt; will be a great help for your website.&lt;/p&gt;

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

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

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

&lt;h3 id="the-front-matter-method"&gt;The Front Matter method&lt;/h3&gt;

&lt;p&gt;This is the most suitable way for you to add the photo gallery on one page.&lt;/p&gt;

&lt;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"&gt;Step 1: Create &lt;code class="language-plaintext highlighter-rouge"&gt;photo-gallery.html&lt;/code&gt; and add an array with image data {#step-1-create-photo-gallery.html-and-add-an-array-with-image-data}&lt;/h3&gt;

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

&lt;div class="language-plaintext highlighter-rouge"&gt;&lt;div class="highlight"&gt;&lt;pre class="highlight"&gt;&lt;code&gt;
---
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
---

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id="step-2-loop-over-the-array"&gt;Step 2: Loop over the array&lt;/h3&gt;

&lt;p&gt;After getting the data in front matter, in order to output the images in a grid, you need to loop over the array.&lt;/p&gt;

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

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id="step-3-add-some-css"&gt;Step 3: Add some CSS&lt;/h3&gt;

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

&lt;p&gt;&lt;img src="https://i.imgur.com/rDoC0jf.png" alt="photo gallery" /&gt;&lt;/p&gt;

&lt;h3 id="step-4-adjust-the-functionality"&gt;Step 4: Adjust the functionality&lt;/h3&gt;

&lt;p&gt;If you want to reorder items and extend the structure to adjust the functionality, add a link field to the array.&lt;/p&gt;

&lt;div class="language-plaintext highlighter-rouge"&gt;&lt;div class="highlight"&gt;&lt;pre class="highlight"&gt;&lt;code&gt;
...
- image_path: /images/cakes/lemon-cake.jpg
  title: Lemon Cake
  link: /lemon-cake.html
...

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;After that, you need to  output the link in an &lt;code class="language-plaintext highlighter-rouge"&gt;a&lt;/code&gt; when outputting the images&lt;/p&gt;

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

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id="the-collection-method"&gt;The Collection method&lt;/h3&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h3 id="step-1-create-a-photo_gallery-collection"&gt;Step 1: Create a &lt;code class="language-plaintext highlighter-rouge"&gt;photo_gallery&lt;/code&gt; collection&lt;/h3&gt;

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

&lt;div class="language-plaintext highlighter-rouge"&gt;&lt;div class="highlight"&gt;&lt;pre class="highlight"&gt;&lt;code&gt;
---
image_path: /images/cakes/lemon-cake.jpg
title: Lemon Cake
---

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id="step-2-iterate-over-the-photo_gallery-collection"&gt;Step 2: Iterate over the &lt;code class="language-plaintext highlighter-rouge"&gt;photo_gallery&lt;/code&gt; collection&lt;/h3&gt;

&lt;p&gt;To iterate over the &lt;code class="language-plaintext highlighter-rouge"&gt;photo_gallery&lt;/code&gt; collection, you can use liquid.&lt;/p&gt;

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

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id="step-3-add-a-weight-variable"&gt;Step 3: Add a &lt;code class="language-plaintext highlighter-rouge"&gt;weight&lt;/code&gt; variable&lt;/h3&gt;

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

&lt;div class="language-plaintext highlighter-rouge"&gt;&lt;div class="highlight"&gt;&lt;pre class="highlight"&gt;&lt;code&gt;
---
image_path: /images/cakes/lemon-cake.jpg
title: Lemon Cake
weight: 1
---

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id="step-4-order-the-collection-documents"&gt;Step 4: Order the collection documents&lt;/h3&gt;

&lt;p&gt;Finally, before outputting the photos, you have to order the collection documents by the &lt;code class="language-plaintext highlighter-rouge"&gt;weight&lt;/code&gt;.&lt;/p&gt;

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

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;

&lt;p&gt;With this detailed tutorial on &lt;strong&gt;how to show a photo gallery on your site&lt;/strong&gt;, 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 &lt;a href="http://sachinchoolur.github.io/lightslider/"&gt;lightSlider&lt;/a&gt;, it expects the elements in a simple &lt;code class="language-plaintext highlighter-rouge"&gt;&amp;lt;ul&amp;gt;&lt;/code&gt; structure in the HTML. I hope this article has been helpful to you, you can check out our other articles on &lt;a href="https://avada.io/shopify/devdocs/catalog/"&gt;catalog&lt;/a&gt; if you want to learn more about this topic.&lt;/p&gt;

  &lt;/div&gt;
&lt;/div&gt;
</code></pre></div></div>

<p>Then we can set the cookie layout to every document:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
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)
</code></pre></div></div>

<p>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:</p>

<p><img src="https://d1qmdf3vop2l07.cloudfront.net/quiet-lily.cloudvent.net/compressed/809d6f9a024403c5f52e67bc8eff757b.png" alt="1" /></p>

<p><img src="https://d1qmdf3vop2l07.cloudfront.net/quiet-lily.cloudvent.net/compressed/af34f86656fe7a520ea4508c373d7bf3.png" alt="2" /></p>

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

<p>So that’s how you <strong>use collections on your site.</strong> 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 <a href="https://avada.io/shopify/devdocs/catalog/">catalog</a> and <a href="https://avada.io/shopify/devdocs/collection-pages/">collection pages.</a></p>

Then the admins can add the layout in _posts/2016-04-03-chocolate-chip-cookies.md and _posts/2016-04-03-chocolate-chip-cookies.md.

---
layout: posts
---
...

create the posts in Markdown and publish them as a blog in Shopify 3

Step 4: Run date filter

To fix the date, the users can use this format

...
<p>February 17, 2019</p>
...

create the posts in Markdown and publish them as a blog in Shopify 4

Conclusion

By very simple steps above in this tutorial How to link to related posts on a blog in Shopify, the Shopify store owners can create the powerful content linkings that will boost their sales effectiveness and contribute their valuable customer’s loyalty. Therefore, it is easy for Shopify sellers to drive their sales through built-in content. After this tutorial, the online traders can read more about blog posting through this article How to link to the next and previous posts on a blog in Shopify.

Comments for How to create the posts in Markdown and publish them as a blog



Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up