Materia Theme
  • What is Materia?
  • Getting Started
    • Download & Install
    • Theme License & Activation
    • Create Pages - Required
  • Theme Updates
  • Required Apps
  • Recommended Apps
  • Mega Menu
  • Store Settings - Required
  • Materia Theme Dashboard
  • Theme Settings
    • Logo
    • Favicon
    • Layout Settings
    • Typography
    • Color Schemes
    • Website Intro
  • Overall Zoom
  • Browser Tab Messages
  • Badges
  • Notification Bubble
  • Buttons Customization
  • Main Collection Filter
  • Product Card Settings
  • Product Variant Swatches
  • Search Behavior Settings
  • Wishlist
  • Cart Settings
  • Social Media
  • Preloader Settings
  • Currency Display Settings
  • Cookies
  • Speed Optimization
  • General Store Information
  • Terms and Conditions Settings
  • Theme Sections
    • Header
    • Announcement Bar Basic
    • Upper Navigation Bar
    • Announcement Bar Pro 1
    • Hero Pro 1
    • Hero Image 1
  • Hero Banner 2
  • Hero Product 2
  • Carousel Hero Slider
  • Slideshow Pro
  • Image
  • Video
  • Benefits Cards Pro 2
  • Benefits Pro
  • Image & VIdeo With Text
  • Image With Icons
  • Image With Benefits
  • Image With Text Pro
  • Page's global sections
    • Announcement Bars
    • Header
    • Footer
    • Mobile Navigation Bar
    • Back To Top Pro
  • Overlay Group
    • Cookie Consent Banner
    • Mobile Navigation Bar
    • Page Tag
    • Custom Color Swatches
    • Order Notification Pro 1
    • Image Banner Popup
    • Promotion Banner Pro
    • Back To Top Pro
  • Products & Collections
    • Product Page
      • Breadcrumbs
      • Product Snippets
        • Product – Trust Badges
        • Product - Upsell Addon
        • Product-Payment Badges #1
        • Product - Sold Social Proof
        • Product - Bundle Pro
        • Product – Text Timer
        • Product - Promo Banner
        • Product - Vertical Benefits
        • Product - Payment Badges #2
        • Ecomz – Discount Coupon
        • Product - Size Chart Image
        • Product - Circle Images
      • Product Information
      • Product Templates
    • Collection Page
      • Collection Template
  • Other Pages
    • 404 Page
    • Blogs
    • Customer Login
    • Cart & Checkout
  • FAQs
    • Missing images when install Materia
    • Why are some pages missing?
    • Theme translation
    • Change currency
    • Why Does the Desktop Preview Look Compressed in the Theme Editor?
    • How to change fonts?
Powered by GitBook
On this page
  1. Other Pages

Blogs

Previous404 PageNextCustomer Login

Last updated 1 month ago

Blog Posts

The Blog Posts section lets you showcase articles from a selected blog on your storefront with full control over layout, appearance, and post metadata.

Select Blog

  • Select Blog: Choose the blog from which articles should be displayed. Each Shopify store can have multiple blogs (e.g., “News,” “Tips,” “Recipes”)—select the relevant one here (e.g., loudlib-blog).

Blog Post Settings

  • Featured Image Ratio: Determines the shape of the article thumbnail image. Choose between:

    • Adapt: Keep the image’s original ratio.

    • Square: Crop to 1:1.

    • Portrait: 2:3.

    • Landscape: 3:2.

    • Custom: Use your own ratio.

  • Custom Image Ratio: Only applies if “Custom” is selected. Format: width:height (e.g., 16:9).

  • Content Alignment: Aligns the article content (title, date, excerpt) to the Left, Center, or Right.

  • Show Article Date: Toggle to show the published date of each article.

  • Show Article Text: Toggle to show a short excerpt from the post.

  • Show Read More Button: Enable to show a “Read More” link or button.

  • Read More Button Style: Choose between:

    • Text Button (simple link)

    • Primary Button (solid button with stronger emphasis)

General Layout Settings

  • Section Width: Controls how the section spans across the page:

    • Container: Fixed width

    • Fluid Container: Slightly expanded

    • Stretch Width: Wider across screen

    • Full Width: Edge-to-edge

  • Blog Layout: Choose between Grid (multi-column layout) or List (stacked articles).

  • Articles per Page: Number of articles displayed before pagination or “Load More.”

  • Articles per Row (Desktop): Controls how many articles appear side-by-side on larger screens.

  • Horizontal Gap Between Articles (px): Set spacing between article columns.

Pagination Settings

  • Load More Button Text: Customize the text shown on the button (e.g., "Load More," "View More," etc.). Applies only if “Load More” pagination is used.

Mobile Options

  • Articles per Row (Mobile): Number of columns shown per row on smaller screens (usually 1).

  • Top Margin / Bottom Margin (px): Adjust vertical spacing around the entire section.

Badge Settings

Highlight a specific blog post with a badge (e.g., “Trending,” “Editor’s Pick”).

  • Badge Text: Short label to display on the article image (e.g., Recent, Hot, Featured).

  • Blog Post Badge Reference: Enter the blog article's handle to apply the badge. Format:

    bashCopyEditblog-handle/article-handle

    Example: If your blog post URL is https://site.net/blogs/news/best-apps, input: news/best-apps

  • Badge Background Color: #FF0000

  • Badge Text Color: #FFFFFF

  • Badge Border Radius (px): 19

  • Badge Vertical Position (px): 16

  • Badge Horizontal Position (px): 16

  • Badge Width (px): 70

  • Badge Height (px): 30

  • Badge Text Font Size (px): 14

Use these controls to visually emphasize standout posts or call attention to newly published articles.