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. 🙂
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024