BUG - Dawn Theme Layout / Css Corruptions (Dawn 2.0 - Rest Password Page)

Store Design
1

Hi folks… I’m experiencing odd layout and css explosions with Dawn 2.0 (latest update Jan 2022) and I’m wondering if anyone else can confirm the madness.

Note: This is using a CLEAN install of Dawn Theme 2.0 (Jan 2022 Update) - applied to a NEW development store.

The following modifications have been made.

  1. Front end user accounts turned on (set to optional)

This was in order to create a test user account

  1. Via the admin Theme Customiser, the global footer colour scheme was set to “Accent 2”

This results in a purple footer background with white text/links

NO THEME CODE CHANGES HAVE BEEN MADE.

These bugs apply to Step 2 of the Password Reset process - AFTER the link in the generated email has been clicked.

Quick demo: https://dawn-debug.myshopify.com

Password: dawn-debug

This demo store is purely to debug this theme - feel free to create a customer account (sign up) to test the password reset.

Generated CSS does not match the page layout

Styling is mostly lost. Input fields are half styled, submit button has no colour etc.

Note that this is using entirely unmodified Dawn code.

Footer

  1. The footer CSS reverts to default font colour - not the colours set in Theme Settings / CSS files

  2. Any footer menus are missing - not rendered - gone!

By missing, I mean a simple inspection with browser dev tools will confirm the served menu html is missing the

  • tags - it has the UL tags, just no menu content.

    Interestingly, the CSS corruption only appears on the front end (footer colours are correct via admin pages) - BUT the missing menu markup is reproducable both front and back end.

    For anyone trying to check this via the admin system …

    Shopify have not provided the functionality to view/modify the Reset Password page (step 2) via the admin Theme Customiser. To enable the functionality of seeing it (just for kicks) …

    • Initiate a front end password reset as a customer

    • Follow the link in the generated email

    • Copy the tokens from the URL in the email

    • Manually modify the back end Theme Customiser page URL to the following URL pattern (replacing bits to match your URL where necessary)

    https:// [store-name] .myshopify.com/admin/themes/[000000000000]/editor?previewPath=%2Faccount%2Freset%2F [0000000000000] %2F [GUID-TOKEN]

    So, password rest page receives oddball css / markup and any footer menus are excluded from served html - front end and via admin system.

    Anyone know if these are known issues?

    2

    Hi

    I am facing the same issue. The footer menus are not rendering on reset password page. Did you get any fix for this.

    3

    No. I tried reporting the bug via a support chat but have heard nothing back so far.

    I haven’t been able to find a way to formally notify Shopiy about bugs at all. Maybe they don’t want any? :slightly_smiling_face:

    Shopify?

    4

    @mcco @pgupta
    I can help you to fix this issue.
    Let me know if you want to fix this.

    Thank you.

    5

    Yes please help.

    6

    @pgupta

    Try this code in the main-password.footer.liquid file

    {%- if section.settings.color_scheme == 'background-1' -%}

---

{%- endif -%}

  

    {%- if settings.social_twitter_link != blank -%}
      - {%- render 'icon-twitter' -%}
            {{ 'general.social.links.twitter' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_facebook_link != blank -%}
      - {%- render 'icon-facebook' -%}
            {{ 'general.social.links.facebook' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_pinterest_link != blank -%}
      - {%- render 'icon-pinterest' -%}
            {{ 'general.social.links.pinterest' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_instagram_link != blank -%}
      - {%- render 'icon-instagram' -%}
            {{ 'general.social.links.instagram' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_tiktok_link != blank -%}
      - {%- render 'icon-tiktok' -%}
            {{ 'general.social.links.tiktok' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_tumblr_link != blank -%}
      - {%- render 'icon-tumblr' -%}
            {{ 'general.social.links.tumblr' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_snapchat_link != blank -%}
      - {%- render 'icon-snapchat' -%}
            {{ 'general.social.links.snapchat' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_youtube_link != blank -%}
      - {%- render 'icon-youtube' -%}
            {{ 'general.social.links.youtube' | t }}
        
      

    {%- endif -%}
    {%- if settings.social_vimeo_link != blank -%}
      - {%- render 'icon-vimeo' -%}
            {{ 'general.social.links.vimeo' | t }}
        
      
    {%- endif -%}
  

  {% capture shopify %}
    
      
      Shopify
    
  {% endcapture %}
  <small>{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}</small>
  <small>{{ 'general.password_page.admin_link_html' | t }}</small>

      ## {{- section.settings.heading | escape -}}
{%- if section.settings.menu != blank and section.settings.heading != blank -%}
                    
                      {%- for link in section.settings.menu.links -%}
                        - {{ link.title }}
                          
                        
                      {%- endfor -%}
                    

                  {%- endif -%}
{% schema %}
{
  "name": "t:sections.main-password-footer.name",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.main-password-footer.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.main-password-footer.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.main-password-footer.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.main-password-footer.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.main-password-footer.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.main-password-footer.settings.color_scheme.label"
    },
        {
          "type": "text",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label",
          "info": "t:sections.footer.blocks.link_list.settings.heading.info"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      
    
  ]
}
{% endschema %}