Shopifyでは、お客様への新着情報やお知らせを効果的に表示することが重要です。本記事では、Shopifyのブログ機能を活用して、アプリを使用せずに無料でお知らせ一覧を実装する方法をご紹介します。HTMLとCSSのソースコードを使用した、シンプルかつ実用的な実装方法をステップバイステップで解説していきます。
アウトプット
今回紹介するソースコードは、ウェブサイトのお知らせ一覧セクションを実装するためのHTMLとCSSです。
お知らせ一覧は、最新のブログ記事をお知らせ情報として最大5件まで一覧表示し、各お知らせにはタイトルと公開日が含まれています。また、ブログ記事が6件以上存在する場合は「もっと見る」ボタンを表示し、ボタンをクリックすると、お知らせ一覧ページに遷移します。
お知らせ一覧の実際の表示は、以下のリンクからご確認ください。
パソコンで確認した際のお知らせ一覧
スマートフォンで確認した際のお知らせ一覧
事前準備
Shopifyのブログ機能よりお知らせ一覧用のブログを作成し、ハンドルIDをコピーしてください。
ハンドルIDは添付画像のハイライトされた部分になります。
ソースコード
HTMLコード
<div class="news-section">
<h2 class="news-title">お知らせ</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">もっと見る</a>
</div>
{% endif %}
</div>
- blogs['corporate']のcorporateには、事前準備にてコピーしたブログのハンドルIDを入力してください。
- お知らせ一覧の表示件数を変更したい場合は下記のコードの「5」の数字を表示したい件数へ変更してください
- {% for article in blogs['corporate'].articles limit: 5 %}
- {% if blogs['corporate'].articles.size > 5 %}
CSSコード
.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;
}
}
- CSSコードはご自身の好みのデザインへカスタマイズしてご利用ください。
Shopifyテーマへコードを挿入する方法
本章ではテーマエディタを利用して、Dawnテーマにソースコードを挿入する方法を紹介します。
1. オンラインストア > テーマの順に遷移
2. ソースコードを挿入したいShopifyテーマのカスタマイズをクリック
3. テーマエディタでソースコードを挿入したいページへ遷移
4. 「セクションを追加」をクリック
5. 「カスタマイズされたLiquid」という名称のセクションブロックを追加
6. 「カスタマイズされたLiquid」内のLiquidコードにHTMLコードを挿入
7. 「カスタマイズされたLiquid」内のカスタムCSSにCSSコードを挿入
※ カスタムCSSには500文字のサイズ制限がありますので、もし挿入できない場合は、【<style> CSSコード</style>】の形式で、「カスタマイズされたLiquid」内のLiquidコードに追記してください。
8. 画面右上の「保存」をクリック
最後に
本記事では、Shopifyのブログ機能を活用してお知らせ一覧を表示する方法を紹介しました。この機能を利用することで、お客様に最新の情報を分かりやすく提供することができます。本記事で紹介したコードをベースに、ご自身のショップのデザインに合わせてカスタマイズしてみてください。
Shopifyのブログ機能は、お知らせ一覧の表示以外にも様々な用途で活用できます。例えば、新商品の紹介や、ショップからのメッセージ、イベント情報の告知などにも利用可能です。ぜひ、Shopifyのブログ機能を有効活用し、お客様とのコミュニケーションを充実させてください。
下記のブログ記事ではShopifyのブログ機能を活用する方法を紹介しています。ご参考にしてください。
