Minimal Theme - Page To Show Blog Topics

Solved
Highlighted
Tourist
22 0 3

I'm trying to add a page that I can add to my main menu that will show all my blog topics & if you click on the each topic, then the various blog posts come up, can anyone advise me how to do this?

0 Likes
Highlighted

Hello 

Follw this steps this will help you.

1.png2.png3.png

 

Add below code on that template file

{% comment %}

Blog dispaly

{% endcomment %}
{% assign featuredBlogs = 'works,news' | split:',' %}

{% comment %}
Set the featuredArticles variable to false by default.
{% endcomment %}
{% assign featuredArticles = false %}

{% comment %}
Grab the last 50 (default) articles from each Blog. Add the articles to the featureArticles variable.
{% endcomment %}
{% for featuredBlog in featuredBlogs %}
	{% if blogs[featuredBlog].articles %}
		{% if featuredArticles %}
			{% assign featuredArticles = featuredArticles | concat:blogs[featuredBlog].articles %}
		{% else %}
			{% assign featuredArticles = blogs[featuredBlog].articles %}
		{% endif %}
	{% endif %}
{% endfor %}

{% comment %}
If featuredArticles is not false we should have articles to show - so let's do it!
{% endcomment %}
{% if featuredArticles %}
	{% assign featuredArticles = featuredArticles | sort:'published_at' | reverse %}

	{% comment %}
	Now a quick example of showing the latest 10 articles from our master article list
	{% endcomment %}

	{% for article in featuredArticles limit:10 %}
		<p><b>{{ article.title }}: </b><br>{{ article.published_at }}</p>
	{% endfor %}

{% endif %}

save.
To aasign page to template:
4.png5.png

To assign page to menu follow this:

m1.pngm2.pngm3.pngm4.pngm5.png

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
242 59 122

Hi @Karen9,

 

I understand that you're trying to add a page that shows all your blog topics, allowing the user to click on a topic. Once a topic is clicked, the relevant blog posts come up. You want to add this page to your main menu.

 

The way to do this is a bit advanced, so feel free to reach out to me if you need further assistance. Here are the basic instructions:

 

Step 1: Create the special "Blogs" linked-list:

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click the Add menu button.
  3. Enter Blogs as the Title.
  4. Repeat the following for each blog category that you want listed:
    1. Click Add menu item.
    2. Click in the Link box and select Blogs from the pop-up menu.
    3. Select the Blog that you want displayed.
  5. Click Save menu.

 

Step 2: Create an alternate page template

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Templates directory, click Add a new template.
  4. Select page as the type option for your new template and enter blogs as the template name.
    Screen Shot 2019-08-28 at 9.15.30 AM.png
  5. Replace the entire contents of the new page template with the following code:
    <div class="grid">
      <div class="grid__item post-large--two-thirds push--post-large--one-sixth">
        <div class="section-header">
          <h1 class="section-header--title">{{ page.title }}</h1>
        </div>
        <div class="rte">
          {% if page.content != blank %}
            {{ page.content }}
            <br>
          {% endif %}
          {% for link in linklists.blogs.links %}
            {% assign blog = link.object %}
            <h2><a href="{{ blog.url }}">{{ blog.title }}</a></h2>
          {% endfor %}
        </div>
      </div>
    </div>
  6. Click Save.

 

Step 3: Create a new Blogs page

  1. From your Shopify admin, go to Online Store > Pages.
  2. In the webpage editor, enter Blogs (or whatever you prefer) as the Title and leave Content blank.
  3. In the Template box, select page.blogs from the dropdown selector.
    Screen Shot 2019-08-28 at 9.07.20 AM.png
  4. Click Save.

 

Step 4: Create a new menu item

  1. From your Shopify admin, go to Online Store > Navigation.
  2. On the Navigation page, click the title of the menu that you want to edit.
  3. Click Add menu item.
  4. Enter a title for the menu item. This title displays in the menu.
  5. Click the Link field, and then select the Pages link type.
  6. Select your new Blogs page.
  7. Click Save menu.

 

Go test it out! You may need to add some extra code to the page, to make it look how you want – but that's a separate issue altogether.

 

Let me know if this solves your problem or if you need further help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

Highlighted
Tourist
22 0 3

thanks both, will try it out shortly, hopefully I'll be able to do it 

0 Likes
Highlighted
Tourist
22 0 3

Hi BrianAt Work, 

 

have just tried your step by step guide, but I hit a snag. When I get to step 3 & add a page, the 'page.blogs' is not there in the drop down box, is this because I haven't yet 'published' the theme?

0 Likes
Highlighted
Shopify Partner
242 59 122

This is an accepted solution.

Hi @Karen9,

 

When I get to step 3 & add a page, the 'page.blogs' is not there in the drop down box, is this because I haven't yet 'published' the theme?

Yes, that's why the page.blogs is missing. So long as you backup your main, published theme, there's no risk in making the changes directly to it.

 

Before you customize your theme:

  • Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

 

Let me know how it goes!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

Highlighted
Tourist
22 0 3

BrianAtWork!!! You are an absolute star!! just what I wanted, have no idea why I needed to publish it to make it work, but it does and I'm incredibly grateful, thanks again

Highlighted
Tourist
4 0 0

Hi @BrianAtWork

 

this step by step guide works easily and perfectly. Thank you!

 

Is there a way to add images to the blogs page too? 

 

Here is what I have created using your guide: https://canadianbaristainstitute.com/pages/blogs

 

Would like for that to have images of the blog.

 

Thanks, Jamie

0 Likes
Highlighted
New Member
1 0 0

I try this one, but it not help to me...

I think it not same problem.

I have 6 different blogs and in main menu, if choice "blog" show all articles and if choice any of them show only choiced blog.

Later thing work fine but how I can show All blogs same time?

I'm sorry that in Finnish...

HPuurti_0-1603218162868.png

 

HPuurti_1-1603218205850.png

 

0 Likes