I need help !! - Different slideshow / banner image on mobile - desktop

Destiny97
Tourist
9 0 0

Hey there, hope you're doing well during these times.

I checked the thread about having a different banner/slideshow image and mobile than desktop and i really cannot seem to make it work for me.

 

I'm using a theme i bought on themeforest. i could really reall y use your help please i'd be so so grateful.

 

So here's the code for the slideshow section : 

 

 

<div class="ishislider">
  <div class="slideshow-block">
    {% if section.blocks.size > 0 %}
      <div id="ishislideshow-carousel" class="ishislideshow-carousel-{{ section.id }} owl-carousel owl-theme logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
        {% for block in section.blocks %}
          <div class="slideshow__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %}" {{ block.shopify_attributes }}>
                <a href="{% if block.settings.link != blank %}{{ block.settings.link }}{% else %}/{% endif %}" class="slideshow__link">
            {% if block.settings.image != blank %}
              {{ block.settings.image | img_url: '2048x' | img_tag: block.settings.image.alt, 'logo-bar__image' }}
            {% else %}
              {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
                  {% if block.settings.subtitle != blank or block.settings.maintitle != blank or block.settings.desc != blank %}
                  <div class="page-width">
                  <div class="slider-content col-md-6 col-sm-6 col-xs-6 slider-content-{{block.settings.text_position}} {{block.settings.textalignment}}" style="text-align:{{ block.settings.textalignment }}">
                     {% if block.settings.subtitle != blank %}
                        <div class="sub-title" style="color:{{ block.settings.subtitlecolor }}"> {{ block.settings.subtitle }}</div>
                      {% endif %}
                     {% if block.settings.maintitle != blank %}
                       <div class="main-title" style="color:{{ block.settings.maintitlecolor }}">{{ block.settings.maintitle }}</div>
                      {% endif %}
                      {% if block.settings.desc != blank %}
                       <div class="desc" style="color:{{ block.settings.desccolor }}">{{ block.settings.desc }}</div>
                      {% endif %}
                      {% if block.settings.button_label != blank %}
                        <div class="slider-btn btn">{{ block.settings.button_label | escape }}</div>
                     {% endif %}
                  </div> 
                  </div>
                   {% endif %}
                </a>
          </div>
        {% endfor %}
      </div>
    {% endif %}
    {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
    {% endif %}
  </div>
</div>
<style type="text/css">
  .ishi-slider-section .slider-content-right{
    float: right;
  }
  .ishi-slider-section .slider-content-left{
    float: left;
  }
  .ishi-slider-section .slider-content-center{
    margin: 0 auto;
    float:unset;
  }
</style>
<script>
  jQuery(document).ready(function() {
     $('.ishislideshow-carousel-{{ section.id }}').owlCarousel({
        nav: true,
        loop: true,
        autoplay:true,
        animateOut: 'fadeOut',
        autoplayTimeout:4000,
        navText: [
          '<i class=\'material-icons\'></i>',
          '<i class=\'material-icons\'></i>'
        ],
        items: 1,
        itemsDesktop: false,
        itemsDesktopSmall: false,
        itemsTablet: false,
        itemsMobile: false
    });
  });
</script>


{% schema %}
  {
    "name": "Ishi Slideshow",
    "class": "index-section ishi-slider-section",
    "max_blocks": 5,
    "settings": [
      
    ],
    "blocks": [
      {
        "type": "slide_image",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "Size: 1920px X 700px"
          },
          {
            "type": "select",
            "id": "text_position",
            "label": "Text Position",
            "default": "left",
            "options": [
              { "value": "left", "label": "Left"},
              { "value": "center", "label": "Center"},
              { "value": "right", "label": "Right"}
            ]
          },
          {
            "type": "select",
            "id": "textalignment",
            "label": "Text Alignment",
            "default": "left",
            "options": [
              { "value": "left", "label": "Left"},
              { "value": "center", "label": "Center"},
              { "value": "right", "label": "Right"}
            ]
          },
          {
            "type": "text",
            "id": "subtitle",
            "label": "Subtitle",
            "default": "Big Discount"
          },
          {
            "type": "color",
            "id": "subtitlecolor",
            "label": "Subtitle Color",
            "default": "#FF8C9A"
          },
          {
            "type": "text",
            "id": "maintitle",
            "label": "Title",
            "default": "Special Kids Offer"
          },
          {
            "type": "color",
            "id": "maintitlecolor",
            "label": "Title Color",
            "default": "#000000"
          },
          {
            "type": "html",
            "id": "desc",
            "label": "Description",
            "default": "Flat 10% Off On Order Above $29.99"
          },
          {
            "type": "color",
            "id": "desccolor",
            "label": "Description Color",
            "default": "#666666"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button Label",
            "default": "SHOP NOW"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Ishi Slideshow",
        "category": "ishi themes",
        "blocks": [
          {
            "type": "slide_image"
          },
          {
            "type": "slide_image"
          }
        ]
      }
    ]
  }
{% endschema %}

 

 

 

 

 

And i'd like the button to be centred on the mobile version.

 

I've been searching and trying and messing up for 4 days now 😞

 

Thank you so much if you can help.

Replies 16 (16)

Ninthony
Shopify Partner
2329 350 1023

Can I request access to your themes to take a look? I don't have owl carousel and I don't feel like setting it up. I'll see if I can't get it figured out for you. I just need your store url

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Destiny97
Tourist
9 0 0

Hey, sure of course

 

there : http://nasando.myshopify.com/

 

You're awesome thank you so much

Ninthony
Shopify Partner
2329 350 1023

Alright I requested access. You should receive an email to approve or deny me.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Destiny97
Tourist
9 0 0

I gave you access 🙂

Ninthony
Shopify Partner
2329 350 1023

Alright I think I got it working the way you want it. Go ahead and check it out. I just took a screen shot of your current banner at a particular spot and scaled it up for the mobile image cause I didn't know what to put there, so it'll look blurry because it's scaled up. But if you put a regular 992x1500 image in there it should be all good. Let me know if that works for you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Ninthony
Shopify Partner
2329 350 1023

Oops, should mention you have to preview the "Ninthony Editing" theme

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Destiny97
Tourist
9 0 0

This is EXACTLY WHAT I WANTED !!! Thank you soooo much !!! wow 🙂

Ninthony
Shopify Partner
2329 350 1023

Alright cool. I did the styles in the section itself just for ease of styling, I'll relocate them to your css file now.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Destiny97
Tourist
9 0 0

Added a note in the name for you to know which theme i'd like you to fix for me 🙂 Thank you so much again

Ninthony
Shopify Partner
2329 350 1023

Ok you could have just published my theme, I duplicated your live theme and that's what I was working on. I updated your current theme, but you may need to add your content back in.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Destiny97
Tourist
9 0 0

Oh my bad...  Hope that wasnt too annoying... Thanks for taking the time to do all of this

Destiny97
Tourist
9 0 0

@Ninthony Is there a way to have the button stay on the slideshow even tho i remove the Title, subtit ect.. ?

Ninthony
Shopify Partner
2329 350 1023

Try now, I added a condition that should allow it.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Destiny97
Tourist
9 0 0

Can you tell me where i should go to custom the button and make it bigger?

Ninthony
Shopify Partner
2329 350 1023

Depends when you want to make it bigger. There's different styles depending on desktop or mobile. You could probably just add the bottom of your theme.css.liquid file:

 

#ishislideshow-carousel .slider-content .slider-btn {
font-size: 18px!important
}

 

And that'll make it 18px across the board. The button size is based off the font size and the padding for that selector.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Destiny97
Tourist
9 0 0

@Ninthony  Figured out how to do it thank you so much! 😊

I have another issue with the theme im currently using.

(see screenshots)

FFDBA00D-775F-4648-BE32-49E0966574B3.jpeg

27CBAC4A-2420-4B7A-B014-190590B4BE81.jpeg

The comments, the upsell product, the benefits under the product, the benefits section… it can’t change them depending on the product page. No matter the product it’s always the same.

is there any way to fix that? Can you show me? I would very much appropriate it. Please 🙏🏾 If you can’t do it it’s alright i understand.