Shopify themes, liquid, logos, and UX
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. 🙂
User | RANK |
---|---|
206 | |
173 | |
63 | |
52 | |
47 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023