Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Hey there @jesperahlbomUK!
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!
This is an accepted solution.
Hey there @jesperahlbomUK!
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!
@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?
Hey @jesperahlbomUK!
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.
No worries - I added below in css to hide the +
Thank you for your quick help @UmairA 🙂
.Collapsible__Plus
{
visibility: hidden !important;
}
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
did you find any solution to this?
Hi,
I would also like to auto expand one tab, any solutions yet?
Thanks!
How can I autoexpand one specific tab?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024