shopify custom logo section with full dynamic

[cmtengineerrasel]

step1: go to theme code editior >> section >> brands-logo.liquid . then paste this code

<div class="page-width">
<h2 class="title inline-richtext center h2">{{ section.settings.heading }}</h2>
<div class="brandslogo__section">
{% for block in section.blocks %}
<div class="brandslogo__item">
<img src="{{ block.settings.image | img_url: '160x' }}">
</div>
{% endfor %}
</div>
</div>

{% schema %}
{
"name": "Brands Logo",
"tag": "section",
"class": "section section_brands_logo",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "alcuni nostri marchi"
}
],
"max_blocks": 10,
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "image size width 160px recommended"
}
]
}
],
"presets": [
{
"name": "Brands Logo",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
},
{
"type": "slide"
},
{
"type": "slide"
}, {
"type": "slide"
}, {
"type": "slide"
}

]
}
]
}
{% endschema %}

<style>
.section_brands_logo {
margin: 50px 0;
}
.brandslogo__section {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
justify-content: center;
}
.brandslogo__item {
flex-basis: calc(20% - 20px);
}
.brandslogo__item img {
min-width: 160px;
}

@Media only screen and (max-width: 768px) {
.brandslogo__item {
flex-basis: calc(33.33% - 20px);
}
}
@Media only screen and (max-width: 576px) {
.brandslogo__item {
flex-basis: calc(50% - 20px);
}
.section_brands_logo {
margin: 30px 0;
}
}
</style>

 

[jojoslavi]

Thanks for the code. You helped me a lot with my logo.

 

[tobar]

Thanks man, ive been looking for this

 

[alfacent9]

This is exactly what i've looking for! thank you dude

 

[pordo199]

Thanks for the code. You helped me a lot with my logo.

 

[BioStars]

very nice sharing thank you we are waiting for the next

 

[erertertet]

Thanks for sharing the great sharing Thanks for sharing the great sharing

 

[xkingxmoex]

Thank you for sharing! I didn't know about this until today.