How to Customize the Template for Blog Posts – Convertify Support Center

Each blog on your website (and it is possible to create several separate blogs) is comprised of 2 parts:

The blog home/index page (which shows previews of all the posts within that blog), and
All of the individual blog post pages.

This tutorial teaches you how to customize the template for the individual blog posts. (Click here for instructions on how to customize the blog home/index page instead.)

'Blog Post' Section

To customize the page template for your blog posts, select 'Blog Posts > Default blog post' in the navigation bar in the top panel of Theme Editor.

When the page loads, you'll see that the left panel includes a section called 'Blog post'. When you click on the 'Blog post' section title in the left panel, the right panel will show the following settings/options:

Post title font size - Use the slider to choose the font size of the post title text.
Post title & info alignment - Use the dropdown to indicate whether you want the post title text (along with other post info, if activated below) to be left- or center-aligned.
Post title and info width - Choose what percentage of the page width should be used (from 50% to 100%, in 10% increments) to display the post title and other post information (i.e. date, author and/or share button). If you choose a percentage less than 100%, the content will be centered on the page (i.e. with an equal amount of space to the left and to the right of the content).
Show date - Tick this box if you want the page to show the date the post was published.
Show author - Tick this box if you want the page to show the name of the post's author.
Show top 'Share' button - Tick this box if you want to show a 'Share' icon and textual link at the top of the page (before the body of the post). When a customer clicks on the 'Share' icon/text, a small box will appear showing the page URL and a 'Copy' button, making it easy for the customer to share the link to the blog post.
Featured image position - Convertify assumes that your blog posts' featured images are banner-shaped (much wider than they are tall). It will automatically zoom and re-size images with other dimensions, but you'll have best results with banner-shaped images. Use the dropdown menu to choose from these 3 options:
1. Hide featured image - Choose this option if you don't want to show the featured image at the top of the page. (Remember, you can always embed images into the body of the blog post if you'd like.)
2. Top banner (overlay title & post info) - Choose this option if you want the blog post's title and other blog info to be overlaid on top of the image. Overlay settings can be specified below.
3. Top banner (title & post info below) - Choose this option if you want the featured image banner to be shown at the very top of the page with the post title and other post info below it.
Image size - If you chose the top banner overlay option above, we strongly recommend choosing the 'Fit to text' option for the image size. Otherwise, the banner image may not be tall enough to fit all of the content meant to go over the top of it. The 'Small' banner option is 250px tall, the 'Medium' option is 400px tall, and the 'Large' option is 550px tall.
Activate parallax effect - Tick this checkbox if you want the featured image and the textual content on top of it to scroll at different rates (i.e. different speeds) as visitors scroll down on the page.
Overlay text color - Unlike the next 2 settings, this setting is only used if you selected the top banner overlay option. Use the color selector tool to choose the color of the post title and other post information that will be overlaid on top of the image.
Overlay color - Regardless of whether you chose the option to overlay the post title and other post info over the featured image, you can still use this setting (in conjunction with the next one) to overlay a color over the image. Use the color selector tool to choose what color you want to overlay over the top of the image. You'll choose the opacity of the selected color in the next setting (which may -- if you choose 0% opacity -- make this color selection irrelevant).
Overlay opacity - Choose your preferred opacity for the overlay color chosen just above. If you want the image to appear exactly as-is, simply select 0% as the opacity (which makes the color selection above irrelevant). An opacity of 100% will completely hide the image behind the color, so you likely won't want to select 100%. If you choose black (#000000) as the 'Overlay color' above and then apply an opacity of 10-25%, it will make the image appear a fair amount darker.
Body alignment - Use the dropdown to choose whether you want the post's body text (pulled from Shopify) to be left- or center-aligned.
Body width (desktop) - Use the dropdown to choose whether you want the post's body content to use 50%, 75% or 100% of the page width on desktop devices. (Mobile devices always use 100% of the page width.)
Show bottom 'Share' button - This block shows a 'Share' icon and textual link (which can be customized in the right panel). When a customer clicks on the 'Share' icon/text, a small box will appear showing the page URL and a 'Copy' button, making it easy for the customer to share the link to the blog post.

Add Additional Sections

To add a section of content to the template of the blog post page, simply click the 'Add section' button in the left panel. Keep in mind that you are editing the blog post page template. Any new sections of content you add will appear on ALL blog posts.

Following is the list of Convertify's universal sections you can choose from when you click the 'Add section' link:

You will use the left panel to create all of the sections (i.e. page components) you want to appear on all of your blog posts.

You can reorder the sections by hovering over the section you want to move and then using the move icon to drag & drop it to its desired location. If you want to temporarily hide a section (but not delete it), hover over the section title and click on the eye icon that appears. (To later reactivate that section, just click on the stricken-through eye icon.) To permanently delete a section, click the section title in the left panel and then click the 'Remove section' link at the bottom of the right panel.