Blog post
The page of a single post, made for reading: a calm header, a table of contents, a reading progress bar, share buttons, the author box, the previous and next post and related posts.
- In the editor
- Blog post
- Where it goes
- Its own template – open that kind of page in the editor
- In the presets
- Index: Blog post; Poster: Blog post; Petal: Blog post
- Settings
- 39
- App blocks
- Yes
Header
- Layout: Title above the image, Title and image side by side, or Title on the image (with an Overlay opacity for contrast).
- Show the first tag above the title, the excerpt, the author, the date and the reading time.
- Show breadcrumbs, which replace the link back to the blog, or Show link back to the blog.
Image
Show featured image, its Image width (Like the text, Page width or Full width) and Image ratio.
Reading
- Text width and Text position, and Text size (Normal or Large).
- Large first letter: a drop cap that opens the post.
- Show table of contents: built from the post's headings, shown beside the text on wide screens. Write headings with the Heading 2 and Heading 3 styles in the post editor.
- Show reading progress bar: a thin bar at the top that fills as the reader scrolls.
After the post
- Share buttons: Under the title, Beside the text, while scrolling or Below the text, as icons in circles, icons only or buttons with names.
- Show tags and Show author box – the name, photo and bio from the author's staff account in Shopify.
- Show previous and next post.
- Related posts: 2–4 posts from the same blog, those sharing a tag first, then the newest ones, under your own Heading.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Blog post39 settings
| Setting | Options | Default |
|---|---|---|
| Header | ||
| Layout | Title above the image · Title and image side by side · Title on the image | Title above the image |
| Text alignment | Left · Center | Center |
| Heading size | Extra large · Large · Medium | Large |
| Show breadcrumbsShown instead of the link back to the blog | Checkbox | On |
| Show link back to the blog | Checkbox | On |
| Show the first tag above the title | Checkbox | On |
| Show excerpt | Checkbox | On |
| Show author | Checkbox | On |
| Show date | Checkbox | On |
| Show reading time | Checkbox | On |
| Image | ||
| Show featured image | Checkbox | On |
| Image width | Like the text · Page width · Full width | Page width |
| Image ratio | Original · Landscape · Wide · Portrait | Wide |
| Overlay opacity | 0–90% | 45% |
| Text | ||
| Text width | Narrow · Medium · Wide · Page width | Medium |
| Text position | Left · Center · Right | Center |
| Text size | Normal · Large | Large |
| Large first letter | Checkbox | On |
| Show table of contentsBuilt from the headings in the post. Shown beside the text on wide screens. | Checkbox | On |
| Show reading progress bar | Checkbox | On |
| After the post | ||
| Show share button | Checkbox | On |
| Share buttons | Under the title · Beside the text, while scrolling · Below the text | Under the title |
| Share button style | Icons in circles · Icons only · Buttons with names | Icons in circles |
| Show the word "Share" | Checkbox | On |
| Show tags | Checkbox | On |
| Show author boxName, photo and bio come from the staff account of the author. | Checkbox | On |
| Show previous and next post | Checkbox | On |
| Related posts | ||
| Show related postsPosts from the same blog that share a tag, then the newest ones | Checkbox | On |
| Heading | Text | Sample text |
| Number of posts | 2 · 3 · 4 | 3 |
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 48px |
| Bottom padding | 0–160px | 80px |
| Top padding on mobile | 0–120px | 32px |
| Bottom padding on mobile | 0–120px | 56px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |