All things Shopify and commerce
Hi! I currently have this in place :
Online Store > Themes > Actions > Edit Code on the theme that you want to edit. Create a new section called "desktop-mobile-banner". Copy and paste this code and save it:
<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</div>
{% endif %}
{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
Then go into your customize editor and click "Add Section" and scroll to the "Image" category, you should see a section named Desktop Mobile Banner -- click it and then upload both your desktop and mobile banner images. Then you can drag it wherever you want it to appear on your homepage. This will meet your basic needs. You can further customize the schema to give yourself more options, here's some documentation on how to configure the schema and the types of settings you can use in the schema settings:
^ Was copied from another topic.
This is the outcome:
Im so happy with it but I would love to be able to add a clickable link to the banner itself 🙂
Source for code:
page 6 I believe
Hey, did you figure out any solution? Need the exact help! Thank you
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By