Hello, I have a dawn theme shopify account and I’m looking for a free app that will categorize my blogposts. Or other ways to categorize it. Thank you for those who will help me.
Topic summary
A Shopify store owner using the Dawn theme seeks a free solution to categorize blog posts. Community members have provided two main approaches:
Tag-Based Filtering:
- Use Shopify’s built-in tagging system to create categories
- Requires adding custom code to
main-blog.liquidfile - Creates a filter menu displaying all blog tags
- One responder shared a working demo showing the implementation
Complete Layout Replacement:
- Another user suggests replacing the entire
main-blog.liquidcode - Includes additional features like sidebar categories, featured images, and custom category tags
- References a live example site for visual reference
Current Status:
- The original poster shared a screenshot but hasn’t confirmed which solution they’re pursuing
- Multiple follow-up requests for clarification remain unanswered
- Both solutions involve theme code editing rather than app installation
- Code snippets and visual demos have been provided for implementation
Hi @Camille18 ,
May I suggest you use tag to create category. You can refer this demo https://seo-blog-demo.myshopify.com/blogs/news
- Go to Store Online-> theme → edit code
- Sections/main-blog.liquid
- Refer screenshot to add code below
{% if blog.tags.size > 0 %}
- Filter by:
- {{ 'All Topics' }}
{% for tag in blog.all_tags %}
- {{ tag }}
{% endfor %}
{% endif %}
To achieve the desired blog layout, follow these steps in your Shopify theme editor:
- Access the Code Editor: From your Shopify admin, navigate to ‘Online Store’ > ‘Themes’.
- Select Your Theme: Find the theme you want to modify and click the ‘Actions’ button, then select ‘Edit code’.
- Find the File: In the ‘Sections’ folder, locate the file named ‘main-blog.liquid’.
- Replace the Code: Delete all the existing code within ‘main-blog.liquid’ and replace it with the code I’ve provided.
- Save and Preview: Save your changes and preview your blog to see the updated layout. This will give you a similar look to the blog at
Diana Web even with the comprehensive settings , try it mate!
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
{% if section.settings.layout == 'collage' %}
{%- if section.settings.show_date and section.settings.show_author -%}
.blog-articles__article:first-child .card__information .article-card__info.caption-with-letter-spacing.h5{
width: 100%;
max-width: 600px;
margin: auto
}
{%- endif -%}
{% endif %}
.section-{{ section.id }}-padding h1, .section-{{ section.id }}-padding .h1 {
font-size: calc(var(--font-heading-scale) * 3rem);
font-weight: var(--font-heading-weight);
}
.section-{{ section.id }}-padding h1.title--primary{
text-align: center;
padding-bottom: 2rem !important;
}
@media screen and (min-width: 600px) {
.section-{{ section.id }}-padding .blog_grid-columns{
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding .blog_grid-columns{
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.section-{{ section.id }}-padding h1, .section-{{ section.id }}-padding .h1 {
font-size: calc(var(--font-heading-scale) * 4rem);
font-weight: var(--font-heading-weight);
}
.blog_grid-columns.blog-articles{
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 650px) {
.section-{{ section.id }}-padding h1.title--primary{
margin: 1rem auto;
}
}
.BlogContentArea {
display: flex;
gap: 20px;
position: relative; /* Add position relative to container */
}
.left-area {
flex: 1; /* Take remaining space */
width: 80%;
}
.right-area {
width: 20%;
position: sticky;
top: 20px;
height: fit-content;
align-self: flex-start;
overflow:hidden;
}
.right-area h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
padding: 40px 30px;
padding-bottom:0px;
text-decoration:underline;
text-underline-offset: 7px;
}
.right-area-upper{
border:1px solid #dcdcdc;
}
.category-blog-link {
display: block;
margin-bottom: 10px;
color: #333;
text-decoration: none;
font-size: 14px;
padding: 4px 30px;
background-color: #fff;
transition: background-color 0.3s ease;
}
.category-blog-link:last-child {
margin-bottom: 40px;
}
.category-blog-link:hover {
background-color: #e8e8e8;
}
.right-area img {
max-width: 100%;
height: auto;
margin-top: 40px;
width: 100%;
transition: transform 0.3s ease-in-out;
}
.right-area img:hover {
transform: scale(1.05);
}
@media (max-width: 768px) {
.BlogContentArea {
flex-direction: column;
}
.left-area,
.right-area {
width: 100%;
}
.right-area {
position: static;
margin-top: 30px;
}
}
{%- endstyle -%}
{%- paginate blog.articles by 8 -%}
#
{{ blog.title | escape }}
{%- for article in blog.articles -%}
{%- render 'article-card',
article: article,
media_height: section.settings.image_height,
media_aspect_ratio: article.image.aspect_ratio,
show_image: section.settings.show_image,
show_date: section.settings.show_date,
show_author: section.settings.show_author,
show_excerpt: true
-%}
{%- endfor -%}
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{% if section.settings.enable_sidebar %}
### CATEGORY BLOG
{% assign tags = section.settings.category_tags | split: ',' %}
{% assign tag_handle = "all" %}
All
{% for tag in tags %}
{% assign tag_handle = tag | strip | downcase | replace: ' ', '-' %}
{{ tag | strip }}
{% endfor %}
{% if section.settings.featured_image %}
{% endif %}
{% endif %}
{%- endpaginate -%}
{% schema %}
{
"name": "t:sections.main-blog.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "header",
"content": "t:sections.main-blog.settings.header.content"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "grid",
"label": "t:sections.main-blog.settings.layout.options__1.label"
},
{
"value": "collage",
"label": "t:sections.main-blog.settings.layout.options__2.label"
}
],
"default": "collage",
"label": "t:sections.main-blog.settings.layout.label",
"info": "t:sections.main-blog.settings.layout.info"
},
{
"type": "checkbox",
"id": "show_image",
"default": true,
"label": "t:sections.main-blog.settings.show_image.label"
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.main-blog.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.main-blog.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.main-blog.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.main-blog.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.main-blog.settings.image_height.label",
"info": "t:sections.main-blog.settings.image_height.info"
},
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.main-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.main-blog.settings.show_author.label"
},
{
"type": "paragraph",
"content": "t:sections.main-blog.settings.paragraph.content"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
},
{
"type": "checkbox",
"id": "enable_sidebar",
"default": false,
"label": "Show Categories Sidebar"
},
{
"type": "image_picker",
"id": "featured_image",
"label": "Featured Image",
"info": "Select an image for the featured section."
},
{
"type": "url",
"id": "featured_image_url",
"label": "Featured Image URL",
"info": "Enter the URL where this image should link to."
},
{
"type": "text",
"id": "category_tags",
"label": "Category Tags (comma-separated)",
"default": "holiday,vintage,summer"
}
]
}
{% endschema %}
To achieve the desired blog layout, follow these steps in your Shopify theme editor:
Access the Code Editor: From your Shopify admin, navigate to ‘Online Store’ > ‘Themes’.
Select Your Theme: Find the theme you want to modify and click the ‘Actions’ button, then select ‘Edit code’.
Find the File: In the ‘Sections’ folder, locate the file named ‘main-blog.liquid’.
Replace the Code: Delete all the existing code within ‘main-blog.liquid’ and replace it with the code I’ve provided.
Save and Preview: Save your changes and preview your blog to see the updated layout. This will give you a similar look to the blog at
Diana Web even with the comprehensive settings , try it mate!
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-blog.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
{% if section.settings.layout == 'collage' %}
{%- if section.settings.show_date and section.settings.show_author -%}
.blog-articles__article:first-child .card__information .article-card__info.caption-with-letter-spacing.h5{
width: 100%;
max-width: 600px;
margin: auto
}
{%- endif -%}
{% endif %}
.section-{{ section.id }}-padding h1, .section-{{ section.id }}-padding .h1 {
font-size: calc(var(--font-heading-scale) * 3rem);
font-weight: var(--font-heading-weight);
}
.section-{{ section.id }}-padding h1.title--primary{
text-align: center;
padding-bottom: 2rem !important;
}
@media screen and (min-width: 600px) {
.section-{{ section.id }}-padding .blog_grid-columns{
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding .blog_grid-columns{
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.section-{{ section.id }}-padding h1, .section-{{ section.id }}-padding .h1 {
font-size: calc(var(--font-heading-scale) * 4rem);
font-weight: var(--font-heading-weight);
}
.blog_grid-columns.blog-articles{
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 650px) {
.section-{{ section.id }}-padding h1.title--primary{
margin: 1rem auto;
}
}
.BlogContentArea {
display: flex;
gap: 20px;
position: relative; /* Add position relative to container */
}
.left-area {
flex: 1; /* Take remaining space */
width: 80%;
}
.right-area {
width: 20%;
position: sticky;
top: 20px;
height: fit-content;
align-self: flex-start;
overflow:hidden;
}
.right-area h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
padding: 40px 30px;
padding-bottom:0px;
text-decoration:underline;
text-underline-offset: 7px;
}
.right-area-upper{
border:1px solid #dcdcdc;
}
.category-blog-link {
display: block;
margin-bottom: 10px;
color: #333;
text-decoration: none;
font-size: 14px;
padding: 4px 30px;
background-color: #fff;
transition: background-color 0.3s ease;
}
.category-blog-link:last-child {
margin-bottom: 40px;
}
.category-blog-link:hover {
background-color: #e8e8e8;
}
.right-area img {
max-width: 100%;
height: auto;
margin-top: 40px;
width: 100%;
transition: transform 0.3s ease-in-out;
}
.right-area img:hover {
transform: scale(1.05);
}
@media (max-width: 768px) {
.BlogContentArea {
flex-direction: column;
}
.left-area,
.right-area {
width: 100%;
}
.right-area {
position: static;
margin-top: 30px;
}
}
{%- endstyle -%}
{%- paginate blog.articles by 8 -%}
#
{{ blog.title | escape }}
{%- for article in blog.articles -%}
{%- render 'article-card',
article: article,
media_height: section.settings.image_height,
media_aspect_ratio: article.image.aspect_ratio,
show_image: section.settings.show_image,
show_date: section.settings.show_date,
show_author: section.settings.show_author,
show_excerpt: true
-%}
{%- endfor -%}
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{% if section.settings.enable_sidebar %}
### CATEGORY BLOG
{% assign tags = section.settings.category_tags | split: ',' %}
{% assign tag_handle = "all" %}
All
{% for tag in tags %}
{% assign tag_handle = tag | strip | downcase | replace: ' ', '-' %}
{{ tag | strip }}
{% endfor %}
{% if section.settings.featured_image %}
{% endif %}
{% endif %}
{%- endpaginate -%}
{% schema %}
{
"name": "t:sections.main-blog.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "header",
"content": "t:sections.main-blog.settings.header.content"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "grid",
"label": "t:sections.main-blog.settings.layout.options__1.label"
},
{
"value": "collage",
"label": "t:sections.main-blog.settings.layout.options__2.label"
}
],
"default": "collage",
"label": "t:sections.main-blog.settings.layout.label",
"info": "t:sections.main-blog.settings.layout.info"
},
{
"type": "checkbox",
"id": "show_image",
"default": true,
"label": "t:sections.main-blog.settings.show_image.label"
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.main-blog.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.main-blog.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.main-blog.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.main-blog.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.main-blog.settings.image_height.label",
"info": "t:sections.main-blog.settings.image_height.info"
},
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.main-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.main-blog.settings.show_author.label"
},
{
"type": "paragraph",
"content": "t:sections.main-blog.settings.paragraph.content"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
},
{
"type": "checkbox",
"id": "enable_sidebar",
"default": false,
"label": "Show Categories Sidebar"
},
{
"type": "image_picker",
"id": "featured_image",
"label": "Featured Image",
"info": "Select an image for the featured section."
},
{
"type": "url",
"id": "featured_image_url",
"label": "Featured Image URL",
"info": "Enter the URL where this image should link to."
},
{
"type": "text",
"id": "category_tags",
"label": "Category Tags (comma-separated)",
"default": "holiday,vintage,summer"
}
]
}
{% endschema %}
Hi @Camille18
Could you please elaborate on your request further? I mean in detail if possible.
Thank you so much!
Best,
Daisy - Avada Support Team
Hi @Camille18
I’m wondering if you received my latest message.
Looking forward to hearing from you soon. Thank you!
Best,
Daisy - Avada Support Team