[Shopify] ブログサイドバーにプロフィール画像を追加する

This time, we will add a profor to the blog sidebar we created previously.

(previously created blog sidebar)

https://ec-penguin.com/blogs/shopify/sidebar-categories-archives

We will add a "Profile" section to this blog sidebar. Now we'll know what kind of people are blogging!

As an image, the profile should look something like this.

↓↓↓↓

(Please note that the headings are styled so they will not be exactly the same...)

Let's get started on creating your profile.

Create the code for your profile

First, paste the original code for the profile.

This is the original code.

There are three places to edit.

1. The image URL for the profile
2. My profile text
3. Detailed profile page link URL

These are

Uploading Images from Shopify Files

Next, upload the image from the administration screen → Settings → Files.

Paste the URL into the "1. Profile image URL" section above.

Your profile image is now set!

Fill in your profile details

Next, let's describe your profile text.

In the above code

"I'm Guin, a front-end engineer who sends Shopify information from Okinawa."

will appear as your profile text.

So please delete the above and replace it with your own profile text. This is the part that visitors to your blog will always see (especially on a PC), so be as detailed as possible.

I will rewrite my profile text later, too.

I want to make the profile text line break.

As your profile text becomes longer, you may want to break lines. In this case, you can insert a <br> tag in the section where you want the line to break.

You can see some <br> tags in the above code.

Link to Profile Page

Finally, create a link to your profile page.

Simply take the link to your profile page and paste it into the "3. Detailed profile page link URL" section.

The overall code looks like this.

By the way, you can change the color in the background-color, color section in the bottom style tag.

Create and embed a new snippet

Then copy and paste the above code to create a new snippet.

The instructions for creating a new snippet are almost the same as those in the section below.

https://ec-penguin.com/blogs/shopify/introduction-to-sections

By the way, I named the new snippets "sidebar-profile.liquid".

Then, add the following to the location where you want to embed the

and your profile is now safely displayed!

Adding a Profile Image to the Sidebar of a Shopify Blog Summary

How was the above?

I had created the profile page itself, but I wanted to create a simple profile for each article, so I was very satisfied with the results.

I still feel that I need to adjust the style and modify the profile text, but it's the type of blog that I'll be working on a little bit at a time to bring it closer to perfection, so I'll take it as a good thing.

I would be happy if I could connect with other bloggers in the future through Twitter, etc., as more and more of them become bloggers on Shopify as well.

Have a great day!