How to make slideshow draggable and clickable + design of controls

How to make slideshow draggable and clickable + design of controls

radaApeta
Explorer
64 0 23

Hello,

i need help with two things, first one is - how to delete the small line that is over the controls. The second one how do i make the slideshow draggable and clickable. I was looking at other posts but nothing worked for me

thank you  :))

 

https://81e325-28.myshopify.com/

0007

radaApeta_0-1721121933539.png

 

valenta14
Replies 5 (5)

aBox_Agency
Shopify Partner
87 9 16

Hello @radaApeta 

For the Border thing - attach a screenshot.

Go to component-slideshow.css
Class: slideshow__controls

You have great products with an extensive range - Please try something premium theme and develop on it.

Thank you

Regards,
aBox Agency | Shopify Partners

Need help customizing your Shopify store? Feel free to reach out to us at Shopify Partners Directory or visit our website at aBox.Agency.

If you found this post helpful, please give it a like!
aBox_Agency
Shopify Partner
87 9 16

Screenshot 2024-07-16 at 3.05.43 PM.png

Screenshot 2024-07-16 at 3.05.01 PM.png

  

Regards,
aBox Agency | Shopify Partners

Need help customizing your Shopify store? Feel free to reach out to us at Shopify Partners Directory or visit our website at aBox.Agency.

If you found this post helpful, please give it a like!

Dan-From-Ryviu
Shopify Partner
11628 2278 2461

Hi @radaApeta 

You can add this code to Custom CSS of that section to remove the line.

.slideshow__controls {
    border: unset !important;
}

To make image clickable, please go to Online Store > Themes > Edit code > open slideshow.liquid file, find this line of code 

{%- if block.settings.image -%}

Add this code above it 

{%- if block.settings.button_label != blank -%}
  <style>
      .slideshow__text-wrapper { display: none !important; }
  </style>
  <a style="opacity: 0; z-index: 3;"
    {% if block.settings.link %}
      href="{{ block.settings.link }}"
    {% else %}
      role="link" aria-disabled="true"
    {% endif %}
    class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
  >
    {{- block.settings.button_label | escape -}}
  </a>
{%- endif -%}   

 

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

radaApeta
Explorer
64 0 23

Thank you for you help, but it doesnt work. Did a paste the code right ? 

radaApeta_1-1721159780076.png

 

valenta14

Rahul_dhiman
Shopify Partner
809 155 169

Hello @radaApeta - (1) how to delete the small line that is over the controls.

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-slideshow.css ----> line number 102
search this code

 

 

.slideshow__controls {
border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

 

 

and replace with this code.

 

 

.slideshow__controls {
border: 0rem solid rgba(var(--color-foreground),.08);
}

 

 

 and the result will be
13.png

2) To make the Slideshow Clickable - this will need custom coding to make it clickable.
and i can help you in this custom coding, let me know.

If this was helpful, hit the like button and mark the job as completed.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages