We've recently relaunched all three of our themes. Watch the launch video here.

Blog posts

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

The Blog posts section
The Blog posts section

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

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:

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

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Scroll to the bottom of the home page sections to choose the Add section button.

    Add section button
    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.

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  9. Use the Add article button to select the blog posts you want to display.

  10. Use the Save button in the top-right corner when you are finished editing.

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.

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

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  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:

    Shopify content block drag handles
    Shopify content block drag handles
  9. Use the Save button in the top-right corner when you are finished editing.

Blog post section settings

The following settings are available for the Blog posts section:

Configuration Settings

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.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.