[Shopify] ブログサイドバーにピックアップおすすめ記事を表示させる

October 11, 2020

Currently, the sidebar of the blog post contains

Profile
Category List
Archive

I wanted to put recommended articles that I picked up myself here.

The image is like this. (Each article can be edited from the customize screen.)

shopify おすすめ記事表示　ブログ

You can pick up any articles you like and display them.

Effect of recommended articles

When visitors come to a blog post from a search engine, we want them to look at other posts as well, if possible. It is natural to think in this way.

However, if there are no links to other articles in the displayed blog post, the user will leave the site immediately.

First of all

What articles are available on the site?
What are the most popular (recommended) articles?

The effect is expected to be to increase the time spent on the site by properly listing and presenting the information to the user.

Code for displaying recommended articles

Now, let's start creating the code to display the pickup (recommended) articles.

<! -- Pickup articles -->.

{% for block in section . blocks %}

{% assign article = = articles [ block . settings . article_chosen ] %}

< a href = " {{ article . url }} " >

< center >

< img class = "pickup-articles-image" src = " {{ article . image | img_url: 'medium'. }} " alt = "" >

</ center >

< p class = "pickup-articles-title" >{{ article . title }}</ p >

</ a >

{% endfor %}

< style >

.pickup-articles-image {

width : 80% (%) ;

margin : 10px auto ;

}

.pickup-articles-title {

width : 90% ;

margin : auto ;

padding-bottom : 20px ;

}

</ style >

{% schema %}

{

"name". : {

"en" : { : "pickup articles".

"class". : "pickup-articles". ,

"settings". : [],

"blocks". : [

{

"type". : "text_block" ,

"name". : {

"ja". : "Article".

"settings". : [

{

"type". : "article". ,

"id". : "article_chosen" ,

"label". : {

"en". : "Article".

}

]

}

"presets". : [].

}

{% endschema %}

Create a new section and copy and paste this.

I named it "pickup-articles.liquid" and saved it!

Then, every time, where you want it to appear, you can use the

{% section 'pickup-articles' %}

to display the recommended articles! (Still needs to be edited from the customize screen.)

Select Recommended Articles from the Customize screen.

Now that we have finished editing the code side, we can now select the articles we want to display from the admin screen.

Admin → Online Store → Themes → Customize the appropriate theme.

After pressing the Customize button, go to the page where you inserted the pickup-articles.liquid you just created.

I inserted it in the sidebar of a blog post, so open the appropriate blog post. You should see a section called "pickup articles" in the customization screen.

Shopify ブログ記事セクション　カスタマイズ画面　おすすめ記事

(If you don't see it, you may be embedding in the wrong place or on the wrong page.)

) When you open this pickup articles section, you will be able to add articles.

shopify 記事

You can add as many articles as you like without limit, but if it is too long, it will be difficult to scroll through, so keep it to a minimum.

The article selected here is

Shopify おすすめ記事　サイドバー　追加

The image and title of the recommended article will be displayed as shown here.

If you want to change the style, you can do so in the <style> tag, and you can edit the CSS from there. Feel free to customize it! (By the way, I edit the title "Recommended Articles" as well as the frame, etc. separately in HTML/CSS, so they do not necessarily have the same look and feel.)

Displaying Pickup Recommended Articles in Shopify Summary

That's it, how to display recommended blog posts!

You are of course free to use the code above, but if you would like to share it on social networking sites, etc., before using it, we would be very pleased and encouraged.

And I hope that by using this collection of recommended articles, more visitors will read more articles.

Thank you for reading to the end! Well, have a great day!