Solved

Duplicate slideshow for desktop and mobile

bryanquek
New Member
10 0 0

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
88 18 23

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.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

View solution in original post

Replies 16 (16)

deepaksharma
Shopify Partner
443 61 90

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
New Member
10 0 0

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
88 18 23

@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

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
10 0 0

@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
88 18 23

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.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
10 0 0

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
88 18 23

@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

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
10 0 0

 

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
88 18 23

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.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
10 0 0

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
88 18 23

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

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
10 0 0

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

JasmeetVT14313
Shopify Partner
88 18 23

@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

 

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
10 0 0

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

JasmeetVT14313
Shopify Partner
88 18 23

@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

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
10 0 0

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