Main issue: After upgrading to the Symmetry theme V7, the site’s collapsible accordion tabs lost their styling; some tabs are conditionally shown via custom code. Screenshots were shared comparing the old vs new appearance.
Troubleshooting steps taken:
Results: Adding styles.css partially restored tab visuals but broke other site styling and hid tab content (tabs appeared blank), indicating possible JavaScript dependencies or CSS conflicts.
Current assessment: Likely missing JS and/or theme-specific CSS differences between versions. Simply restoring old CSS is insufficient and can conflict with V7.
Status/next steps: Unresolved. Recommendation was to avoid updating until all custom changes (CSS and JS) are identified and properly ported; no final fix provided in-thread.
After updating our site to V7 of the symmetry theme, we’ve been having issues where our collapsible tabs seem to have lost their styling completely. Some of these tabs are conditional so we’ve coded that in but I’m not sure why they lost their styling completely. (left is new)
Thanks!
Hey @oliverM1 ,
Do you happen to have a backup?
Also, if you could, please share the link to your store. Thanks!
This version of the theme is not live yet so our current store is functioning properly. Store link singlestone.com
Hey @oliverM1 ,
Could you go to the Working Theme’s “Edit Code” option and look for styles.css.
Then open that file and copy everything that’s in there.
Then go to the new theme and look for the same file “styles.css” and replace everything with what you just copied.
If you can’t find styles.css in the new theme, then look for base.css or theme.css but this time don’t replace everything, just scroll all the way to the end and add on what you copied.
I have a collapsable tabs CSS file in the new theme but not styles
I tried copying the styles.css to that collapsable tabs file but that didnt work
That may not work @oliverM1 ,
because collapsable tabs file may not be rendered at all times.
Can you do this instead
In the Edit Code option, under the folder “Assets” click “Add a new asset” and name it “styles.css” (the .css is automatically added)
Then paste all the CSS from the old styles.css from the previous theme and then look for a file named “theme.liquid”
Then look for the tag “” (Note the ‘/’)
and add the following code
{{ 'styles.css' | asset_url | stylesheet_tag }}
Then save and test it out.
While this did fix the tabs, it messed up the rest of the site’s styling and hid the content in the tabs, so they were blank.
Oh.. I think there might be Javascript too then? In that case I think it’s better to stick to the old theme and not update if you are unaware of what changes were made.
If it was only styles then adding the styles back should fix the problem.