Changing list to Grid view for Minimal Theme

Store Design
,
1

Hello Team,

I want to change my website blog from List View to Grid View.

Here’s the link : https://zillis.in/blogs/blog-1

Need Help!

2

@PageFly-Victor

@GemPages

@irene-vintage
@Ollie
@gr_trading

Can you help?

3

Hello @zillis ,

Really appreciate for tagging me in your post. To change your website blog from List View to Grid View, you can:

  • Go to your Online Store → Blog posts → click on the post you want to change
  • Click on the ellipsis (…) icon on the top right corner of the page → Select Edit HTML/CSS
  • Go to Templates folder → blog.liquid file
  • Find the code similar to this:
{% for article in blog.articles %}
  {% include 'article' with article %}
{% endfor %}
  • Replace by this code:

  {% for article in blog.articles %}
    {% include 'article-grid' with article %}
  {% endfor %}
  • Save and preview.

Hope this can help. Let us know if you need anything else.

Regards,

Ali Reviews team.

4

Hello Ali,

blog.liquid has following code.

{% comment %}
The contents of the blog.liquid template can be found in /sections/blog-template.liquid
{% endcomment %}

{% section 'blog-template' %}

blog-template.liquid has following code.

{% paginate blog.articles by 5 %}

  

    

      

        {% comment %}{% include 'breadcrumb' %}{% endcomment %}
        
  
  {% for article in blog.articles %}

          ## {{ article.title }}
          

            
            {% if section.settings.blog_author_enable %}
              •
              {{ article.author }}
            {% endif %}
            {% if article.tags.size > 0 %}
              •
              {% for tag in article.tags %}
                {{ tag }}{% unless forloop.last %} • {% endunless %}
              {% endfor %}
            {% endif %}
          

          {% comment %}
            Add a surrounding div with class 'rte' to anything that will come from the rich text editor.
            Since this is just a listing page, you can either use the excerpt or truncate the full article.
          {% endcomment %}
          
            {% if article.image %}
              {% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
              {% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {%- assign image_alt = article.title | escape -%}
              {% include 'image-style' with image: article.image, width: 845, height: 1024, wrapper_id: wrapper_id, img_id: img_id %}
              

                

                  

                    
                  

                

              

              
            {% endif %}
            {% if article.excerpt.size > 0 %}
              {{ article.excerpt }}
            {% else %}
              

{{ article.content | strip_html | truncatewords: 100 }}

            {% endif %}
          

          

{{ 'blogs.article.read_more' | t }} →

          {% unless forloop.last %}

---

{% endunless %}

        {% endfor %}

        {% if paginate.pages > 1 %}
          
            {% include 'pagination-custom' %}
          

        {% endif %}
      

    

  

  
    {% include 'blog-sidebar' %}
  

{% endpaginate %}

{% schema %}
{
  "name": {
    "da": "Blog",
    "de": "Blog",
    "en": "Blog",
    "es": "Blog",
    "fi": "Blogi",
    "fr": "Blog",
    "hi": "ब्लॉग",
    "it": "Blog",
    "ja": "ブログ",
    "ko": "블로그",
    "ms": "Blog",
    "nb": "Blogg",
    "nl": "Blog",
    "pt-BR": "Blog",
    "pt-PT": "Blogue",
    "sv": "Blogg",
    "th": "บล็อก",
    "zh-CN": "博客",
    "zh-TW": "部落格"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "blog_author_enable",
      "label": {
        "da": "Vis forfatter af blogopslag",
        "de": "Autor eines Blog-Beitrags anzeigen",
        "en": "Show blog post author",
        "es": "Mostrar autor del artículo del blog",
        "fi": "Näytä blogikirjoituksen tekijä",
        "fr": "Afficher l'auteur de l'article de blog",
        "hi": "ब्लॉग पोस्ट का लेखक दिखाएं",
        "it": "Mostra autore articolo del blog",
        "ja": "ブログ記事の執筆者を表示する",
        "ko": "블로그 게시물 작성자 표시",
        "ms": "Tunjukkan pengarang siaran blog",
        "nb": "Vis forfatter av blogginnlegg",
        "nl": "Toon auteur van blogpost",
        "pt-BR": "Exibir autor do post do blog",
        "pt-PT": "Mostrar autor(a) da publicação no blogue",
        "sv": "Visa blogginläggets författare",
        "th": "แสดงผู้เขียนโพสต์บล็อก",
        "zh-CN": "显示博客文章作者",
        "zh-TW": "顯示部落格貼文作者"
      }
    }
  ]
}
{% endschema %}

Need Help.