PLEASE HELP! Blog "Header"

New Member
11 0 0

Hi All

I'm really hoping someone can help solve a problem.  That is, I want to put a "intro" above my blog with some text and pictures.  I can think of two ways to do this (but don't know how to do either!):

-put a permanent picture at the top of the blog

-make a post "stick" to always being the first post

 

Can anyone help with either of those solutions, or any other way of doing it?  

I did read a blog post that seems to talk about doing it, but it completely lost me! https://ecommerce.shopify.com/c/shopify-discussion/t/blog-sticky-6401

 

FYI, I'v put the "picture" in as a blog post for now so I can see what it would look like.  You can see it here:

https://www.kidscampingstore.com/blogs/news

Thanks a million!

Glen

 

 

0 Likes
Shopify Partner
46 0 9

In order to add a blog intro/welcome above your actual blog, you'll need to edit your blog template and add the HTML you want right beneath the blog title.

You can add an image but my recommendation would be to use text for the content for SEO purposes (although with text you won't be able to get the text curving around the image like your example without some complex CSS: http://thenewcode.com/916/Wrapping-Text-Around-Circular-Images-With-CSS-Shapes ).

I realize some of this is a bit technical so if anything doesn't make sense, let me know.

Available For Hire For Small Jobs: https://www.dashboardq.com/shopify
1 Like
New Member
11 0 0

Hi DashboardQ

That's appreciated, thanks, and makes sense.  Tb the text wrapping is WAY beyong me!

So, I underdtand the option then of just putting text.  But could you tell me if there is a way / how I could "just" put an image?

 

To explain, I've made an "image" which is actually a png of a PowerPoint, and that  gives me the flexibility to add text and images as needed, all in one actual image.

 

FYI, I do feel I need the images because my plan is to have 4 bloggers (me the campign busienss owner, a camping parent, a campsite owner and a camping kid).  Because it's all based around 4 personalities, I really think images are needed,

 

Thanks again for your help already!

0 Likes
Highlighted
New Member
6 0 0

Hey Glen

Blogging is main part of the website. It can Boost traffic like a rocket.

Now Questioin is what should be the structure of Blog.

It should me User Friendy. Look at the point from user.

Whenever a User land on a website he wants to read the information.

so At the top your menu is looking good just add the border after menus.

then simply start with first Blog (Latest added) heading then image related to it underneath blog short description and a read more button that will land to Blog details page.

This is the basic structure i am sharing. 

Avoid Sticky posts, everybody wants new to look up.

Hope my answer covers your Question.

Thanks

Kbihm Consulting Pvt ltd.

0 Likes
Shopify Partner
46 0 9

Hi Glen,

I was recommending using images and text (I was just mentioning that it would be difficult to get the curve text your image had).

If you just want to add the full image you have (not recommended for a number of reasons, a couple reasons being SEO, search engine optimzation, and the header will be difficult to read on mobile devices).

But this is how you do it. Find your themes blog-template liquid file. Look for the header code. After the closing header block `</header>` you want to add this code:

<div class="blog_intro">
	<img src="https://cdn.shopify.com/s/files/1/1057/5218/articles/Untitled_presentation_900x.png?v=1534544154" alt="Intro Image">
</div>

 

The better, recommended way to do it would be to have images for the blogger and write the text in html. This is just a rough example of how you could do it (you would normally separate out the style code to the themes.scss.liquid file. Hopefully it makes sense (the forum seems to format this code weird):

<div class="blog_intro" style="display: flex">
	<div class="blogger1" style="display: flex">
		<div>
        	<img src="http://placehold.it/150x150" alt="">
        </div>
        <div style="padding: 1em">
            <p><strong>The Camping Business Owner</strong></p>
        	<p>Hi, I'm Glen....</p>
        </div>
	</div>
	<div class="blogger2" style="display: flex">
		<div>
        	<img src="http://placehold.it/150x150" alt="">
        </div>
        <div style="padding: 1em">
            <p><strong>The Camping Kid "Baby H"</strong></p>
			<p>Hello everyone...</p>
		</div>
	</div>
</div>

 

Available For Hire For Small Jobs: https://www.dashboardq.com/shopify
0 Likes