Hoda Blog Toolkit — Documentation

Hoda Blog Toolkit is a Shopify app by HodaPress that extends your online store blog with theme app blocks. It is designed for Online Store 2.0 themes that support app blocks (such as Dawn and Horizon).

Install

1. Open the app page in the Shopify App Store and click Install.
2. Review the requested permissions and approve them.
3. After installation, open Hoda Blog Toolkit from the Apps menu in your Shopify admin.

Note: This app is designed to work entirely in the theme editor. There are no settings to configure in the app admin.

Add a theme app block

1. In Shopify admin, go to Online Store → Themes.

2. Click Customize on your current theme.

3. Open the page you want to edit, then choose a Hoda Blog Toolkit block from Add section → Apps.

• Listing blocks (Blog List, Blog Cards, and Preset Designs) can be added to various pages, such as the homepage or a blog listing page.
• Article blocks (Breadcrumbs, Title, Meta, Content, Table of Contents, and Article Nav) can be added when you open the Blog post template in the theme editor.

4. After adding a block, you can change the order with drag and drop.

Customizing listing-style blog blocks

Blog List

Blog List displays blog posts in a list layout, similar to a corporate news-style announcements list.

Available settings

• Blog: Select the Shopify blog to display
• Posts to show: Set how many posts to show (1–20)
• Show heading: Toggle the heading text above the list
• Heading text: Text shown when “Show heading” is on
• Show date: Toggle date display
• Date format: Choose from 10 formats (including Japanese-style formats)
• Show tags: Toggle tag display
• Layout: Choose from these 3 options
  • Single row (tags before the title)
  • Single row (tags after the title)
  • Two rows (date and tags above)
• Show blog link: Toggle the link to the full blog listing
• Link text: Text shown when “Show blog link” is on

Layout

• Max width (desktop): 0 makes it full width
• Max width (mobile): 0 makes it full width
• Alignment
• Base font size: Increase this if the text feels too small

Design

• Text color
• Link color
• Tag background color
• Tag text color
• Date background color
• Date text color
• Date border radius: 0px is square; increase the value for more rounding
• Title hover: 4 options (fade only / underline immediate / underline grow from left / underline grow from center)
• Section top and bottom padding
• Item top and bottom padding
• Gap between items

Blog Cards

Blog Cards displays blog posts as cards, with detailed design controls.

Available settings

• Blog: Select the Shopify blog to display
• Posts to show: Set how many posts to show (1–20)
• Show heading: Toggle the heading text above the list
• Heading text: Text shown when “Show heading” is on
• Show date: Toggle date display
• Date format: Choose from 10 formats (including Japanese-style formats)
• Show tags: Toggle tag display
• Tag position: Choose “Above the title (to the right of the date)” or “Below the title”
• Default thumbnail: Shown when a post has no featured image

Layout

• Max width (desktop): 0 makes it full width
• Max width (mobile): 0 makes it full width
• Columns (desktop): Number of columns on desktop. Mobile always uses 1 column
• Gap between cards
• Card text area padding

Design

• Thumbnail height ratio: Set the image aspect ratio as height relative to width (%), calculated as height ÷ width × 100. Range: 25–125%.
  • 16:9 → 56% (default)
  • 4:3 → 75%
  • Reference: 3:2 ≈ 67% / 1:1 = 100% / 21:9 ≈ 43%
• Card border radius
• Card shadow
• Base font size
• Text color
• Tag background color
• Tag text color
• Card text area background color
• Card border color
• Card border width

Preset Designs

Preset Designs lets you choose from the following 8 style presets.

• Image card with padding
• Image overlay
• Card with badge tags
• Card with badge tags (bottom left)
• Borderless minimal
• Meta information on top
• Side-by-side (image right)
• Side-by-side (image left)

Some settings are shared with Blog Cards, such as blog selection, posts to show, date, thumbnail height ratio, and columns. Preset Designs also includes unique options such as excerpt display, tag display mode, blog listing link style, and color mode. Fine-grained appearance controls like card radius, shadow, and borders are aimed at Blog Cards.

You can also switch to dark mode from Color mode. The design automatically adapts to a dark-friendly look.

Blocks for blog posts

These blocks are available when you edit the Blog post template in the theme editor.

Article breadcrumbs

Display breadcrumbs with BreadcrumbList schema support.

Available settings

• Show home
• Home label
• Show blog name
• Show current article
• Show home icon
• Separator: Choose chevron, slash, arrow, or custom text. Custom text lets you use any characters as the separator

Design

• Alignment within column
• Font size
• Text color
• Link color
• Current page color
• Separator color
• Item spacing
• Top padding
• Bottom padding
• Enable BreadcrumbList schema: When on, schema markup is output

Article title

Style the blog post title.

If the theme’s default title is still visible, both titles will appear. Hide the Shopify default title.

Available settings

• Top padding
• Bottom padding
• Font
• Font size
• Font weight
• Text color
• Marker-style underline
• Marker color

Article meta

Display the post date, blog type, tags, and author. Choose a preset, then customize.

Available settings

• Design preset
• Show date
• Date format
• Show blog (category)
• Link to blog page
• Show tags
• Link tags to tag pages
• Show labels
• Show author

Layout

• Max width (desktop)
• Max width (mobile)
• Top padding
• Bottom padding
• Column gap
• Alignment within column

Style

• Text color
• Label and icon color
• Font size
• Tag background color
• Tag text color

Article content

Style the blog post body. In addition to estimated reading time, you can adjust the look of body text, headings (H2 and H3), quotes, tables, links, and lists from the theme editor.

If the theme’s default content is still visible, both will appear. Hide the Shopify default content.

Automatic table of contents

Set up a table of contents (TOC) that updates based on headings.

Use it together with the Article content block, and make sure the body includes headings (H2 and deeper). Adding the TOC alone will not show anything if there are no matching headings.

• Style preset
• Show title
• Title text
• Heading depth: Choose how deep the TOC should go

Layout

• Max width (desktop)
• Max width (mobile)
• Top padding
• Bottom padding
• Two-column layout
• Smooth scroll: When on, clicking a TOC item smoothly jumps to the heading
• Scroll offset: Use this when you have a fixed header and want extra top space when jumping

Design

• Text color
• Link color
• Accent color

Article nav (previous / next)

Customization

• Show previous label
• Previous label
• Show next label
• Next label
• Label position
• Label font size
• Label color
• Gap between label and card
• Style preset
• Color mode: Dark mode works best for stores with a dark design
• Show date
• Show tags
• Show excerpt
• Excerpt length
• Date format
• Default thumbnail: Shown when a post has no featured image
• Thumbnail height ratio: Same as Blog Cards — use about 56% for 16:9 and 75% for 4:3

Changing the background color

Changing the section background color itself is not supported.

If you want to change the section background, use Custom CSS in the Shopify theme editor. Class names differ by theme, so follow the editor’s guidance when choosing a selector.

Example

.section-xxxxx {
  background-color: #000;
}