Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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
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. 🙂