Solved

Why does the same section code affect both sections in theme customizer?

penguin2
Shopify Partner
4 0 0

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

Accepted Solution (1)

BrainStation23
Shopify Partner
262 43 42

This is an accepted solution.

@penguin2 
We can understand your problem 
To solve this, you need to add section CSS classes.like bellow,

<section class="slider-cont-col2-{{ section.id }}"> // Add section ID
  <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-{{ section.id }} { //Also add CSS class like this 
          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 %}


appedn 

{{ section.id }} in section css class

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

Reply 1 (1)

BrainStation23
Shopify Partner
262 43 42

This is an accepted solution.

@penguin2 
We can understand your problem 
To solve this, you need to add section CSS classes.like bellow,

<section class="slider-cont-col2-{{ section.id }}"> // Add section ID
  <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-{{ section.id }} { //Also add CSS class like this 
          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 %}


appedn 

{{ section.id }} in section css class

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com