Appearance
Blog
Uisce includes a full blog layout with article grids, author info, and tag filtering. Navigate to your blog page in the theme editor to configure it.
What it looks like
The blog page shows your articles in a grid with featured images, dates, and optional author chips.
Blog page preview
Blog settings
These settings live in the Blog section in the theme editor. Navigate to any /blogs/<handle> page in Customize to find them.
| Setting | What it does |
|---|---|
| Color scheme | Which of your four colour schemes the blog listing page uses. |
| Show featured hero | Shows the most recent article as a full-width hero above the article grid. Hidden on page 2+ and tag-archive pages. On by default. |
| Show author chip | Shows the author name on each article card. On by default — turn off if your blog does not use named authors. |
| Show reading time | Shows estimated reading time (computed from word count at 200 wpm) on each article card. On by default. |
| List/grid default | Default view when a visitor first opens the blog: grid (default) or list. |
| Tag interests 1–5 | Tag names to offer as newsletter subscription interests below the email input. See newsletter opt-in below. |
Featured images and dates always display on article cards. Author display is controlled by the Show author chip setting (on by default).
Featured article hero
When Show featured hero is on, the most recent published article appears as a full-width hero above the article grid on the first page. The hero shows the article image, title, excerpt, reading time, and author chip. On page 2+ and tag-archive pages, the hero is suppressed automatically.
To control which article appears as the hero:
- The most recently published article is used automatically — no explicit "feature this" setting.
- To feature a specific article: set its published date to be the most recent in Admin → Blog posts → [Article] → Visibility → Published date.
Blog tag filtering
Tag chips appear above the article grid when your blog has tags. Clicking a chip shows only articles with that tag. The URL updates to /blogs/<handle>/tagged/<tag> so visitors can share or bookmark a filtered view.
Tags are sourced from your published articles — there is no separate tag configuration in the theme. The tag chip row is automatically hidden when your blog has no tags.
List/grid toggle
When the list/grid toggle is enabled (controlled by the Show list/grid toggle setting), visitors can switch between a card grid and a list view. List view shows a single-column layout with longer descriptions visible. The visitor's preference persists per session in browser storage.
RSS feed
Your blog Atom feed is automatically available at /blogs/<handle>.atom. No settings required — share this URL with readers who use RSS readers.
Newsletter tag-interest opt-in
The Tag interests 1–5 settings let you offer newsletter subscribers a set of topic interests to opt into. Example values: "Plant care tips", "Seasonal guides", "How-to videos".
When show_tag_interest_selector is on, selected interests are included in the attributes[tag_interests] field of the newsletter form submission. You need to map this attribute in your marketing automation tool — it does not automatically tag contacts in Shopify Email or a third-party ESP.
Per-preset niche featured-slot blocks
Each preset ships a niche-shaped blog template with a niche featured-slot block above the article grid. These blocks appear once per page, above the grid and below the tag chips. You can add, remove, or reorder them in the theme editor.
Uisce (Services) — Process Stories block
Showcases the firm's process or methodology. Settings: process_title, process_steps (one step per line), show_process_cta, process_cta_text, process_cta_url. Use this block to turn the blog into a credibility surface (e.g. "Our 5-step consulting framework").
Gaoth (Pets) — Pet Care Guides block
A featured pet-care category selector. Settings: guide_heading, guide_species_1–5 (pet types to feature), guide_collection_1–5 (collection pickers). Shows a horizontal rail of species-specific collections (Dog food, Cat toys, Reptile habitats).
Talamh (Garden) — Planting Calendar block
A seasonal planting calendar callout. Settings: calendar_heading, calendar_months (one Month: hint per line, e.g. March: Start seeds indoors), calendar_cta_url. Surfaces seasonal content alongside the blog grid.
Tine (Hardware) — How-To / Spec Deep-Dive block
A featured tutorial or spec comparison. Settings: howto_heading, howto_intro, howto_step_1–5, howto_product_collection (collection picker). Connects editorial content to purchasable products.
Neart (Wellness) — Ingredient Spotlight block
A rotating ingredient or supplement callout. Settings: ingredient_name, ingredient_benefit, ingredient_source, ingredient_callout_image, ingredient_cta_url. Adds a nutritional-storytelling layer to the blog.
Article pages
When a visitor clicks an article, they see the full content with:
- The featured image (if you uploaded one)
- Title, date, and author
- The article body with formatting
- Social sharing buttons
- Previous/next article links
- A comment form (if you have enabled comments)
Article settings
These settings live in the Article section in the theme editor. Navigate to any /blogs/<handle>/<article-handle> page in Customize to find them.
| Setting | What it does |
|---|---|
| Color scheme | Which of your four colour schemes the article page uses. |
| Reading time prominence | How reading time appears: inline (in the article meta line alongside date and author) or prominent (displayed as a larger callout above the content). |
| Enable audio playback | Shows a Web Speech API audio player that reads the article aloud. On by default. |
| Show author bio | Shows the author bio block below the article body. Requires author metafields to be populated. |
| Show related articles | Shows up to 3 related articles below the content. Related articles are found automatically. |
| Show share on X | Show the X (Twitter) share button. |
| Show share on LinkedIn | Show the LinkedIn share button. |
| Show share on Facebook | Show the Facebook share button. |
| Show share on Pinterest | Show the Pinterest share button. |
| Show share on WhatsApp | Show the WhatsApp share button. |
| Share via email | Show the email share button. |
| Show copy link | Show a copy-link button that copies the article URL to the clipboard. |
Author bio setup
To show author bios, you need to create shop metafield definitions. Author metafields are stored at the shop level (not per-article) because the same author writes multiple articles.
Metafield namespaces:
author.<handle>_avatar(type: file_reference) — author headshotauthor.<handle>_bio(type: rich_text) — author bio
The handle is the author's name as a URL-safe slug: lowercase, spaces → underscores, no special characters. Example: "Aoife Murphy" → aoife_murphy.
To create metafield definitions:
- Admin → Settings → Custom data → Shop → Add definition
- Namespace:
author, key:aoife_murphy_avatar(replace with the actual handle), type: File - Namespace:
author, key:aoife_murphy_bio, type: Rich text - Repeat for each author
To populate metafield values:
- Admin → Settings → Custom data → Shop → [metafield definition] → Edit shop metafield
- For
_avatar: upload the author photo to Content → Files first, then select it in the metafield - For
_bio: write the bio in the rich text editor
You must create metafield definitions manually — Shopify requires this for all themes and it cannot be done automatically on install.
If no metafields are set for an author, the author bio block hides itself regardless of the Show author bio setting.
Audio playback
When Enable audio playback is on, an audio player appears at the top of the article. It uses the Web Speech API — browser-native text-to-speech, no external API calls.
Player controls: Play, Pause, Stop, and a speed selector (1×, 1.25×, 1.5×, 2×). The reading position in the article text is highlighted as playback progresses.
On iOS Safari, visitors must tap Play explicitly (iOS auto-play restriction) — the player shows a "Tap to listen" prompt on first load. On browsers without Web Speech API support (rare), the player hides automatically. Under prefers-reduced-motion, the reading-position highlight switches from a solid highlight to a wavy underline.
The audio player is lazy-loaded and does not affect the article's initial page load speed.
Social share
Share buttons appear as a sticky vertical rail on the right edge of the content column on desktop (≥ 1024 px), and as a horizontal row at the end of the article on mobile. All share URLs use direct intent URLs — no third-party JavaScript is loaded. The copy-link button shows a brief toast notification on success.
Related articles
Related articles are shown automatically — no settings required. The cascade:
- Same-tag articles (up to 3 most recent, excluding the current article)
- Same-blog most-recent articles (up to 3, excluding the current article)
- Block hidden if fewer than 2 candidates are found
To influence which articles appear as related, tag articles with consistent topic tags and publish complementary articles in the same blog.
Article structured data
Each article page emits BlogPosting JSON-LD including mainEntityOfPage, articleSection, inLanguage, wordCount, and a hero image ImageObject for Google Article rich results. The structured data is generated automatically from article metadata — no configuration needed.
The article hero image loads with priority so it appears quickly even on slow connections.
Per-preset defaults
| Preset | Niche | Default settings and recommended actions |
|---|---|---|
| Uisce | Services | Show author bio: off. Show LinkedIn + X: on. Blog card aspect ratio: 3/2. Niche block: Process Stories. Turn author bio on if your firm has named consultants with distinct specializations. Prioritize LinkedIn sharing (primary channel for services). |
| Gaoth | Pets | Show author bio: on (pet care authority — vets and trainers). Show X, Pinterest, Facebook: on; LinkedIn: off. Blog card aspect ratio: 4/3. Niche block: Pet Care Guides. Set up author metafields for vet/trainer authors. Enable WhatsApp sharing for mobile-first pet communities. |
| Talamh | Garden | Show author bio: off (trust via seasonal expertise, not individual authors). Show X, Pinterest, Facebook: on. Blog card aspect ratio: natural. Niche block: Planting Calendar. Add seasonal tags to all articles. Populate the Planting Calendar block with monthly planting hints. |
| Tine | Hardware | Show author bio: on (hardware how-to authority). Show LinkedIn, X, Facebook: on. Blog card aspect ratio: 16/9. Niche block: How-To / Spec Deep-Dive. Set up author metafields for certified technicians who write tutorials. Wire the how-to block's product collection to featured products. |
| Neart | Wellness | Show author bio: off (ingredient/formula focus over author persona). Show Pinterest, email: on. Blog card aspect ratio: 1/1. Niche block: Ingredient Spotlight. Populate the Ingredient Spotlight block with your hero ingredient each month. Tag articles with ingredient names and health goals. |
Before you go live
- [ ] Featured article hero shows on the first page; page 2+ suppresses the hero
- [ ] Tag chips show when articles have tags; tag-archive URLs work
- [ ] Reading time appears on article cards
- [ ] Author chip shows on cards when Show author chip is on; hidden when off
- [ ] List/grid toggle persists preference per session
- [ ] Niche featured-slot block configured with your niche content
- [ ] Author bio block hides when no author metafields are set
- [ ] Author avatar appears when
shop.metafields.author.<handle>_avataris populated - [ ] Audio player appears and plays on desktop Chrome / Firefox / Safari
- [ ] Audio player shows "Tap to listen" on first load on iOS (iOS auto-play restriction)
- [ ] Social share rail appears on desktop; horizontal row appears on mobile
- [ ] Related articles show 3 articles (or are hidden when fewer than 2 candidates exist)
- [ ] RSS link is in
<head>on blog and article pages (<link rel="alternate" type="application/rss+xml">) - [ ] BlogPosting JSON-LD emits in a
<script type="application/ld+json">block (visible via DevTools → Sources) - [ ] Lighthouse Performance ≥ 0.6 on article page (LCP should be under 2500 ms)
- [ ] Lighthouse Accessibility ≥ 0.9 on article page
- [ ] No accessibility violations (run Lighthouse → Accessibility in DevTools)
Tips
- Use consistent tags. "Shipping Tips" and "shipping tips" are treated as separate tags in Shopify. Pick one style and stick with it.
- Always add a featured image. Articles with images get significantly more clicks in the grid view.
- Paginate at a reasonable article count. 12 articles per page is the default — enough to browse without overwhelming the page.
Related guides
- Blog and article support — audio, structured data, author bio, social share debugging
- Translations
- Theme settings
- Color schemes