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 with their feature images.

The Blog posts section
The Blog posts section

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

The Blog posts section can be added to any template (except the Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Blog posts from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

Add blog posts

Add up to 12 blog posts to display as a feature grid on your page.

  1. Click + Add Article and/or click on the Article block you wish to edit.

    This opens the Article block settings.

  2. Click Select article to choose the blog post you wish to display.

    After you have selected a blog post, you can follow the Edit article link if you need to add a featured image.

  3. Return to the list of your template sections in the sidebar and repeat this process until you've added all the Blog post blocks you need.

  4. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your Blog post blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a Blog post block entirely.

  5. Remember to click Save in the top-right corner.

Customize the Blog posts section

The Blog posts section settings apply to all Blog post blocks. You can add a main Heading and Subheading, set the number of columns per row, change the Image aspect ratio (shape or orientation) of the Blog post images, and enable the Alternate section color.

  1. Click on the Blog posts section.

    This opens the Blog posts section settings.

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

  3. Use the Columns per row slider to adjust the number of Blog posts per row, between 2, 3, or 4.

    On mobile, Blog posts are displayed in a single column.

  4. Add Heading text to display above the section.

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

  6. Adjust the Max width of text of the section Subheading using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  7. Select an Image aspect ratio to crop your images to appear as Square, Landscape, or Portrait.

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

    Learn more about using images in Spark in our Image size recommendations article.

  8. (Optional.) Enable the Alternate section color option in the section settings by clicking on the section title.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

  9. Remember to click Save in the top-right corner.

Blog post section settings

The following settings are found by clicking directly on the section title:

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 to display at the top of the section.

We recommended a short title of just a few words.

Subheading

Add subheading text.

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

Max width of text

Use the slider to adjust the maximum width of the subheading.

Experiment with this setting to find a clean visual shape for your 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 section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with 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.