Navigation
Articles

Article •

Blog post

Table of contents

Display the contents of a blog post for your customers to read.

In the following example, the settings that affect the display on mobile are used, but the same steps apply to the settings that affect the display on desktop.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Blog post template.
  4. Click the Blog post header section.
  5. Check Show image (mobile).

If you choose to show the blog post image, then make sure you add a blog post image for each blog post on your online store. It’s recommended to upload landscape images.

The featured image looks best on desktop when a landscape image is used. However, the featured image tries to adopt a square (1:1) aspect ratio on mobile. In some cases, the featured image may not look right when displayed at this aspect ratio. You can override the default featured image with a different image on mobile, to improve art direction.

In order to override the default featured image on mobile, you must:

  • add a Metafield definition,
  • populate the Metafield with an image,
  • use the image on the Blog post template.

Add a Metafield definition

  1. From your Shopify admin, go to Settings → Custom data.
  2. Click Blog posts.
  3. Click Add definition.
  4. In the Name field, input a name (e.g. Mobile featured image).
  5. Optional: In the Namespace and key field, input a value.
  6. Optional: In the Description field, input a description.
  7. Click Select type.
  8. Select File.
  9. Select One file.
  10. Under Validation, check Accept specific file types → Images.
  11. Under Access, check Storefronts.
  12. Click Save.

Populate the Metafield with an image

  1. From your Shopify admin, go to Online Store → Blog posts.
  2. Select the blog post you want to edit.
  3. Under Metafields, click the name of your Metafield (e.g. Mobile featured image).
  4. Click Select image.
  5. Select the image to display, or upload a new image, and click Done.
  6. Click Save.

Use the image on the Blog post template

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. In the drop-down menu at the top of the page, select a Blog post template.
  4. Click the Blog post header section.
  5. Next to Image (mobile), click the Connect dynamic source icon-dynamic-source.svg icon.
  6. Select the Metafield to display (e.g. Mobile featured image) and click Connect.

Metafields enable you to customize the functionality and appearance of your Shopify store by letting you save specialized information that isn't usually captured in the Shopify admin. Learn more about Metafields.