Blogs

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.

Previous404 PageNextCustomer Login

Last updated