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

Articles

With Spark's Articles settings, you can choose to display or hide dates, images, pagination, or social share buttons on your blog posts. Note that these settings affect the look of all of your blog posts.

A blog post with article settings turned on
A blog post with article settings turned on

Configure your articles settings

To change your articles settings:

  1. From your Customize theme editor, choose Blog posts 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

    If there are no blog posts yet, Blog posts might not appear in the drop-down menu.

  2. Choose Articles from the list of sections.

  3. Choose whether you want to Show date.

  4. Choose whether you want to let others to share your posts on social media by checking the Show share buttons checkbox.

  5. Choose whether you want to show your blog posts' featured image by checking the Show image checkbox.

    See Shopify's Add an image to a blog post article for more information.

  6. Choose whether you want to Show pagination.

    When you have more than one blog post, customers can use Previous and Next buttons to get from one to the next.

    Blog post pagination
    Blog post pagination
  7. Use the Save button in the top-right corner when you are finished editing.

Blog post settings

Blog posts have the following Articles settings:

Configuration Settings

Show date

Check this checkbox to display the date your blog post was published.

Show share buttons

Check this checkbox to show sharing buttons that redirect customers to social media websites, prompting them to share your store.

The buttons include links out to Pinterest, Twitter, and Facebook.

Show image

Check this checkbox to display your blog posts' featured image above the body content.

Show pagination

Check this checkbox to show previous and next links, making it easy for customers to explore more blog posts.

Add special layouts to blog posts with shortcodes

You can customize the look of each of your blog posts by adding image grids and accordions. This is a great way to break up the text content in your blog posts and make them beautiful.

Image grid on about page
Accordion on about page
Accordion on about page

We'll cover two special layouts you can achieve with shortcodes:

Before you start, you should know a couple of things:

  1. You need to edit raw HTML.

    If you aren't comfortable doing this already, make sure to save backup versions of your blog posts in case something goes wrong and you lose your work.

  2. Ensure the images you want to display in a grid are the same height.

    We recommend adding all the images you want to style before editing the HTML.

How to add a grid

To add a grid to your blog post content, you can follow these instructions:

  1. Add or edit the blog post you want to add a grid to.

    You can do this from the Blog posts page in your Shopify dashboard.

  2. Add or upload any images that you want to place in a grid.

    You can do this the same way you would while adding any blog post.

  3. Switch to the HTML view using the blog post editor toolbar.

    See Shopify's Rich text editor documentation for more information about this.

    When you do this, the blog post should be displayed as HTML markup, like a more-complicated version of this:

    <p>This is the first paragraph of the blog post.</p>
    <p>After this paragraph, there will be an image.</p>
    <img
    src="https://shopify.com/link-to-image1.png"
    alt="Description of first image"
    />
    <p>After this paragraph, there will be another image.</p>
    <img
    src="https://shopify.com/link-to-image2.png"
    alt="Description of second image"
    />
  4. Locate the <img\> tags you want to display in a grid.

    You may need to move these tags around in the next step.

  5. Wrap the <img\>s in a grid element.

    Take the <img\> tags and wrap them in a <div class="grid"></div> tag. Like this:

    <div class="grid">
    <img src="link/to/image-1.jpg" />
    <img src="link/to/image-2.jpg" />
    <img src="link/to/image-3.jpg" />
    </div>

    Note that the indentations don't really matter. They just make these blocks of text easier to read.

  6. Wrap each image in its own <div></div>.

    Like this:

    <div class="grid">
    <div>
    <img src="link/to/image-1.jpg" />
    </div>
    <div>
    <img src="link/to/image-2.jpg" />
    </div>
    <div>
    <img src="link/to/image-3.jpg" />
    </div>
    </div>

    Again, the indentation doesn't really matter.

  7. Assign a "small" class to images that should should be half-width.

    So, to the <div></div> around any of the images:

    <div class="small">
    <img src="link/to/image-3.jpg" />
    </div>

    For example, if you wanted two half-width images and one full width image, you would do this:

    <div class="grid">
    <div class="small">
    <img src="link/to/image-1.jpg" />
    </div>
    <div class="small">
    <img src="link/to/image-2.jpg" />
    </div>
    <div>
    <img src="link/to/image-3.jpg" />
    </div>
    </div>

    Images without the small class are displayed at the full width of the page.

  8. After you Save the post, you can go see what your grid looks like using the View button.

    The button is in the top More menu of the blog post editor.

    The view button above the blog post editor
    The view button above the blog post editor

Play around with other HTML elements

If you're feeling confident, you can also use the "small" class to display text or leave empty space in your layout.

For example:

<div class="grid">
<div class="small">
<img src="link/to/image-1.jpg" />
</div>
<div class="small"></div>
<div class="small">
<img src="link/to/image-2.jpg" />
</div>
<div class="small"></div>
</div>

Would be displayed as:

Example image grid
Example image grid

Example grid

Here's a fully fleshed out example, including placeholder images, for you to play around with:

<p>
This is some example text being used to show off how Spark's about page
image grids work.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="grid">
<div class="small">
<img src="https://via.placeholder.com/700x400" />
</div>
<div class="small">
<img src="https://via.placeholder.com/700x400" />
</div>
<div>
<img src="https://via.placeholder.com/1500x700" />
</div>
</div>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>

How to add an accordion

In the same way that we added an image grid, we can add text accordions. These accordions can be clicked to open up to reveal more, hidden text.

Accordion on about page
Accordion on about page

To add one, follow these instructions:

  1. Add or edit the blog post you want to add an accordion to.

    You can do this from the Blog posts page in your Shopify dashboard.

  2. Switch to the HTML view using the blog post editor toolbar.

    See Shopify's Rich text editor documentation for more information about this.

  3. Paste in the required <div> containers used for accordions.

    We recommend that you copy in the following code snippet, in its entirety, to get started:

    <div class="accordion">
    <div class="accordion__heading">Add an according heading here</div>
    <div class="accordion__group">
    <a class="accordion__label" href="#">
    Insert the first accordion group label here
    </a>
    <div class="accordion__text">
    Insert the first accordion group contents here.
    </div>
    </div>
    <div class="accordion__group">
    <a class="accordion__label" href="#">
    Insert the second accordion group label here
    </a>
    <div class="accordion__text">
    Insert the second accordion group contents here.
    </div>
    </div>
    </div>

    Note that the indentations don't really matter. They just make these blocks of text easier to read.

  4. Replace the example text from the code snippet to your custom text.

  5. Add additional <div class="accordion__group">s if required.

    Note that each accordion group should have inside of it:

    One <a class="accordion__label" href="#">

    One <div class="accordion__text">

    Make sure you close each <div> and <a> with a corresponding </div> and </a>, just like in the example.

  6. After you Save the post, you can go see what your grid looks like using the View button.

    The button is in the top More menu of the blog post editor.

    The view button above the blog post editor
    The view button above the blog post editor

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.