Adding a separate homepage banner for mobile.

Aaron_Mihell
New Member
4 0 0

Hi. I want to add a separate banner image for my homepage on mobile but I am unsure on how to do it. I am using a third party theme but know the rough area on where to look to make the changes.

I think i need to be looking in the section-banner.liquid files but am unsure what code I need to add. Preferably I want to add code to then allow me to make the changes within the visual editor if possible.

If anyone could help, that would be great? Thanks

Here is the code I believe I need to make changes to:

 

<div data-section-id="{{ section.id }}" data-section-type="section-banner-v1" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %}">
  <div class="section-banner-v1 mt-all">
      <div class="img-banner images">
        {% if section.settings.img_banner != blank %}
        <a href="{{section.settings.url_banner}}"><img src="{{section.settings.img_banner | img_url:'master'}}" class="img-fluid"></a>
        {% else %}
           <a href="{{section.settings.url_banner}}"><img src="//placehold.it/1920x953" class="img-fluid" alt=""></a>
        {% endif %}
        <div class="banner-info">
          <div class="top_title list-inline">
             <h3 class="title list-inline-item mr-0">
              <a href="{{section.settings.url_banner}}">{{section.settings.title}}</a>
            </h3>
          </div>
          <div class="subtitle">{{section.settings.sub_title}}</div>
        </div>
      </div>
  </div>
</div>
<style>
  .section-banner-v1 .img-banner .banner-info{
    border: 2px dashed {{section.settings.border_color}};
  }
</style>

{% schema %}
{
  "name": "Banner v1",
  "settings": [
	{
      "type": "image_picker",
      "id": "img_banner",
      "label": "Image"
    },
	{
      "type": "url",
      "id": "url_banner",
      "label": "URL button",
      "default": "/collections/all"
    },
    {
    "type": "color",
    "id": "border_color",
    "label": "Border Color",
    "default": "#fa9db7"
    },
	{
      "type": "text",
      "id": "title",
      "label": "Title banner",
      "default": "Hinter.Conders"
    },
	{
      "type": "text",
      "id": "sub_title",
      "label": "Sub Title banner",
      "default": "MANY OF MANY"
    },
    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    }
  ],
  "presets": [
    {
      "name": "Banner v1",
      "category": "Banner"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

0 Likes
Guleria
Shopify Partner
1254 263 344

Hello @Aaron_Mihell ,

Replace your code this one. After that check theme settings you will find an option to upload image for mobile. 

<div data-section-id="{{ section.id }}" data-section-type="section-banner-v1" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %}">
  <div class="section-banner-v1 mt-all">
      <div class="img-banner images">
        {% if section.settings.img_banner != blank %}
        <a class="desktop-only" href="{{section.settings.url_banner}}"><img src="{{section.settings.img_banner | img_url:'master'}}" class="img-fluid"></a>
        <a class="mobile-only" href="{{section.settings.url_banner }}"><img src="{{section.settings.img_banner_mo | img_url:'master'}}" class="img-fluid"></a>
        {% else %}
           <a href="{{section.settings.url_banner}}"><img src="//placehold.it/1920x953" class="img-fluid" alt=""></a>
        {% endif %}
        <div class="banner-info">
          <div class="top_title list-inline">
             <h3 class="title list-inline-item mr-0">
              <a href="{{section.settings.url_banner}}">{{section.settings.title}}</a>
            </h3>
          </div>
          <div class="subtitle">{{section.settings.sub_title}}</div>
        </div>
      </div>
  </div>
</div>
<style>
  .section-banner-v1 .img-banner .banner-info{
    border: 2px dashed {{section.settings.border_color}};
  }
  .mobile-only{ display: none; } 
  @media screen and (max-width: 768px) { .desktop-only{ display: none; } .mobile-only{ display: block; } } 
</style>

{% schema %}
{
  "name": "Banner v1",
  "settings": [
	{
      "type": "image_picker",
      "id": "img_banner",
      "label": "Desktop Image"
    },
	{
      "type": "image_picker",
      "id": "img_banner_mo",
      "label": "Mobile Image"
    },
	{
      "type": "url",
      "id": "url_banner",
      "label": "URL button",
      "default": "/collections/all"
    },
    {
    "type": "color",
    "id": "border_color",
    "label": "Border Color",
    "default": "#fa9db7"
    },
	{
      "type": "text",
      "id": "title",
      "label": "Title banner",
      "default": "Hinter.Conders"
    },
	{
      "type": "text",
      "id": "sub_title",
      "label": "Sub Title banner",
      "default": "MANY OF MANY"
    },
    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    }
  ],
  "presets": [
    {
      "name": "Banner v1",
      "category": "Banner"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
Aaron_Mihell
New Member
4 0 0

Thank you so much for your help, I really appreciate it.

Just a quick question about the code. Does the image change depending on the screen size or device?

 

Thanks,

Aaron

0 Likes
Guleria
Shopify Partner
1254 263 344

Both but technically we can say screen size because css media queries works screen wise.

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
Aaron_Mihell
New Member
4 0 0

Hi Guleria,

 

So I just checked my Shopify store and unfortunately I made a mistake and it was in fact a slide show I need to change.

Would you be able to help with this? Ive attached the correct code this time. my mistake.

Thank you.

<div data-section-id="{{ section.id }}" data-section-type="section-slideshow-v5" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %} {% if section.settings.sections_layout == "dark" %}background: {{section.settings.sections_bg_color}};{% endif %}">
  <div class="section-slideshow-v5">
      <div class="js-slideshow-v5">       
        {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
        {% if block.type == "slideshow" %}
        <div class="itemv-slide-h5">
          <div class=" {% if section.settings.select_effect == 'no_effect' %} info-sideh5-no-effect {% elsif section.settings.select_effect == 'Effect_1' %} info-sideh5 {% elsif section.settings.select_effect == 'Effect_2'  %} info-sideh5 effect2  {% endif %}">
            <div class="picture-slideshow">
              {% if block.settings.block_banerimage != blank %}
              <a href="{{block.setting.block_url}}">
              <img class="w-100" src="{{block.settings.block_banerimage | img_url: 'master'}}" class="img-responsive img_slideh1" alt="">
              </a>
              {% else %}
              <a href="">
              <img class="w-100" src="//placehold.it/1920x1000" class="img-responsive img_slideh1" alt="slideshow">
              </a>
              {% endif %}
            </div>
         
            <div class="{% if block.settings.select_position_content == 'left' %} box-content  {% elsif block.settings.select_position_content == 'center' %} box-content-center  {% elsif block.settings.select_position_content == 'right' %} box-content-right {% endif %} " >
              {% if block.settings.block_title_top and block.settings.block_title_top2 and block.settings.block_buton != blank %}
              <div class="box-info box-info-{{block.id}}">
                <div class="box-title">
                  {% if block.settings.block_title_top != blank %}
                  <h3 class="titlebig mb-0" style="color:{{block.settings.color_block_title_top}};">{{ block.settings.block_title_top }}</h3>
                  {% endif %} 
                </div>
                <div class="box-title2">
                  {% if block.settings.block_title_top2 != blank %}
                  <h3 class="title-small mb-0" style="color:{{block.settings.color_block_title_top2}};">{{ block.settings.block_title_top2 }}</h3>
                  {% endif %}
                </div>
                  {% if block.settings.block_buton != blank %}
                  <a class="mt-4 button-main1 button-shop-{{block.id}} " href="{{block.settings.block_url}}">
                   {{ block.settings.block_buton }}
                  </a>

                  {% endif %}      
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endif %}
        {% endfor %}
        {% endif %}
        
      </div>
  </div>
</div>

<script>
  jQuery(document).ready(function($)
 {
  
    $('.js-slideshow-v5').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3500,
      dots: true,
      arrows: true,
      {% if section.settings.select_effect == 'Effect_1' or section.settings.select_effect == 'Effect_2'%}
      fade : true,
      {% endif %}
      prevArrow:'<button type="button" class="prev-slide slick-arrow"><i class="fa fa-long-arrow-left"></i> </button>',
      nextArrow:'<button type="button" class="next-slide slick-arrow"><i class="fa fa-long-arrow-right"></i></button>', 
      responsive: [

        {
          breakpoint: 1200,
          settings: {
            infinite: true,
            dots: true ,
            arrows: false
          }
        },
        {
          breakpoint: 1024,
          settings: {
            dots: true ,
            arrows: false
          }
        },
        {
          breakpoint:600,
          settings: {
            dots: true ,
            arrows: false,
            autoplay: true,
          }
        }
      ]
    });
    })
</script>

<style>
  {% if section.blocks.size > 0 %}
  {% for block in section.blocks %}
  {% if block.type == "slideshow" %}
  .section-slideshow-v5 .button-shop-{{block.id}} {
    color : {{block.settings.color_button}} !important;
    background: {{block.settings.bg_color_button}};
  }
  .section-slideshow-v5 .button-shop-{{block.id}}:hover {
    color : {{block.settings.color_button_hover}} !important;
    background: {{block.settings.bg_color_button_hover}};
  }
  {% endif %}
  {% endfor %}
  {% endif %}
</style>

{% schema %}
{
  "name": "Slideshow v5",
  "class": "index-section",
  "settings": [
	
	{
      "type": "select",
      "id": "select_effect",
      "label": "Effect Slide",
      "options": [
        {
          "value": "no_effect",
          "label": "No Effect"
        },
        {
          "value": "Effect_1",
          "label": "Effect #1"
        },
		{
          "value": "Effect_2",
          "label": "Effect #2"
        }
      ],
      "default": "no_effect"
    },
	


    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    }
  ],
  "blocks": [
    {
      "type": "slideshow",
      "name": "slideshow",
      "settings": [
        {
        "type": "header",
        "content": "Image Slide"
        },
		{
          "type": "image_picker",
          "id": "block_banerimage",
          "label": "Image slideshow",
          "info": "1881 x 967px recommended"
        },
		{
        "type": "header",
        "content": "Position Content"
        },
		{
          "type": "select",
          "id": "select_position_content",
          "label": "Choose the position content",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
    	},

        {
          "type": "text",
          "id": "block_title_top",
          "label": "Title sideshow top",
          "default": "Basic Collection"
        },
		{		
           "type": "color",
           "id": "color_block_title_top",
           "label": "Color Title sideshow top 1",
           "default": "#010101"
        },
		{
          "type": "text",
          "id": "block_title_top2",
          "label": "Title sideshow top 2",
          "default": "Style Destination"
        },
		{		
           "type": "color",
           "id": "color_block_title_top2",
           "label": "Color Title sideshow top 2",
           "default": "#010101"
        },
        {
          "type": "text",
          "id": "block_buton",
          "label": "Button slideshow",
          "default": "Shop now"
        },
		{
           "type": "color",
           "id": "color_button",
           "label": "Color button",
           "default": "#fff"
        },
		{
           "type": "color",
           "id": "bg_color_button",
           "label": "Color hover button",
           "default": "#000"
        },
		{
           "type": "color",
           "id": "color_button_hover",
           "label": "Color button hover",
           "default": "#fff"
        },
		{
           "type": "color",
           "id": "bg_color_button_hover",
           "label": "Background button hover",
           "default": "#bdb099"
        },
        {
          "type": "url",
          "id": "block_url",
          "label": "URL slideshow",
          "default": "/collections/all"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Slideshow v5",
      "category": "Slideshow",
	  "blocks": [
        {
          "type": "slideshow",
          "settings": {
            "block_title_top": "Go Electric Bike",
			"block_title_top2": "One electric bike that does it all",
			"block_buton": "Shop now"
          }
        },
		 {
          "type": "slideshow",
          "settings": {
            "block_title_top": "The best E-bike",
			"block_title_top2": "The electric bike for urban riders",
			"block_buton": "Shop now"
          }
        }	
      ]
    }
  ]
}
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
0 Likes
Guleria
Shopify Partner
1254 263 344

use same concept I used in last example. 
Alternatively you can hire someone to make it. 
Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
Aaron_mihell1
Excursionist
22 0 5

Hi Guleria,

I have tried to apply the same code/concept for the slideshow section but I can't seem to get it working.

I am not sure if I am missing something or doing something wrong but it would be greatly appreciated if you could help me?

Thank you!

0 Likes