My website "collapsed" and I have no idea what happened and how to fix it. - Dawn Theme

Technical Q&A
,

Topic summary

Shop layout suddenly appears “collapsed/layered” on a Shopify store using Dawn; updating from v5 to v15 didn’t resolve it.

Root cause identified: a Cookie Consent script (loaded via Google Tag Manager) injects CSS targeting a generic class .slider, which conflicts with Dawn’s slideshow/slider elements. Because that CSS loads later, it overrides theme styles; using !important would break the consent modal.

Proposed fixes:

  • Quick, non-breaking override: add higher-specificity CSS for theme components so only Dawn’s sliders are affected (e.g., selector for slider-component .slider and slideshow-component .slider setting position: relative).
  • Apply this via Theme Settings → Custom CSS (preferred for updatability), or as a snippet included in theme.liquid if necessary.
  • Long-term: update the Cookie Consent CSS to use more specific, namespaced selectors (avoid generic classes like .modal, .switch, .slider) to prevent site-wide conflicts.
  • If issues stem from theme migration, consider restoring a theme backup or rolling back changes.

Latest update: OP asked how to apply the fix; expert clarified to replace the earlier attempt with the more specific selectors. No confirmation of resolution yet; discussion remains open.

Summarized with AI on December 22. AI used: gpt-5.
1

Hey!

My website: https://carnesmanada.com/ “collapsed” and I don’t know why or how to fix it.
I’m using dawn 5.0 and tried to update it to Dawn 15 but the problem persists.

It’s like my website just layered.

JohnLindgrenR2_0-1723480217456.png
JohnLindgrenR2_0-1723480217456.png1915×917 373 KB

Does anyone know how to solve it?
I haven’t done anything to the code and I haven’t added any ap
Please help.

2

Hi @JohnLindgrenR2 ,

Thanks for sharing your store URL, and after reviewing your store I noticed that the slideshow section has a CSS code which is impacting the layout of this section.

To fix this problem kindly follow the steps outlined below:

  1. Open the code editor, as shown in the screenshot below.

swym_0-1723484022220.png
swym_0-1723484022220.png999×417 191 KB

  1. Create a snippet called ‘custom-styles’ and add the below code:
  1. Include the ‘custom-styles.liquid’ file in your “theme.liquid” file.
    Add the following include code to your theme.liquid file.
{% render 'custom-styles' %}

It would look something like below:

swym_1-1723484123386.png
swym_1-1723484123386.png998×570 166 KB

  1. Done? Now save the file, and try previewing to confirm if the changes work for you. In the reference above, it looks something like below:

swym_2-1723484394844.png
swym_2-1723484394844.png2872×1980 1.16 MB

I hope this helps!

Regards,
Abhishek from Swym

3

Hi @JohnLindgrenR2 :waving_hand:

I’m using dawn 5.0 and tried to update it to Dawn 15 but the problem persists.> I haven’t done anything to the code and I haven’t added any ap

An in place migration may change code depending on methods used.

And such large version differences can cause migration issues again depending on methods used.

Restore a theme backup if available.

If the migration instead of a creating a new theme did change the files of the main theme try rolling back

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#roll-back

If you need theme migration services then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Good Luck.

4

Abyshek @swym is right in his diagnosis.

The solution, however is not 100% right.

The problem is that you have some kind of a “Cookie consent” code which adds CSS rules to apply to .slider – the element with this class is used both by theme and Cookie consent.

I’d blame the Consent developer because they use common class name and redefine CSS rules without consideration.

The code is actually loaded from your Google Tag manager.

You should punish whoever did that for using classes like .modal, .switch, .slider and so on and adding CSS for those without second thought…

This can easily screw half of your store and you would have no idea. Make’em to redo their CSS to use more specific selectors.

Simply adding the code suggested earlier would not help, because Consent code has higher priority (it’s located lower). If you add !important to your code, it will break the element in Cookie Consent modal.

As a quick fix, try using this code instead…

slider-component .slider {
  position: relative;
}
slideshow-component .slider {
  position: relative;
}

This will have higher priority then apps CSS rule, but would not apply to the app element.

However, for adding CSS code I am now recommending to use “Custom CSS” (in this case it should be under “theme settings”, not “section settings”) rather then editing theme code – this will help with theme updates.

5

Hi Tim!

Thanks for your reply.
How should I apply the code in order to work?

I tried to add it as @swym suggested but it didn’t work.

Thanks in advance.

6

As I said, adding code like you’ve tried would not work, because CSS rules from Cookie Consent has higher priority (they are loaded later).

Simply put my CSS code in place of the one you’ve tried earlier --my code has higher specificity and would fix the problem.

However, again – better option would be to fix the Cookie Consent CSS rules to be more specific, otherwise it’s possible that they can affect other areas of the site.

Then you should be able to remove this temporary fix.