Magefan comes with its own default styles, which inherit your website design. However, you can change it if some colors, fonts, or spacing don't perfectly match your store's theme or you simply need to change design.
The good news: you don't need to edit theme files or hire a developer to adjust the blog design. Our blog app provides a Custom CSS field where you can override any style directly.
So, in this guide, you'll learn how to add custom CSS to Shopify Blog from the admin panel using two different approaches.
Where to Add Custom CSS in Shopify Blog?
To add custom CSS to Shopify Blog:
1. Navigate to Apps > Magefan Blog > Configuration > Design and find the Custom CSS section.
2. Enable the custom CSS option and insert your Custom CSS there.
Note: any CSS you write here will be applied to all blog pages: posts, categories, post listings, authors, tags, etc.
We'll change the colour of the blog post title as an example, but you can change anything you like by adding multiple styles in the Custom CSS section. We'l discuss that in more detail later in this guide.
Once you save the settings go to the frontend to check how your blog changed according to the CSS styles you've set. Here's what we've got:
In our case, the colour of the blog post title changed to blue. However, you can change as many details as you want so your blog fits your brand style. Additionally, you can configure the Shopify blog design and set up multiple blog templates.
Shopify Blog Design Customization Approaches
There are two ways you can customise the Shopify blog design using custom CSS:
- Override CSS variables — the fastest and cleanest way to sync colors, fonts, and spacing between your blog and theme.
- Write custom CSS rules — for precise control over specific elements when variables aren't enough.
In both cases, you paste the CSS under the Custom CSS section in Apps > Magefan Blog > Configuration > Design.
Approach 1: Overriding CSS variables
Magefan Shopify Blog uses CSS custom properties (variables) to control the appearance. By redefining these variables in your Custom CSS field, you can sync the blog "look" with your theme.
Step 1: Find your theme's variables
Every Shopify theme exposes its own CSS variables. Here's how to find them using Chrome DevTools:
- Open your store in a browser
- Right-click anywhere on the page and choose the Inspect option.
- Switch to the Elements tab and click on the <html> or <body> tag in the code.
- Look for :root { } in the Styles panel on the right. This is where theme variables are defined.
You'll find the following variables for the Dawn theme:
:root {
--color-background: 255, 255, 255;
--color-foreground: 18, 18, 18;
--color-button: 18, 18, 18;
--color-button-text: 255, 255, 255;
--color-secondary-button: 255, 255, 255;
--color-secondary-button-text: 18, 18, 18;
--color-link: 18, 18, 18;
--font-body-family: 'Assistant', sans-serif;
--font-heading-family: 'Assistant', sans-serif;
--page-width: 120rem;
--page-width-margin: 20px;
--buttons-border-width: 1px;
}
Note: Dawn theme stores colours as RGB triplets (e.g., 18, 18, 18) rather than hex values. To use them correctly, wrap them in the rgb(): rgb(var(--color-foreground)).
Step 2: Map theme variables to blog variables
Open Apps > Magefan Blog > Configuration > Design > Custom CSS and paste the following template there. Replace the values on the right with your theme's actual variables or values:
:root {
/* =====================
Colors
===================== */
/* Main text color */
--primary-color: rgb(var(--color-foreground));
--primary-color-alt: rgb(var(--color-foreground));
/* Accent color (links, hover states) */
--secondary-color: rgb(var(--color-button));
/* Body text */
--text-color: rgb(var(--color-foreground));
/* Borders */
--border-color: rgba(var(--color-foreground), 0.1);
/* =====================
Post Titles
===================== */
--post-title-color: rgb(var(--color-foreground));
--post-title-color-hover: rgb(var(--color-button));
/* =====================
Icons
===================== */
--color-icon: rgba(var(--color-foreground), 0.5);
--color-icon-hover: rgb(var(--color-foreground));
/* =====================
Layout
===================== */
--container-max-width: var(--page-width);
--container-gutter: var(--page-width-margin);
/* =====================
Buttons
===================== */
/* Primary button */
--btn-bg-primary-color: rgb(var(--color-button));
--btn-bg-primary-color-hover: rgba(var(--color-button), 0.85);
--btn-primary-color: rgb(var(--color-button-text));
--btn-primary-color-hover: rgb(var(--color-button-text));
/* Secondary button */
--btn-bg-secondary-color: rgb(var(--color-secondary-button));
--btn-bg-secondary-color-hover: rgba(var(--color-foreground), 0.1);
--btn-secondary-color: rgb(var(--color-secondary-button-text));
--btn-secondary-color-hover: rgb(var(--color-secondary-button-text));
/* =====================
Categories
===================== */
--category-bg-color: rgb(var(--color-button));
--category-bg-color-hover: rgba(var(--color-button), 0.85);
--category-color-name: rgb(var(--color-button-text));
}
After saving, the blog will automatically inherit the visual style of your Dawn theme.
Approach 2: Writing custom CSS rules
Sometimes you need more precise control over the blog design. For example, changing the font size of post titles, styling cards, or adjusting spacing between posts.
For these cases, write CSS rules targeting specific blog elements directly.
Step 1: Find the right selector
- Open your blog page in a browser.
- Right-click on the element you want to style and choose the Inspect option.
- Find the element's class name in the Elements panel.
Step 2: Write custom CSS targeting a certain class
Explore main CSS classes in the Magefan Blog.
- Blog listing
| Element | Class |
|---|---|
| Post list | .blog-articles |
| Post card | .blog-articles .blog-article |
| Post title | .blog-articles .blog-article .article-post__title |
| Post image | .article-post__image-wrapper |
| Author | .article-post__author |
| Date | .article-post__data |
| Comments count | .article-post__count-comments |
| Category | .article-post__category-name |
| Post excerpt | .article-post__content |
- Post page
| Element | Class |
|---|---|
| Author | .blog-post__author |
| Date | .blog-post__data |
| Views count | .blog-post__count-views |
| Category |
.blog-post__category-name |
| Comments count | .blog-post__count-comments |
- Comments
| Element | Class |
|---|---|
| Comments section | .c-comments |
| Single comment | .c-comment |
| Comment form | .c-replyform |
| Submit button |
.c-replyform .btn.btn-primary |
| Cancel button | .c-replyform .btn.btn-secondary |
| Reply button | .reply-action |
Blog Custom CSS Use Cases
Now, let's review some cases when the second approach of writing custom CSS using blog classes comes in handy.
Customise postcards
/* Change post title font size */
.blog-articles .blog-article .article-post__title {
font-size: 18px;
font-weight: 700;
}
/* Add shadow to post cards */
.blog-articles .blog-article {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-radius: 8px;
}
Adjust spacing between cards
Spacing between post cards is controlled by the --article--gap variable through CSS grid. The selector depends on the blog template you're using.
- Default template:
.shopify-section__blog .blog-articles {
--article--gap: 24px;
}
- Template 2-1:
.shopify-section__blog .article-templates-2-1 {
--article--gap: 32px;
}
Match comment buttons to Dawn theme
/* Submit button in comment form */
.c-replyform .btn.btn-primary {
border-radius: 0;
border-width: var(--buttons-border-width);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 12px;
}
/* Cancel button in comment form */
.c-replyform .btn.btn-secondary {
border-radius: 0;
border-width: var(--buttons-border-width);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 12px;
}
Combining Both Approaches
For the best result, use both approaches together:
- CSS variables — to sync the global colour palette, typography, and spacing.
- Custom CSS rules — for fine-tuned adjustments that variables don't cover.
Step 1: Override variables
:root {
--primary-color: rgb(var(--color-foreground));
--secondary-color: rgb(var(--color-button));
--container-max-width: var(--page-width);
/* ... */
}
Step 2: Fine-tune specific elements
.blog-articles .blog-article .article-post__title {
font-size: 18px;
}
.shopify-section__blog .blog-articles {
--article--gap: 24px;
}
If you need any help customising the Shopify Blog CSS, feel free to reach out to the Magefan support team for tips and customisation work.
