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!
@Camille18 wrote:
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.
{{ '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 -%}
<div class="main-blog page-width section-{{ section.id }}-padding">
<h1 class="title--primary{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{{ blog.title | escape }}
</h1>
<div class="BlogContentArea">
<div class="left-area{% if settings.right_sidebar_enabled %} left-area--with-sidebar{% endif %}">
<div class="{% if blog.articles_count >= 3 and section.settings.layout == 'grid' %}blog_grid-columns{% endif %} blog-articles {% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}">
{%- for article in blog.articles -%}
<div class="blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- 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
-%}
</div>
{%- endfor -%}
</div>
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
</div>
{% if section.settings.enable_sidebar %}
<div class="right-area">
<div class="right-area-upper">
<h3>CATEGORY BLOG</h3>
{% assign tags = section.settings.category_tags | split: ',' %}
{% assign tag_handle = "all" %}
<a href="{{ blog.url }}" class="category-blog-link">All</a>
{% for tag in tags %}
{% assign tag_handle = tag | strip | downcase | replace: ' ', '-' %}
<a href="{{ blog.url }}/tagged/{{ tag_handle }}" class="category-blog-link">{{ tag | strip }}</a>
{% endfor %}
</div>
{% if section.settings.featured_image %}
<a class="image-link" href="{{ section.settings.featured_image_link }}">
<img class="imagePhoto" src="{{ section.settings.featured_image | image_url }}" alt="Sidebar Image" width="100%" height="100%">
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
{%- 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 %}
