How to Enable The BigCommerce Blog

So when you come into your big commerce store, you've probably already discovered this under storefront web pages, there's an item here that says "blog". And at least right now it's got a red X by it, which means that it should not be showing up in our dynamic menu says built-in blog and it says the blog, which nobody really wants to call their blog anymore. So I am gonna show you how to change it.

So let's do a couple of things. Let's click into the blog, which is really just going to take you to this link right here, storefront blog. And you can see I've already written a couple sample posts out. And the way that we turn the blog on is we just hit this little toggle right there that turns it on, technically, all of the articles were already exposed, they're already in your Sitemap that may already be indexed for Google.

But the overview page itself is what they're referring to here is the blog. And so that is now turned on and active. If this is not toggled, then that overview page does not exist, like it'll be a 404 If you try and go to the address for it.

So one thing I'll show you real quick is, maybe you don't want to call it blog, because that's very, you know, 2005, so let's rename it to something else, I'm going to just call it articles. And you get to this by clicking that three dots, I guess I did a little bit fast, but we'll just call it articles. There's some other settings that you can do in here, like turning on discuss if you want, or messing with your social share settings, but I'm just gonna skip that and click save.

So that renamed our blog overview to be called articles. And we did turn it on, right. So if we come back here to the Web Pages menu, then we can see now articles, it says articles instead of blog now articles here, it's still page type is built in blog, that's not going to change. But now we got this green checkmark, meaning that it should be showing up in our menu.

So let's go to our front end site. And you can see the articles is showing up in our menu, which is great. That means that we can go to the Articles page and see our blogs, which admittedly don't look super great yet. So the biggest, the biggest thing that you're going to want to do to fix this is you're going to want to make these images not like stupid size, right.

So I'm going to show you where to do that real quick. And I'm also going to show you how to take articles out of your menu, because I assume a lot of you guys want your blog page to be active. But maybe you're gonna put the link in the top bar, or the footer or who knows where but you don't want to take up your super valuable Main Menu real estate.

So first of all, let me show you where to how to do that. Or I would recommend, there's really two ways that you can get rid of articles in your menu, you can go into your header files, and actually comment that out. I don't recommend that because you're kind of making a mess in your files, what I would recommend is actually coming in here and using CSS to target that item specifically, and just remove it using CSS, right.

And so if I inspect this, you can see all of the NAV page items, and they all have the same class, so I can't really target them. That way. The anchors within them all have the same class of nav pages action. And so we're a little bit different is they have different area labels. And they should have various labels as part of your ADA compliance.

If you don't have that, you should probably be talking to somebody about ADA stuff. So they have different ARIA labels, and they have different H refs. So I can come in here and hit the plus sign. And it'll try and target Neff pages dash action, which is fine. But I needed to add something to it to make it specific to this link. And I'm going to actually just like select and copy this ARIA label stuff, then I'm going to come back here and do square bracket open, paste that in square bracket closed.

And if I do a background on here, we'll see that kind of proves that I'm actually successfully targeting it. I'm going to leave that for just a second. And I'm going to do display none, which you can see actually took it out of the menu, then go ahead and delete that line that had the background pink. And basically now I just need to take this piece of CSS and paste it into my CSS file, which is pretty easy.

So I'm not going to go over how to paste that in your CSS file, but that is how you target it. Oh, another way to do it if you don't have ARIA labels, which again, you should, is just do the exact same thing but use the h ref property instead.

You can stick this h ref into the brackets and use that as a selector and you can see it's still disappeared. Now gets a little bit more rickety, because if the URL changes, maybe you changed domain, or maybe you change this from being called articles to blog again, and now now it doesn't have the same URL. So this is a little bit more rickety, but totally works as a targeting method.

And this is a way to remove it with just one line of CSS that's super not permanent, and doesn't make a mess in your code. Alright, so the last thing I want to show you is how to make these images bigger. And that's actually really easy. A lot of people look at this blog and think it looks like garbage. And it does.

But the biggest reason is these images, you can do a lot with this and make it actually look pretty good with you know, not too much CSS. But I'm going to show you at least how to make the images bigger, because that'll drive you nuts until you do. So to do this, go into storefront themes. And I'm kind of given you guys some extra stuff in this video. But you're you're going to want to do all this stuff, believe me, click on Customize.

And then once this loads, we're going to click on this little art palette, paint palette, whatever you call these things and go to global. And now this could be a little bit different and your theme and you know some of the sketchier themes out there may not have a setting for this at all. But it is in Cornerstone which really everybody should be using.

And it is in roots, which is a good second choice. And so in here in Cornerstone it's under Global. And we're going to come down until we see blog size of images. And you can see there's a choice for optimized for the theme or specified dimension. So you want to specify dimensions. And you can see the problem here and max width is 190 is nothing.

Let's change that to be 1200. Let's click this little chain thing and say max height 628. And I'm gonna go ahead and click Publish click into it, even just here in the previewer. And you can see it already looks like a million times better, just having bigger images. I don't know why they don't just have bigger images by default, but it is what it is.

So that's just a couple quick things you can do to turn on your blog and make it a little bit more presentable in no time flat. Be sure to leave me a comment let me know what you guys are struggling with. And maybe that'll be my next video and I appreciate you guys being here.

Thanks