Knowledgebase: Marketing

How do I use the "Frontend - Blog Post" function?

 

The following is a technique that allows you to list your blog postings within your store's home page to instantly greet your visitors with blog information. This will require editing the HTML coding of your store's home.html template.

Please Note
The following information is being provided solely as a courtesy. Please understand that Shift4Shop support is neither qualified nor trained to provide HTML editing support. If you are uncomfortable with editing HTML, we also have design services available which can provide this service for you. Please contact our Support Team for more information.

The first step in the process is to retrieve a copy of your store's home.html template. To do this:

  1. FTP into your site's FTP server and navigate to web/assets/templates/[theme folder]

Tip
In the above path, [theme folder] is whatever design theme your store happens to use. If you are not sure which theme you're using, go to Settings >Design >Themes & Styles and view the "Selected Theme" at the top left hand side of the page.

Your theme folder will be named the same, so in the above example the FTP path would be web/assets/templates/v40001

  1. In your theme folder, locate and download your store's home.html template.

Alternative steps
Some theme folders may not have a home.html template by default. Therefore, if you don't have this file in your specific theme folder, you can download it from the common folder using these steps instead.

  1. FTP into your site's FTP server and navigate to web/assets/templates/common-html5
    (If you're using a non html5 theme, use the common folder)
  2. In the common-html5 folder, locate and download the home.html template to your desktop
  1. Open your downloaded home.html file in your HTML editing program, notepad.exe or your favorite text editor.
  2. Using the program's search function, look for the code <!--END: CATEGORY_HEADER->
  3. Immediately after this code in the home.html file, copy/paste the following HTML

<!--START: blog_post->
<div width="100%">
<h1><a href="[pagename]" style="font-size: 28px; line-height: 28px;">[subject]</a></h1>
<div class="item">Posted by [post_author] on [post_date]</div>
<span>[post]</span>
<!--START: read-more-><a href="[pagename]" title="[subject]">[blog_read-more]</a><!--END: read-more->
</div>
<!--END: blog_post->

  1. Save your edited home.html file
  2. FTP back into your site's FTP server and navigate to web/assets/templates/[theme folder] as explained earlier.
  3. Upload the newly edited home.html file to your theme folder.

The hard part's done. Now you will need to clear your store's cache in order to see the changes.

  1. Log into your Shift4Shop Online Store Manager
  2. Go to Settings >General >Store Settings
  3. Click on the "General" tab found along the top
  4. Look to the bottom right of the page and click on the clear cache button.

Your blog posts should now show up on your store's home page.

Important:
Please be aware that the coding listed above absolutely has to be placed into home.html template in the manner described above.

Alternate methods such as placing it into the global header (Content >Header and Footer), or through the Titles and Content section (Content >Titles & Content) will NOT work.

Furthermore, when adding the code onto your home.html template, please be sure to add it directly after the <!--END: CATEGORY_HEADER-> code as this functionality will not work within the category header section either.


If you are using a CORE theme, you can simply use the "Homepage Blogs" settings found within the Blog Settings page in Content > Blog section of your Shift4Shop Online Store Manager.


Help Desk Software by Kayako fusion