I am currently trying to change the layout of the blogs with my Shopify Motion theme. Currently, it is in a list style but I would like to change it to a grid-style layout. There is no option to do that in the store customizer.
Hello,
Can you give me your Theme name? And Your Domain, then I will definitely help you
My theme name is called Motion and the store is:
https://swamp-dog-outfitters-llc.myshopify.com/ or you can go to swampdog.com
I checked your Theme Configuration, but I didn’t find the Grid view option. I you permit then I will create CSS, and then your blog will show in gid view.
before start give me your blog Page Url I will review then i will create CSS if needed then will create js Also
There a few places the blog page is being used where we’d like it changed. Will you need the link to one or all? Here is a link to one:
We need To change This File Code and Create Some CSS so, please copy, and Past this page code in a Text file I will definitely change The layout because your blog header and article are in the same container that’s why it’s we need to change the page layout coding.
after that result:
Here is the code for the blog template:
{%- paginate blog.articles by 5 -%}
{%- render 'breadcrumbs' -%}
{%- assign is_even_post = false -%}
{%- for article in blog.articles -%}
{% comment %}Set the next post as an even one{% endcomment %}
{%- liquid
if is_even_post
assign is_even_post = false
else
assign is_even_post = true
endif
-%}
{%- endfor -%}
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{%- endpaginate -%}
{% schema %}
{
"name": "t:sections.blog-template.name",
"settings": [
{
"type": "checkbox",
"id": "blog_show_tag_filter",
"label": "t:sections.blog-template.settings.blog_show_tag_filter.label"
},
{
"type": "checkbox",
"id": "blog_show_rss",
"label": "t:sections.blog-template.settings.blog_show_rss.label"
},
{
"type": "checkbox",
"id": "blog_show_tags",
"label": "t:sections.blog-template.settings.blog_show_tags.label"
},
{
"type": "checkbox",
"id": "blog_show_date",
"label": "t:sections.blog-template.settings.blog_show_date.label",
"default": true
},
{
"type": "checkbox",
"id": "blog_show_comments",
"label": "t:sections.blog-template.settings.blog_show_comments.label",
"default": true
},
{
"type": "checkbox",
"id": "blog_show_author",
"label": "t:sections.blog-template.settings.blog_show_author.label"
}
]
}
{% endschema %}
and here is the code for the CSS:
.template-blog .article{
margin-bottom:60px
}
@media only screen and (min-width:590px){
.template-blog .article{
margin-bottom:120px
}
}
.template-blog .article:last-child{
margin-bottom:0
}
@media only screen and (min-width:590px){
.template-blog .article:last-child{
margin-bottom:60px
}
}
.article .section-header__title,.article__date,.article__h3{
margin-bottom:5px
}
@media only screen and (min-width:590px){
.article .section-header__title,.article__date,.article__h3{
margin-bottom:10px
}
}
.article__content-meta{
margin-bottom:20px;
}
.article__featured-image{
display:block;
margin-bottom:40px
}
.article__featured-image img{
display:block;
margin:0 auto;
}
.article__body{
margin-bottom:20px
}
@media only screen and (min-width:590px){
.article__body{
margin-bottom:40px
}
}
.article--layout{
display:flex;
align-items:center;
justify-content:flex-end
}
@media only screen and (max-width:589px){
.article--layout{
flex-wrap:wrap
}
}
.article__content{
width:100%;
}
.article__image-wrap{
position:relative;
flex:1 1 100%;
height:200px;
margin:40px 0;
}
.article__image-wrap--empty{
height:0;
margin:0;
}
.article__image img{
position:absolute;
}
@media only screen and (min-width:590px){
.article__content{
flex:1 1 auto;
padding:40px 40px 40px 0;
width:100%;
max-width:50%;
}
.article__content--right{
padding:40px 0 40px 40px;
}
.article__image-wrap{
position:static;
height:450px;
margin:0;
}
.article__image-wrap--right{
order:2;
}
.article__image{
position:absolute;
left:0;
right:50%;
width:auto;
height:450px;
min-width:0
}
.article__image-wrap--right .article__image{
left:50%;
right:0
}
}
.article__comment{
margin-bottom:40px
}
.article__comment:last-child{
margin-bottom:0;
}
1 Like
Note: Before changing Template And CSS, Take backup
That is Liquid Template Code
{%- paginate blog.articles by 5 -%}
{%- render 'breadcrumbs' -%}
{%- assign is_even_post = false -%}
{%- for article in blog.articles -%}
{% comment %}Set the next post as an even one{% endcomment %}
{%- liquid
if is_even_post
assign is_even_post = false
else
assign is_even_post = true
endif
-%}
{%- endfor -%}
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{%- endpaginate -%}
{% schema %}
{
"name": "t:sections.blog-template.name",
"settings": [
{
"type": "checkbox",
"id": "blog_show_tag_filter",
"label": "t:sections.blog-template.settings.blog_show_tag_filter.label"
},
{
"type": "checkbox",
"id": "blog_show_rss",
"label": "t:sections.blog-template.settings.blog_show_rss.label"
},
{
"type": "checkbox",
"id": "blog_show_tags",
"label": "t:sections.blog-template.settings.blog_show_tags.label"
},
{
"type": "checkbox",
"id": "blog_show_date",
"label": "t:sections.blog-template.settings.blog_show_date.label",
"default": true
}, {
"type": "checkbox",
"id": "blog_show_comments",
"label": "t:sections.blog-template.settings.blog_show_comments.label",
"default": true
}, {
"type": "checkbox",
"id": "blog_show_author",
"label": "t:sections.blog-template.settings.blog_show_author.label"
}
]
}
{% endschema %}
And put that CSS code:
.gridview .article--layout{
display:block !important;
}
.gridview{
display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap: 2rem;
}
.gridview .article__content{
max-width:100% !important;
}
After putting My Code Output just like this
can you share me these dedicated page URL then I will check why CSS is not working
These are all the page URLs that involve the blogs:
https://www.swampdog.com/blogs/daily-devotions
https://www.swampdog.com/blogs/podcasts
https://www.swampdog.com/blogs/pre-hunt