Effectively displaying the latest updates and news for your customers is important on Shopify. This article introduces how to use Shopify's blog feature to implement a news list for free, without using an app. We'll walk through a simple, practical implementation method using HTML and CSS source code, step by step.
Output
The source code introduced here is HTML and CSS for implementing a news list section on your website.
The news list displays up to 5 of your latest blog posts as news items, each including a title and publish date. If there are 6 or more blog posts, a "View more" button is displayed, and clicking it takes you to the news list page.
See the actual news list display at the link below.
News List on a Computer
News List on a Smartphone
Preparation
Create a blog for your news list using Shopify's blog feature, and copy its handle ID.
The handle ID is the highlighted part in the attached image.
Source Code
HTML Code
<div class="news-section">
<h2 class="news-title">News</h2>
<ul class="news-list">
{% for article in blogs['corporate'].articles limit: 5 %}
<li>
<span class="date">{{ article.published_at | date: "%Y.%m.%d" }}</span>
<a href="{{ article.url }}" title="{{ article.title }}">
<span class="title">{{ article.title | truncate: 50, '...' }}</span>
</a>
</li>
{% endfor %}
</ul>
{% if blogs['corporate'].articles.size > 5 %}
<div class="more-link-wrapper">
<a href="{{ blogs['corporate'].url }}" class="more-link">View more</a>
</div>
{% endif %}
</div>
- For "corporate" in blogs['corporate'], enter the handle ID of the blog you copied during preparation.
- To change the number of news items displayed, change the number "5" in the code below to the number of items you want to display
- {% for article in blogs['corporate'].articles limit: 5 %}
- {% if blogs['corporate'].articles.size > 5 %}
CSS Code
.news-section {
text-align: center;
}
.news-title {
text-align: center;
}
.news-list {
display: inline-block;
text-align: left;
max-width: 1200px;
}
.news-list li {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.news-list li:last-child {
border-bottom: none;
}
.news-list .date {
font-size: 14px;
color: #888;
margin-right: 20px;
min-width: 80px;
}
.news-list a {
color: #333;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news-list a:hover .title,
.news-list a:focus .title {
text-decoration: underline;
}
.more-link {
display: inline-block;
padding: 6px 24px;
background-color: #ffffff;
color: #000;
text-decoration: none;
border-radius: 25px;
font-size: 16px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
border: 1px solid #000;
margin-top: 10px;
}
.more-link:hover {
background-color: #f9f9f9;
}
@media screen and (max-width: 480px) {
.news-list {
max-width: 100%;
padding: 15px;
}
.news-list li {
flex-direction: column;
align-items: flex-start;
}
.news-list .date {
margin-right: 0;
margin-bottom: 5px;
}
.news-list .title {
white-space: normal;
overflow: visible;
text-overflow: initial;
}
}
- Feel free to customize the CSS code to match your own design preferences.
How to Insert the Code Into Your Shopify Theme
This section explains how to insert the source code into the Dawn theme using the theme editor.
1. Go to Online Store > Themes
2. Click Customize on the Shopify theme where you want to insert the source code
3. In the theme editor, go to the page where you want to insert the source code
4. Click "Add section"
5. Add a section block named "Custom Liquid"
6. Insert your HTML code into the Liquid code within "Custom Liquid"
7. Insert your CSS code into the custom CSS within "Custom Liquid"
※ Custom CSS has a 500-character limit, so if it doesn't fit, add it to the Liquid code within "Custom Liquid" in the format [<style> CSS code </style>] instead.
8. Click "Save" at the top right of the screen
In Closing
This article introduced how to use Shopify's blog feature to display a news list. Using this feature lets you clearly provide the latest information to your customers. Use the code introduced in this article as a base, and customize it to match your own store's design.
Shopify's blog feature can be used for many purposes beyond displaying a news list. For example, it can also be used to introduce new products, share messages from your store, and announce events. We encourage you to make good use of Shopify's blog feature to enrich your communication with customers.
The blog article below introduces ways to make use of Shopify's blog feature. Please use it as a reference.
