Skip to main content

Blog Article

When a visitor clicks on a specific blog post, they land on the article page. This is the place where they will actually read your story. Because the focus here is on text and readability, the theme offers a number of handy settings to optimize the reading experience.

General Layout & Design​

  • Color scheme: Determine the background and text color of the page.
  • Custom Class: A setting for advanced users who want to apply extra CSS.

Main Image (Article Image)​

If you have added a 'Featured image' to your blog post in the Shopify Admin, it will be shown large at the top of the article.

  • Image width: Choose whether the image should span the full width of the screen (Full width / Edge-to-edge) or fall within a neat frame (Box).
  • Image height: Determine the height of the image in pixels. Because screens vary enormously, you can perfectly tailor this by setting a separate height for desktop and mobile.

Text & Readability (Content)​

Good readability is crucial for a blog. Through these settings, you determine how the text is presented:

  • Container width: The wider a line of text, the harder it is to read. Choose the maximum width of your article text here (e.g., 800px or 900px) for the ideal reading experience, or let it match the default width of your webshop (Default).
  • Title Formatting: Determine the size (H1 to display) and weight of the article's title.
  • Author & Date: Check whether you want to show the author's name and the publication date at the top of the article.

Reading Experience & Sharing​

Make your readers comfortable and encourage them to share your content:

  • Progress bar: Enable this to show a thin line at the top of the screen that fills up as the visitor scrolls further down. This gives the reader an indication of how much longer the article is. You can determine the color of this bar yourself.
  • Back to top: Show a handy button in the bottom right of the screen (especially nice for long articles) that allows the reader to get right back to the top of the page with one click.
  • Share buttons: Check this to show buttons that allow readers to share your article directly via Facebook, X (formerly Twitter), Pinterest, email, or WhatsApp. You can customize the title above these buttons yourself (e.g., "Share this article").

Comments​

At the bottom of the article is the comments section. Note: allowing actual comments is set via the general blog settings in your Shopify Admin. With the settings in this theme section, you manage the visual display and an extra call-to-action.

  • General Layout & Whitespace: Choose a fitting color scheme for the comments section. With the settings for margin (MT/MB) and padding (PT/PB), you determine the space around and inside this section (choose between default or none).
  • Contact Banner: An article often raises specific questions for the reader. With this banner, you add an eye-catching block next to or below the comments to encourage visitors to contact you directly.
    • Enable (Enable contact banner): Check to make the banner visible.
    • Text: Give the banner a clear title (e.g., "Have any questions?") and an accompanying text.
    • Action button: Add a button with its own label (e.g., "Contact us"), a link (to your contact page), and optionally choose a fitting FontAwesome icon (such as an arrow) to make the button stand out more.