Hello everyone I am new here
I wrote a code to show my collection as circle profile type and it’s working fine, but as soon as I added same section below and started to edit it from theme customizer both section are getting same, I am not sure how do i fix it.
The code I am using
<section class="slider-cont-col2">
<h2 class="sub-col-title2">{{ section.settings.title | upcase }}</h2>
<div class="slider-wrap-col2">
{% for block in section.blocks %}
{%- assign collection = block.settings.collection -%}
{%- assign collection_image = block.settings.image | default: collection.featured_image -%}
{%- assign title = block.settings.title | default: collection.title -%}
<div title="{{ title }}" class="cust-col-link2">
<div class="cust-collection-slider2">
<div class="slider-collec-image-wrap2">
<img
width="{{ section.settings.image_size }}px"
height="{{ section.settings.image_size }}px"
loading="lazy"
sizes="{{ section.settings.image_size }}px"
class="slider-collec-image2"
src="{{ collection_image | image_url }}"
>
</div>
<h2 class="slider-collec-name2">{{ title }}</h2>
</div>
</div>
{% endfor %}
</div>
</section>
<style>
.slider-cont-col2 {
column-count: auto;
column-gap: 20px;
background: {{ section.settings.bg }};
margin: {{ section.settings.margin }}px 0px;
}
.sub-col-title2 {
width: 100%;
text-align: center;
margin: 0;
}
.slider-wrap-col2 {
text-align: center;
overflow: auto;
white-space: nowrap;
display: flex;
padding: 20px;
gap: 20px;
}
@media (min-width: 700px){
.slider-wrap-col2{
text-align: center;
overflow: auto;
white-space: nowrap;
display: flex;
justify-content: {{ section.settings.type }};
flex-wrap: wrap;
gap: 10px;
padding: 10px;
}
}
.cust-collection-slider2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cust-collection-slider2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slider-collec-image-wrap2 {
width: {{ section.settings.image_size }}px;
height: {{ section.settings.image_size }}px;
}
.slider-collec-image2 {
width: 100%;
height: 100%;
border-radius: 50%;
border:solid;
border-width: {{ section.settings.br }}px;
border-color: {{ section.settings.br_color }};
object-fit: cover;
}
.slider-collec-name2 {
overflow: hidden;
text-overflow: ellipsis;
width: {{ section.settings.image_size }}px;
{% if section.settings.type != 'center' %}
width: 100%;
{% endif %}
margin: 0;
text-align: center;
font-size: {{ section.settings.text_size }}px;
}
.cust-col-link2 {
text-decoration: none;
transition: 0.3s ease-in-out;
}
</style>
{% schema %}
{
"name": "Profile Slider 2",
"settings": [
{
"type":"color",
"id": "bg",
"label": "Background Color",
"default": "#dee8ff"
},
{
"type": "inline_richtext",
"id": "title",
"label": "Title",
"default": "Sub Collection"
},
{
"type": "select",
"id": "type",
"label": "Full Width Column",
"options": [
{
"value": "space-evenly",
"label": "Full Width"
},
{
"value": "center",
"label": "Center No Gap"
}
],
"default": "center"
},
{
"type": "range",
"id": "image_size",
"label": "Image Size",
"min": 40,
"max":140,
"default": 100
},
{
"type": "range",
"id": "text_size",
"label": "Text Size",
"min": 10,
"max":110,
"default": 18
},
{
"type": "range",
"id": "br",
"label": "Border Width",
"min": 1,
"max":20,
"default": 3
},
{
"type": "range",
"id": "margin",
"label": "Section Margin",
"min": 0,
"max":50,
"default": 0
},
{
"type":"color",
"id": "br_color",
"label": "Border Color",
"default": "#fff"
}
],
"blocks": [
{
"type": "profile",
"name": "Profile Collection",
"settings": [
{
"type":"inline_richtext",
"id": "title",
"label": "Collection Title"
},
{
"type":"image_picker",
"id": "image",
"label": "Select Image"
}
]
}
],
"presets": [
{
"name": "Profile Slider 2"
}
]
}
{% endschema %}
Thanks in advance