This time, we will add a profor to the blog sidebar we created previously.
(previously created blog sidebar)
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.
- The image URL for the profile
- My profile text
- Detailed profile page link URL
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.
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!