Some pages/templates don't show the navigation, borders and other styling

[cbepxpa3ym]

Layout on 404 page is broken, also menus do not exist (header and footer). https://dawn-theme-default.myshopify.com/non-existing-page

Please, fix ASAP.

[chintankotadia]

@cbepxpa3ym: This is a duplicate of #846. There is the PR for quick fix: https://github.com/Shopify/dawn/pull/847

[cbepxpa3ym]

This is not a dupilcate. The issue is not related to the color format, as I stated. Menus do not exist also - header and footer.

[chintankotadia]

@cbepxpa3ym : The menu does exist but due to the wrong color format it's showing white background color. It's an RGB color issue.

Take a look at your :root element. Here is the screenshot from your theme.

[cbepxpa3ym]

You are wrong:

[chintankotadia]

@cbepxpa3ym : If you want to have a quick fix in your theme then make the following changes:

{{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};

Replace with

{{ settings.colors_accent_1 | color_extract: 'red' }}, {{ settings.colors_accent_1 | color_extract: 'green' }}, {{ settings.colors_accent_1 | color_extract: 'blue' }};

vice versa for other colors. Basically, you just need to use color_extract instead of color notations

[chintankotadia]

@cbepxpa3ym : Ah, thanks for the screenshot. Yes, it's not printing the menu.

[chintankotadia]

@cbepxpa3ym : Quick fix, please use linklists[block.settings.menu] instead of block.settings.menu. Thanks!

[cbepxpa3ym]

I do not ask for the help here. I report this issue and expect the theme devs to fix their theme, so I will download it and implement the last changes on my copy.

[bakura10]

Yes, the 404 page is completely broken on OS2, but only under very specific circumstances. I had a talk with someone from Shopify about that and I think (Shopify can correct me if I am wrong) that the 404 pages, when they use a non recognisable pattern (for instance www.mysite.com/invalid) nothing will work because the page will be rendered by a non OS2 compatible renderer. So things like colors, theme settings that use a direct access to variable, dynamic sections, metafields… none of the feature introduced in OS2 work.

however if the 404 is for a known URL pattern (for instance www.mysite.com/collections/invalid) then this will be served by the correct renderer.

so yeah, this issue is annoying and should be fixed by Shopify. Having said that it is not super critical neither: the most common use case of 404 in Shopify is when you remove a collection, a product… and that the page end up being a 404: for those url the page will be rendered properly.

the Issue is only limited to 404 that do not have any common pattern, so normally this should nearly never happen.

Hope it gives some info about this issue :)

[ludoboludo]

Great points @bakura10. I brought it up to our team this morning. In the mean time we might address some of those issue on Dawn with a couple PRs unless their turn around is fairly quick.

As for the fix on the menu mentioned by @chintankotadia, the exact change would be:

from {%- for link in section.settings.menu.links -%} to {%- for link in linklists[section.settings.menu].links -%}.

There should be two instances to update in header.liquid.

[bigskillet]

Chiming in to confirm that I'm experiencing this bug with all my OS2 themes that use a 404.json template. It's not exclusive to Dawn. I've tried switching the 404.json to 404.liquid, but it did not resolve the issue.

[bakura10]

@ludoboludo : you will need to give up all the OS2 features just for handling this 404. Not sure if this is a great solution.

[ludoboludo]

@bakura10 how so ? Right now it seems like the way we're calling the navigation can change and work on all pages including the 404 one. So for now my thought was to at least fix the navigation and the color variables.

[bakura10]

For instance try to add a dynamic section on the 404 page: it simply won’t work neither.

I don’t think it is a good solution to go back to old OS1 pattern (such as using linklists, collections or all_products global variables) just to support the 404 use case (which is, as I explained in previous message, only for the rare case of URL without a predefined prefix URL, which is the rarest case of 404).

[ludoboludo]

Ah I see what you mean. But don't you think that while we wait for an actual proper fix in the way the 404 is rendered, it'd be nice to have at least the navigation and colors show up so it doesn't look as "broken" ? 🤔 I feel like it can be something we go back to once the rendering of this template is fixed.

[bakura10]

I see Dawn not only as the default theme of Shopify, but also as a reference for any theme developers who want to learn the best practices for Shopify development. By using those deprecated syntax I think it can introduces confusion and encourage the usage of deprecated syntax.

Additionally, i am afraid that if the issue is fixed through those workarounds (using the older syntax) this issue may get less attention from Shopify for fixing the issue properly at the platform level.

[ludoboludo]

Very good point @bakura10. Thanks for sharing. Ill try and help get the platform level issue sorted 👍

Therefore, @chintankotadia I will not follow up on my PR as well as yours for the time being.

[pinguluk]

Any update regarding this?

[ludoboludo]

Nothing yet but it's in the backlog of the team tackling it. 👍 I will post an update once I see/get one.

[domaine-johnnie]

+1 to this issue

[Lew2234]

Also the search input field has no border, the problem is also on the Reset Password page that the customer gets redirected to from their email, along with the Change Password fields having no border, I hope it's fixed soon.....

@ludoboludo Sorry for the tag but can you provide a quick fix for the input fields? Thanks.

[zdlldz]

+1 🙏

[rigid94]

+1 🙌

[abmenzel]

+1 👍

[ludoboludo]

Also the search input field has no border, the problem is also on the Reset Password page that the customer gets redirected to from their email, along with the Change Password fields having no border, I hope it's fixed soon.....

@ludoboludo Sorry for the tag but can you provide a quick fix for the input fields? Thanks.

Hey @Lew2234, sorry for the late reply. For a temporary fix, you could apply the changes done in both of those PRs to your theme:

• https://github.com/Shopify/dawn/pull/875 for the navigation not showing
• https://github.com/Shopify/dawn/pull/847 for the colors not coming up. It would need to be applied in all the places where .red .green and .blue.

And I believe that would take care of it for now.

[bakura10]

ÉDIT: sorry, i realised I partially repeated my message a few months ago. But this issue (on 404, activate account…) is a huge issue that come daily at our support, I start to be pretty frustrated by it.

@ludoboludo those fixes are indeed possible but I am sad to hear that Shopify is pushing those fixes instead of properly fixing this at the platform level. With those being fixed "this way" I am afraid that Shopify will now consider this as a lower priority fix due to this workaround. Additionally, this will create support debt with Shopify guru saying that "it works on Dawn, so it is a theme issue", which is not.

Our themes contains a lot of sections (that all can be added to the 404 pages) and we are using extensively those color settings. Basically, you are suggesting to not use a wide range of OS2 specific features as a workaround, which does not seem like a good sign here.

Our next theme will be based on gradient, and will take advantage of the new color_background setting. This is not something that can be "workarounded". Additionally, any section using {{ settings.product }} or {{ setting.collection }} cannot work on those pages neither as they are not rendered by the new renderer (and required all_products[{{settings.product}}]).

I do not understand why, 6 months after OS2 release, we still have essential templates (like 404, but more importantly the activate account pages) that cannot be rendered by OS2 and therefore look unusable on themes that take advantage of this.

I would therefore have hoped that Shopify would not have merged those workaround and instead try to find proper fixes at the platform level.

[ludoboludo]

Hey @bakura10,

thank you, along with every one else, for sharing your feedbacks and frustrations. It's valuable for us to have. Nothing was or is going to be shipped as a quick fix to it like discussed here or in some other PRs, unless I missed something 🤔

It's being looking into on the platform side to prevent us from using work arounds that still have some shortcomings.

There is a lot of pieces to fixing the issue which is why it's taking longer than we would hope for. Though the team is actively working on it which is the good news.

I will keep you posted once there is something actually shipping for it.

[shadowsfall118]

I cannot believe this has not been fixed yet. I reached out to Shopify support back in early November. Common guys get on it!!!! This is a pretty basic part of a website and should have not been released to the public. TEST TEST TEST!

[shadowsfall118]

A hack solution is to create a JavaScript redirect on main-404.liquid and direct that to a custom page. Not sure what this does to SEO but it works!

I couldn't get any of the above solutions to 100% work in my case.

[ludoboludo]

Hey folks, coming in with some good news. The 404 template is now fixed while the others are still being worked on/looked into. I will keep you posted again once all are tackled 👍

[bigskillet]

I just noticed that the menus also disappear when form errors are triggered in the customers section.

1. Go to /customers/addresses
2. Add new address with empty fields to trigger error
3. Menus disappear

[ludoboludo]

Thanks @bigskillet, I will add it to the list that's being looked into 👍

[jazzyjay79]

I've taken a look at this myself and yes it is currently affecting the OS 2.0 themes. What I can see is that when the url is https://storename.myshopify.com/404, previously on Vintage themes, this shows the 404 page that is customized on the theme.

However with the OS 2.0, it displays the 404 page without any data, it looks like an empty shell without any data. This page can only be accessed if you had to type in the URL https://storename.myshopify.com/404.

However in reality, when you enter a url on your website that doesn't exist e.g. https://storename.myshopify.com/4042 or any other url that doesn't exist on the website, the correct 404 page is displayed. This is what visitors will see.

So my workaround for this would be to add a url redirect that when the url https://storename.myshopify.com/404 is entered, it should redirect to another URL that doesn't exist on your website e.g. https://storename.myshopify.com/page-not-found, then the system will recognize that https://storename.myshopify.com/page-not-found is not an actual link that exist on the website, so it will redirect the visitor to the correct 404 page. The visitor will not notice any of this.

Workaround

Within the Shopify admin go to > Online store > Navigation > View URL Redirect > Create URL redirect

• Redirect from : Add /404
• Redirect to: Add /page-not-found or any link that doesn't exist on your website.

I hope this helps.

[ludoboludo]

I just noticed that the menus also disappear when form errors are triggered in the customers section.

1. Go to /customers/addresses
2. Add new address with empty fields to trigger error
3. Menus disappear

Hey @bigskillet, I was just trying to replicate on the account page and not able to replicate 🤔 Let me know if it's still happening on your end, maybe I'm missing something to replicate.

@bakura10 I'm also not able to replicate when activating an account. It sends me back on the home page with everything there as expected.

We've covered a few things in this issue and the comments, so let me know what you're all still seeing in terms of issue so I can make sure no template is missed and actually fixed.

Appreciate everyone's support in this 👍

[bigskillet]

Sorry @ludoboludo, I've already implemented the linklists[] fix, so I'm not seeing it anymore. I'm about to start a new build though, and will let you know if I see it again.