Custom Blog Post Section in Shopify Dawn Theme

Step 1: Access the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme (e.g., Dawn), click on Actions, then Edit code.

Step 2: Create a New Section

1. In the Sections directory, click Add a new section.
2. Name the section custom-blog-posts and click Create section.

Step 3: Add Code to the New Section

Add the following code to your custom-blog-posts.liquid file:

{% schema %}
{
  "name": "Custom Blog Posts",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "Select Blog"
    },
    {
      "type": "number",
      "id": "posts_to_show",
      "label": "Number of posts to show",
      "default": 3,
      "min": 1,
      "max": 10
    }
  ]
}
{% endschema %}

<section class="custom-blog-posts-section">
  <div class="blog-posts-wrapper">
    {% if section.settings.blog != blank %}
      {% assign blog_handle = section.settings.blog %}
      {% assign posts_to_show = section.settings.posts_to_show | default: 3 %}
      {% assign blog = blogs[blog_handle] %}
      
      {% if blog != blank %}
        <h2>{{ blog.title }}</h2>
        <ul>
          {% for article in blog.articles limit: posts_to_show %}
            <li class="blog-post">
              <a href="{{ article.url }}" class="blog-post__title">{{ article.title }}</a>
              <p class="blog-post__date">{{ article.published_at | date: '%B %d, %Y' }}</p>
              <div class="blog-post__excerpt">{{ article.excerpt | strip_html | truncate: 150 }}</div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p>No articles found.</p>
      {% endif %}
    {% else %}
      <p>Please select a blog to display posts.</p>
    {% endif %}
  </div>
</section>

<style>
.custom-blog-posts-section {
  padding: 20px;
  background-color: #f9f9f9;
}

.blog-posts-wrapper h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.blog-posts-wrapper ul {
  list-style-type: none;
  padding: 0;
}

.blog-posts-wrapper .blog-post {
  margin-bottom: 20px;
}

.blog-posts-wrapper .blog-post__title {
  font-size: 1.5em;
  color: #333;
  text-decoration: none;
}

.blog-posts-wrapper .blog-post__title:hover {
  text-decoration: underline;
}

.blog-posts-wrapper .blog-post__date {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 10px;
}

.blog-posts-wrapper .blog-post__excerpt {
  font-size: 1em;
  color: #555;
}
</style>

Step 4: Add the Section to a Template

1. In the Templates directory, open the template where you want to include the blog posts section (e.g., index.json for the homepage or page.json for a custom page).
2. Add the custom-blog-posts section to the desired location within the template.

Example for index.json:

{
  "name": "Home",
  "sections": {
    "main": {
      "type": "main-collection",
      "settings": {}
    },
    "custom-blog-posts": {
      "type": "custom-blog-posts"
    }
  },
  "order": [
    "main",
    "custom-blog-posts"
  ]
}

Step 5: Configure the Section in the Theme Customizer

1. Go back to your Shopify admin panel.
2. Navigate to Online Store > Themes, and click on Customize for your theme.
3. In the theme customizer, add the new Custom Blog Posts section to your desired page (e.g., the homepage).
4. Select the blog from which you want to display posts.
5. Set the number of posts to display.
6. Save your changes.

Summary

By following these steps, you can create a custom blog post section in the Shopify Dawn theme:

1. Create a new section for displaying blog posts.
2. Add Liquid and HTML to dynamically pull and display blog posts.
3. Style the section with CSS for a better visual appearance.
4. Include the section in a template and configure it in the theme customizer.

This approach allows you to dynamically showcase recent blog posts on your Shopify store, enhancing the content engagement with your visitors.

4o