Autoexpand product tabs - Prestige theme

Solved
jahlbom
Excursionist
37 2 13

Hi - I would like some help to activate autoexpand on our product tabs. We're using Prestige theme.

I've found the below section in the theme.css file (row 2244), it sounds like what I'm looking for, but I'm unsure around which places in the code I need to change it in order for it to work.

store url: www.classicbootsuk.com

@media screen and (min-width: 641px) {
/* When this class is applied to a collapsible, it will display as a collapsible on mobile but not on larger screen, where it will
automatically appear is auto-expanded */
.Collapsible--autoExpand {
border: none;
overflow: visible;
}

 

Any ideas, please?

 

Thank you! / Jesper

0 Likes
UmairA
Shopify Partner
899 87 178

This is an accepted solution.

Hey there @jahlbom!

First, Your store design is awesome!

Second, what you are trying to achieve can be done by adding the following code to your theme.scss.liquid file

.Collapsible__Inner {
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}

 

Hope that helps!

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
jahlbom
Excursionist
37 2 13

@UmairA Thank you - it works, but it disables the function to collapse it again.

So, is it possible to remove the + button completley

Or, change it to the - button, and when the visitor press the - button it collapses?

 

image.PNG

UmairA
Shopify Partner
899 87 178

Hey @jahlbom!

The + and - being changed and re-collapse is using JQeury/JavaScript. So the only way for me to help is to look at the backend of your store and make modification accordingly to your theme.js.liquid or custom.js.liquid file.

You can contact me if you need my help.

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
jahlbom
Excursionist
37 2 13

No worries - I added below in css to hide the +

 

Thank you for your quick help @UmairA 

 

.Collapsible__Plus
{
visibility: hidden !important;
}

UmairA
Shopify Partner
899 87 178

@jahlbom!

That was Genius!

Best of luck with your startup!

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
szhane
New Member
2 0 0

Hello, I tried the code above but it expanded all the product tabs I have. I am looking into expanding only a specific product tab as I have two of them. How would it be possible? Thanks in advance!

Here is our store product page:

https://darkmatterprints.com/products/voyager-1s-pale-blue-dot-wall-art

0 Likes
Santossohan
New Member
2 0 0

did you find any solution to this?

0 Likes
Santossohan
New Member
2 0 0

How can I autoexpand one specific tab?

0 Likes
szhane
New Member
2 0 0
I contacted the theme provider and they are the ones who worked on it.
0 Likes