Spark 1.0

Blog posts

The Blog posts section displays a grid of selected blog posts as a full-width feature.

The Blog posts section can be used on the following page templates:

  • Home page template

  • Collection pages template

  • Product pages template

To learn more about how Shopify blogs work, check out their Writing blog posts article.

Before you add a Blog posts section

For the Blog posts section to display properly, you will need to add featured images to all of your blog posts.

You can do this when adding or editing the blog post. See Shopify's Add an image to a blog post documentation for instructions.

Add a Blog posts section to the home page

To add a Blog posts section:

STEPS

  1. From your Customize theme editor, select Home page from the pages drop-down menu at the top of the screen.

  2. Scroll to the bottom of the home page sections to choose the Add section button.

  3. Choose Blog posts from the list of sections.

    This opens the Blog posts section settings.

  4. Choose whether to Show published date by checking the checkbox.

  5. Use the Columns per row slider to choose to display 2, 3, or 4 blog posts per row.

  6. Add Heading text to display above the section.

  7. (Optional.) Add Subheading text to display beneath the Heading.

  8. Return to the list of Home page sections to find your new Blog post section with the content blocks nested below.

  1. Use the Add article button to select the blog posts you want to display.

  2. Click Save.

Add a Blog posts section to other pages

In addition to the home page, the Blog posts section can be added to the Collection pages and Product page templates.

STEPS

  1. From your Customize theme editor, choose Collections or Products from the drop-down menu at the top of the screen.

  2. Click on the arrow beside Collection features or Product features.

  3. Use the Add block button to select Blog posts.

    This opens the Blog posts section settings.

  4. Use the Select blog button to select the blog posts you want to display.

  5. Use the Columns per row slider to choose to display 2, 3, or 4 blog posts per row.

  6. Add Heading text to display above the section.

  7. (Optional.) Add Subheading text to display beneath the Heading.

  8. Return to the list of Product or Collection features. Use the drag handles to rearrange the order of the blocks:

  9. Click Save.

Settings reference

The following settings are available for the Blog posts section:

Show published date

Display the date your blog post was published below the blog post title.

Columns per row

Choose how many blog posts should be displayed per row. Select between 2 and 4 posts per row.

Heading

Add heading text.

We recommend a title of just a few words long.

Subheading

Add subheading text.

Use the formatting buttons to add bold, italic, and linked text.

Max width of text

Control the width of the subheading text.

Image aspect ratio

Choose to display your blog post images as Square, Landscape, or Portrait.

The default Natural setting will display the original orientation of your images.

Use alternate selection color

Set the background color to the Alternate Section Color as chosen in your Color Settings.

See Spark's Color settings documentation to learn how to set Alternate section colors.