How to stop a section duplicate content on another page

[JKIRK]

Hi,

I have created a section for a simple banner on a collection page, when I put the section on another page it has the same image. Is there something I can add to the code so I don't have to duplicate the section?

Code here:

<style>
.hidden_desktop{
  display:block;
  text-align: center;
  width: 100%;
}
.hidden_mobile {
  display: none;
  text-align: center;
  width: 100%;
}
@media (min-width:850px){
  .hidden_desktop{
    display:none;
    text-align: center;
    width: 100%;
  }
  .hidden_mobile {
    display: block;
    text-align: center;
    width: 100%;
  }
}
</style>
<section data-section-id="{{ section.id }}"'>
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive hidden_mobile lazyload" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive hidden_mobile lazyload" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.mobile_image != blank %}
<img class="img-responsive hidden_desktop lazyload" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" />
{% else %}
<img class="img-responsive hidden_desktop lazyload" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}
{% endif %}
</a>
</div>  
</div>
</div>
</a>
</section>


{% schema %}
  {
    "name": "Desktop Mobile Image 2",
    "settings": [
{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
}
],
  "presets": [
    {
      "name": "Desktop Mobile Image 2",
      "category": "Content"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Thanks

[MarinaPetrovic]

Hi @JKIRK , this problem is solved with Shopify 2.0. So best way is to switch your code to use Shopify 2.0 (json templates), another way is to create another section. Or use the existing one - but you'll have to use may if conditions and create additional elements in your schema - so anyway you're duplicating it. 🙂