Narrative Theme: slideshow edits for mobile optimization

Store Design
, , ,
1

I want to adjust the height of the slideshow in the Narrative theme for mobile optimization. I’m looking for help with the following aspects, which could be interconnected:

  1. I have set the ‘adapt to first slide’ setting and the height of all images appears fine on the desktop, but it is too small on the mobile. How can I increase this height without changing the current desktop version?
  2. Each image has a heading that appears over the image on the desktop but under the image on the mobile version. I’m guessing that it is also due to the insufficient image height, how can I have this text appear over the image on the mobile version?
  3. How can I modify the formatting of the slideshow heading by selecting from the predefined global text styles like h1, h2, h3, etc.?
  4. There are dot buttons at the bottom of the slideshow to go to a different image (only on mobile). However, these seem unresponsive, and even if I click on a dot, the slide show doesn’t switch to the image corresponding to the selected dot. It is currently an annoying experience, how do I fix these?

I’m not a coder but am capable of adding a few things in the code with guidance! Thank you for the help!

Link to my store: https://pumbhirri.com

Screenshot of the slideshow on mobile:

Screenshot_20231206-141847.jpg
Screenshot_20231206-141847.jpg1080×2400 208 KB

Screenshot of the slideshow on deskptop:

Screen Shot 2023-12-06 at 2.33.29 PM.png
Screen Shot 2023-12-06 at 2.33.29 PM.png2874×1548 650 KB

2

Hello @pumbhirri_isha

I have checked your requirements and they need custom edts. As this changes won’t be possible without code editor access. Please contact a developer to help you. Feel free to approach here

Thanks

3

Hi @Sweet_Savior_3 . I’m familiar with editing code on Shopify to some extent, would you be willing to point me in the general direction of the code?