Articles

You can customize how your blogs look and feel with Ira's Articles settings.

Note that these settings affect the look of all of your blog posts.

Configure your articles settings

To change your articles settings:

STEPS

1. From your Customize theme editor, choose Blog posts from the pages drop-down menu at the top of the screen.

   Note that if you haven't written any 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 share buttons.

4. 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.

5. 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.

6. Click Save.

Settings reference

Blog posts have the following Articles settings:

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, X (Twitter), and Facebook.

Show image

Check this checkbox to display your blog posts' featured image before 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 pages with shortcodes

Create unique grid layouts and accordions on your pages with our special "shortcodes." Shortcodes are small blocks of HTML that you can paste directly into the page text editor in your Shopify admin.

Shortcodes are supported on [Pages][pages], [About pages][about-page], and [Blog posts][articles]. Accordion shortcodes are also supported on Product pages, great for additional product details.

Follow the instructions below to use and edit shortcodes for:

• Accordions with collapsible tabs

• Grid layouts with image and text

Add accordions with shortcodes

The accordion shortcodes create collapsible tabs with headings that reveal more text when clicked on. They're great for adding additional details to your pages.

Follow the steps below to use our shortcode generator with easy-to-use fields that automatically creates a shortcode without needing to edit the HTML yourself.

Steps

STEPS

1. Open our shortcode generator in a new window or tab.

2. Enter text in the Accordion Title field for the clickable heading.

   We recommend a short 1-3 word heading that describes the content of the accordion. Example: "Product materials" or "Shipping policy".

3. Enter a few sentences in the Accordion Description field for the text that's revealed when the accordion title is clicked.

4. Click (+) Add New Item to create additional accordion tabs.

   Repeat steps 1 - 3 until you have created all the accordion tabs you need.

5. Click Generate Code. You code will appear in the Results box.

6. Select and copy the entire code in the Results box.

7. In your Shopify admin, add or open an existing page in your Pages, Blog posts, or Products.

   We recommend making a backup of your page content or creating a new page with the same content for testing in case any mistakes occur.

8. Click the "Show HTML" (</>) button on the text editor toolbar.

9. Paste your shortcode into the editor.

10. Click Save.

8. Finally, click View page to see how your accordions look on your page.

Add grid layouts with shortcodes

The grid shortcodes lets you create multiple columns and sizes of both images and text blocks.

We'll walk through editing the code step-by-step below, so you won't have to know exactly how HTML or code tags work to make the edits you need.

Before we begin, we have a few recommendations to keep in mind:

Recommended

1. Use images with the same height in pixels.

2. Backup your original page content.

3. Add the images before editing the HTML.

Steps

In your Shopify admin:

STEPS

1. Add or open a page under Pages or Blog posts.

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 page content.

3. Click HTML view using the page editor toolbar.

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

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

   <p>This is the first paragraph of the page.</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>

   The indentations above aren't necessary, but they can help code blocks easier to read and edit.

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>

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. Click Save and then click View page to see what your grid looks like on the page.

Add text blocks with "small class"

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 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>

• Article

• Blog posts

• Rich text editor

• Blog posts

• Add grid content to your blog posts