Duplicate slideshow for desktop and mobile

Solved

Duplicate slideshow for desktop and mobile

bryanquek
Tourist
17 0 1

Would like to get some help on the below issue please

On my Refresh theme, I will duplicate my current live theme and work on changes. However when I duplicate, the slideshow shows both Desktop and Mobile version. I faced similar issues before and solved it with the below code. 

 

{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before,
      #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    @media screen and (min-width: 750px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endstyle -%}
{%- endif -%}

 


It is something like this:
Desktop slideshow (4-5 banners)
Mobile slideshow (4-5 banners)

How do I only show what the slideshow that is specific to my device? 

Thank you very much for your help

Accepted Solution (1)
JasmeetVT14313
Shopify Partner
292 63 76

This is an accepted solution.

@bryanquek 

Upon checking I found that you have created different slideshow sections for desktop and mobile.
 
So add the below code to end of base.css file

@media screen and (min-width: 750px) {
#shopify-section-template--22343557841208__5a61e3f4-33fb-48e6-8751-0001770780bf{display:block}
#shopify-section-template--22343557841208__06a02765-81b4-44f3-838f-0d853047b2ea{display:none}
}

@media screen and (max-width: 749px) {
#shopify-section-template--22343557841208__5a61e3f4-33fb-48e6-8751-0001770780bf{display:none}
#shopify-section-template--22343557841208__06a02765-81b4-44f3-838f-0d853047b2ea{display:block}
}

 
NOTE: If the section is removed and re-added then the section ID will differ and then the above code will have to be updated accordingly.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

View solution in original post

Replies 16 (16)

deepaksharma
Shopify Partner
449 63 100

What?

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
bryanquek
Tourist
17 0 1

My apologies, perhaps I wasn't clear enough



Screenshot 2024-03-11 at 5.43.50 PM.png

 

I have this error on my website when I duplicate my theme code. It shows both the desktop and mobile slideshow

my current live website previously has this problem too, but I fixed it by adding this code

{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before,
      #Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    @media screen and (min-width: 750px) {
      #Slider-{{ section.id }}::before,
      #Slider-{{ section.id }} .media::before {
        padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endstyle -%}
{%- endif -%}

 
This means that I cant duplicate my themes anymore without facing this duplicate issue.

JasmeetVT14313
Shopify Partner
292 63 76

@bryanquek 
Can you please share the theme url for me to preview and check.
Also please check the value for below setting in duplicate theme's section.

section.settings.slide_height

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

@JasmeetVT14313 

I dont see any value but the code is as such in slideshow.liquid. 

Preview link is this 

https://gwdopple09s9i0ic-78218461496.shopifypreview.com


Thank you for your help in this!

 

<div
    class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
    id="Slider-{{ section.id }}"
    aria-live="polite"
    aria-atomic="true"
    data-autoplay="{{ section.settings.auto_rotate }}"
    data-speed="{{ section.settings.change_slides_speed }}"
  >

 

 

JasmeetVT14313
Shopify Partner
292 63 76

This is an accepted solution.

@bryanquek 

Upon checking I found that you have created different slideshow sections for desktop and mobile.
 
So add the below code to end of base.css file

@media screen and (min-width: 750px) {
#shopify-section-template--22343557841208__5a61e3f4-33fb-48e6-8751-0001770780bf{display:block}
#shopify-section-template--22343557841208__06a02765-81b4-44f3-838f-0d853047b2ea{display:none}
}

@media screen and (max-width: 749px) {
#shopify-section-template--22343557841208__5a61e3f4-33fb-48e6-8751-0001770780bf{display:none}
#shopify-section-template--22343557841208__06a02765-81b4-44f3-838f-0d853047b2ea{display:block}
}

 
NOTE: If the section is removed and re-added then the section ID will differ and then the above code will have to be updated accordingly.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

thank you @JasmeetVT14313 

It seems to work now. However, is there a faster way to do the section id? 

Currently I am right-clicking on the slideshow, and then scrolling to see the correct code.

JasmeetVT14313
Shopify Partner
292 63 76

@bryanquek 
Great to hear it worked for you, Can you please hit Like and mark it as solution.

There no faster way,
Each section will have a section tag

<section ...

 as in below screenshot and it will be bit easier this way for you I believe

JasmeetVT14313_0-1710234638229.png

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

 

Screenshot 2024-03-15 at 11.35.10 AM.png

Screenshot 2024-03-15 at 11.35.21 AM.png

@JasmeetVT14313

Unfortunately the additional line of code that I've added led to errors in other sections. The size of the section below has the images size increase by alot. 

Sharing the screenshots of the original live site VS preview site with errors. Thank you.

JasmeetVT14313
Shopify Partner
292 63 76

Hello @bryanquek 

The code which i gave you should not reflect on any other section in any case.
However, can you please share the preview URL of both the themes.
Also, you can please try commenting or removing my code and see if the issue still exists or not.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

Hello,

You're right, tested by removing it and your code did not cause the issue.


Preview link with enlarged 'Current Buys' section
https://btz0yxnmqz20uzh4-78218461496.shopifypreview.com

Preview link of the current live link
https://oppostoresg.com/?_ab=0&_fd=0&_sc=1

 

JasmeetVT14313
Shopify Partner
292 63 76

Hi @bryanquek 

Good to here that.
Can you please hit LIke and mark my answer as a solution as your actual issue has been resolved.

As for your below section is concerned, I can see that you have set the desktop to display 2 slides and you might have made other layout changes in the section. You can try setting it up by checking your other theme settings.

Hope my reply will help you
Please hit Like if it helps

JasmeetVT14313_0-1710737580496.png

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

@JasmeetVT14313  could you guide me on how to fix this error? the image is too large.

JasmeetVT14313
Shopify Partner
292 63 76

@bryanquek 
It seems you have added CSS based on section Id and in this new theme the section Id has changed which is leading the styling not reflecting. You can update the Id as per new theme and check.

Please hit Like if you find this helpful.

JasmeetVT14313_0-1710747158997.png

 

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

does this mean that I have to re-edit my base.css code that you provided earlier?

JasmeetVT14313
Shopify Partner
292 63 76

@bryanquek 
This has nothing to do with the styling I gave. That was other section.
The CSS referred in my above reply is the one used here.  Screenshot from 2024-03-18 14-35-15 (1).jpg

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

I cant find the specific code for this second issue, where do I find the code for it?