How to Add Custom CSS to Shopify Blog Posts for Old & New Themes

Why Custom Blog Styling Actually Matters

Here's what I see constantly: entrepreneurs spending thousands on professional Shopify themes, then publishing blog posts that look like they were formatted in 1995. Default theme blog styling is bare-bones at best—minimal formatting, zero visual hierarchy, no strategic callouts or CTAs. Your blog content deserves better, and more importantly, your readers need better to actually engage with your content.

Custom blog CSS isn't about making things "pretty"—it's about creating a professional reading experience that keeps visitors on your site longer, builds trust in your expertise, and guides them toward conversion. When your blogs look polished and intentional, readers assume your products and services are equally professional.

The problem? Most Shopify themes don't give you an easy way to add consistent custom styling across all blog posts. You're left choosing between pasting CSS into every single blog post (nightmare for maintenance) or editing theme files directly (breaks during updates). Neither option scales, and both create headaches.

Let me show you the systematic approach that actually works: using Shopify metaobjects to create reusable, theme-independent blog styling that applies automatically to every post you publish.

Understanding Theme Architecture: Old vs New

Sectioned Themes (2017-2020): The "Old" Approach

If you're using themes like Retina, Turbo, Empire, or other Out of the Sandbox themes, you're working with what Shopify calls "sectioned themes." These were revolutionary when they launched—finally, you could customize your homepage without touching code! But they have significant limitations:

• Template restrictions: Only certain templates support sections (homepage, product pages, collection pages)
• Blog limitations: Blog post templates are typically hardcoded with minimal customization options
• Section requirements: Custom sections must include a presets block to appear in the customizer
• Rigid structure: Less flexibility in where and how you add custom functionality

Online Store 2.0 Themes (2021+): The Modern Standard

Themes built on Shopify's Online Store 2.0 architecture (like Dawn, Refresh, and most themes released after mid-2021) work completely differently:

• Everything is sectioned: All templates—including blog posts—are fully customizable with sections
• JSON-based templates: Templates are data files, not hardcoded Liquid
• Dynamic sources: Better integration with metafields and metaobjects
• Flexible sections: Sections can be added anywhere without strict presets requirements

Why This Matters for Your Blog Styling Strategy

The approach I'm showing you works for BOTH theme types, but the setup differs slightly. Older themes require more specific configuration (particularly the presets block), while newer themes make the process more straightforward. Knowing which architecture you're working with prevents hours of frustration when sections don't appear where you expect them.

Step-by-Step: Setting Up Blog Styles Metaobject

Metaobjects are Shopify's way of creating structured, reusable content that works independently of your theme. Think of them as custom database entries that you can reference anywhere in your store. For blog styling, we'll create a metaobject that stores your CSS code, then reference it in a section that loads on all blog posts.

Step 1: Create the Metaobject Definition

Step 1: Navigate to Settings at the bottom of your Shopify dashboard.

Step 2: Select "Custom data" then click on "Metaobjects."

Step 2: Create Your CSS Entry

Creating the Blog Styles Section

Now we'll create a theme section that pulls your CSS from the metaobject and injects it into blog post pages. This section acts as the bridge between your stored CSS data and your live blog posts.

Step 1: Click "Online Store" in your Shopify dashboard.

Step 2: Click the three dots next to "Customize" on your active theme.

Step 3: Select "Edit code" from the dropdown menu.

Step 4: In the code editor, find the "Sections" folder in the left sidebar. Click "Add a new section."

{%- assign blog_styles = section.settings.blog_styles_reference -%}

{% if blog_styles.css_code != blank %}
<style>
{{ blog_styles.css_code }}
</style>
{% endif %}

{% schema %}
{
  "name": "Blog Styles",
  "settings": [
    {
      "type": "metaobject",
      "id": "blog_styles_reference",
      "label": "Select Blog Styles",
      "metaobject_type": "blog_styles"
    }
  ],
  "presets": [
    {
      "name": "Blog Styles"
    }
  ]
}
{% endschema %}

Step 7: Click "Save" to create the section file.

Understanding the Code

Let's break down what this section does:

• Line 1: Assigns the selected metaobject to a variable called blog_styles
• Line 3: Checks if CSS code exists in the metaobject
• Lines 4-6: Outputs the CSS wrapped in <style> tags
• Lines 8-25: Schema definition that makes this section work in the customizer

Adding the Section to Your Blog Template

Now that your section file exists, you need to add it to your blog post template so it loads on every blog post automatically.

Step 1: Navigate back to Online Store → Themes and click "Customize" on your active theme.

Step 2: In the theme customizer, find the template selector dropdown at the top (it usually says "Homepage" by default). Click it and select "Blog posts."

Step 3: You should now see your blog post template layout. If you have multiple blog post templates, select "Default blog post" to ensure your styles apply to all posts.

Step 4: Click "Add section" and search for "Blog Styles" in the section list. Click to add it.

What Most People Get Wrong

Mistake #1: Pasting CSS Directly Into Blog Post Content

I see this constantly—entrepreneurs paste <style> tags at the bottom of every single blog post. This creates nightmares:

• Updating styles requires editing dozens or hundreds of posts individually
• Inconsistency creeps in as styles drift across posts
• New team members don't know to include the CSS, so new posts look different
• Page source becomes bloated with repeated CSS on every page

<style>
h2 { color: blue; }
.callout { background: yellow; }
/* ...100 more lines... */
</style>

Mistake #2: Modifying Theme Files Directly

Some developers add blog CSS to theme.css or theme.scss.liquid. Problems with this approach:

• Theme updates overwrite your customizations
• CSS applies globally (affects non-blog pages unexpectedly)
• Switching themes means losing all your styling work
• Can't easily create variations for different blog categories

Metaobjects survive theme changes. Your CSS data lives independently of your theme, so switching themes just means reconnecting the section—your styling logic stays intact.

Mistake #3: Forgetting the Presets Block

For older themes, omitting the presets block from your section schema means your section exists in code but never appears in the customizer. You'll waste hours wondering why you can't add your section, when the fix is literally three lines of JSON.

Mistake #4: Not Scoping CSS Properly

If you're adding CSS that targets generic selectors like h2 or ul, you need to scope it to blog posts only. Otherwise, you'll accidentally restyle your entire site. Wrap your CSS in a parent selector:

.template-article {
  h2 { /* Your h2 styles */ }
  ul { /* Your list styles */ }
}

Or use more specific selectors that only exist on blog posts: .article__content h2 instead of just h2.

Why Schema Markup Belongs in Your Blog CSS

Here's something most Shopify theme developers never tell you: your theme doesn't include comprehensive schema markup for blog posts. At best, you get basic Article schema. At worst, nothing at all.

What Schema Markup Does

Schema markup is structured data that helps search engines understand your content. For blog posts, proper schema tells Google:

• Who wrote the article (author schema)
• When it was published and updated
• The main topic and related topics
• Answers to common questions (FAQ schema)
• How-to steps (HowTo schema for tutorials)
• Organization information (who publishes the blog)

This structured data powers rich results in search—those FAQ dropdowns, star ratings, and detailed snippets you see in Google results. Without schema, you're invisible to these features regardless of how good your content is.

Why Include Schema in Your CSS Metaobject

Your blog CSS metaobject is the perfect place to include schema templates because:

• It loads on every blog post automatically
• You can update schema structure once and apply it site-wide
• It's theme-independent (survives theme changes)
• You can create different schema variations for different blog types

Example: Adding FAQ Schema to Your Blog Styles

In your CSS metaobject entry, after your CSS code, add schema templates:

/* Your CSS here */

/* FAQ Schema - Add this structure to blog posts with FAQ sections */
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Your question here",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Your answer here"
      }
    }
  ]
}
</script>

Schema Types Every Blog Should Include

• Article schema: Basic metadata about the blog post
• Author schema: Information about who wrote the content
• Organization schema: Your business information
• BreadcrumbList schema: Navigation path to the article
• FAQPage schema: For posts with FAQ sections
• HowTo schema: For tutorial-style posts with steps

Most of these can be standardized in your metaobject section, with dynamic elements pulling from individual blog post data.

Good Ideas vs Bad Ideas

Good Ideas: What Actually Works

Bad Ideas: What to Avoid

Frequently Asked Questions