How to stop a section duplicate content on another page

JKIRK
Excursionist
55 0 7

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

Reply 1 (1)

MarinaPetrovic
Shopify Partner
552 124 178

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. 🙂

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution