How do I display different images for mobile and desktop on image banner with the Trade theme?

[Jason10]

I want the Image banner section on the front page to be displayed with a different picture on the mobile version, because the image height on the mobile page is way too short which i really don't like even it's already set to "large". How can I do that? 

Also, is it possible to change the text content position to bottom/top instead of just at the middle section? 

Any help is greatly appreciated!

[Huptech-Web · Accepted solution]

Hey @Jason10 
please try this code with dynamic options 

{%- style -%}
  @media screen and (min-width: 821px) {
   {%if section.settings.about-image-main-mobile %}
    .collection-banner-container {
      background-image: url('{{ section.settings.about-image-main-2 | img_url: 'master' }}');
      min-height: 400px;
      height: 100%;
    }
  {% endif %}
  }
  @media screen and (max-width: 820px) {
    {% if  section.settings.about-image-main-mobile %}
    .collection-banner-container {
      background-image: url('{{ section.settings.about-image-main-mobile | img_url: 'master' }}');
      min-height: 750px;
      height: 100%;
      background-position: bottom;
    }
  {% endif %}
  }
{%- endstyle -%}

<div class="collection-banner-container">
</div>

{% schema %}
  {
    "name": "Collection Banner",
    "settings": [
      {
        "type": "image_picker",
        "label": "Collection Banner Background Image Desktop",
        "id": "about-image-main-2"
      }, {
        "type": "image_picker",
        "label": "Collection Banner Background Image Mobile",
        "id": "about-image-main-mobile"
      }
    ]
  }
{% endschema %}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K

[Huptech-Web · Accepted solution]

@Jason10 , Dynamic options allow you to change your image using theme options, similar to the image.

[Huptech-Web · Accepted solution]

Hi @Jason10,

Firstly, please provide a screenshot and the page URL showing where you want to display different images for mobile and desktop. This will help me to provide you with the appropriate code and file name and assist you better.
Thank you 
K.K

[Huptech-Web · Accepted solution]

got it @Jason10 can you please send this banner file code also 

thanks 
K.K

[Huptech-Web · Accepted solution]

hey @Jason10 is it possible to add me as a staff on kaushik@huptechweb.com this mail i'll add the code and then provide a small video on how to add images using theme options 

[Huptech-Web · Accepted solution]

@Jason10 if you don't know how to add staff members please follow this Steps:

1. From your Shopify admin, click Settings > Users and permissions.
2. Click Add Staff.
3. Enter the staff members' full name and their email address.
4. Do either of the following:
   • Select which permissions you want to give the staff member.
   • To give the staff member all available permissions, click Select All.
5. Click Send Invite.

[Huptech-Web · Accepted solution]

I'll send the collaborator request please check and accept 

[oscprofessional]

Hello @Jason10 I have checked your issue
can you please use mobile view and desktop view 2 different images
please check this

if any other help, please connect with us

[Jason10]

Thanks for the reply. No I can only upload 1 picture for the image banner, so the picture on both desktop and mobile view are the same picture.

[oscprofessional]

@Jason10Can you please share your store URL?

[Jason10]

Ulnar.co

[Huptech-Web · Accepted solution]

Hey @Jason10 
please try this code with dynamic options 

{%- style -%}
  @media screen and (min-width: 821px) {
   {%if section.settings.about-image-main-mobile %}
    .collection-banner-container {
      background-image: url('{{ section.settings.about-image-main-2 | img_url: 'master' }}');
      min-height: 400px;
      height: 100%;
    }
  {% endif %}
  }
  @media screen and (max-width: 820px) {
    {% if  section.settings.about-image-main-mobile %}
    .collection-banner-container {
      background-image: url('{{ section.settings.about-image-main-mobile | img_url: 'master' }}');
      min-height: 750px;
      height: 100%;
      background-position: bottom;
    }
  {% endif %}
  }
{%- endstyle -%}

<div class="collection-banner-container">
</div>

{% schema %}
  {
    "name": "Collection Banner",
    "settings": [
      {
        "type": "image_picker",
        "label": "Collection Banner Background Image Desktop",
        "id": "about-image-main-2"
      }, {
        "type": "image_picker",
        "label": "Collection Banner Background Image Mobile",
        "id": "about-image-main-mobile"
      }
    ]
  }
{% endschema %}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K

[Jason10]

Thanks for the help! I’m sorry may I ask what is dynamic options? I’m not sure where should I paste the code to🙏

[Huptech-Web · Accepted solution]

@Jason10 , Dynamic options allow you to change your image using theme options, similar to the image.

[Jason10]

Sorry I'm confused. Where should I paste the code to? And i don't have the "collection banner" template available in my "Trade" shopify theme, that's how it looks like on my end:

Thanks!

[Huptech-Web · Accepted solution]

Hi @Jason10,

Firstly, please provide a screenshot and the page URL showing where you want to display different images for mobile and desktop. This will help me to provide you with the appropriate code and file name and assist you better.
Thank you 
K.K

[Jason10]

Sure, URL is https://ulnar.co/

Image on the front page:

Thanks!

[Huptech-Web · Accepted solution]

got it @Jason10 can you please send this banner file code also 

thanks 
K.K

[Jason10]

Sure, where can I find the banner file code? Thanks

[Huptech-Web · Accepted solution]

hey @Jason10 is it possible to add me as a staff on kaushik@huptechweb.com this mail i'll add the code and then provide a small video on how to add images using theme options 

[Jason10]

Sorry my Basic Shopify plan doesn’t come with a staff account function🙏

[Huptech-Web · Accepted solution]

@Jason10 if you don't know how to add staff members please follow this Steps:

1. From your Shopify admin, click Settings > Users and permissions.
2. Click Add Staff.
3. Enter the staff members' full name and their email address.
4. Do either of the following:
   • Select which permissions you want to give the staff member.
   • To give the staff member all available permissions, click Select All.
5. Click Send Invite.

[Jason10]

That’s what I see on my end:

And if you’re referring to the collaborator function, my collaborator request code is 1762.

[Huptech-Web · Accepted solution]

I'll send the collaborator request please check and accept 

[Jason10]

Request accepted. Thank you! 

[Huptech-Web · Accepted solution]

Hey @Jason10, the changes have been made from my end. I will send a Google Meet invitation to explain how to add the second image and all the other details. Please check your store email.

[Jason10]

Problem solved! Thank you so much for the help! 🙌

[malahf]

Hello,

Could you please clarify what dynamic code is? I'd like to do the same thing as the OP to my own website (same image but different sizes to accommodate the desktop vs mobile issue). 

Thank you,

Lauren

[viki_9501]

hello,

experiencing the same issue. the banner for web is showing for both desktop and web, could you please help?