Login with SHOP button cutoff on Header

Technical Q&A
,

Topic summary

A user encountered a visual issue where the “Login with Shop” button in their header was being cut off. They were using the Refresh theme without custom code and also noted the button disappeared entirely after login, with no visible logout option.

Initial Solution Attempt:

  • A CSS fix was suggested targeting .header__icons .shopify-app-block with max-width and max-height set to fit-content
  • This code included an html selector and @media query

Problem with Initial Code:

  • Shopify’s theme customizer rejected the code with an error: "html" does not appear to be used in this section
  • The customizer restricts CSS to section-specific selectors, blocking global selectors like html, body, or @media queries

Working Solution:
The user rewrote the CSS without global context:

  • Targeted .header__icons .shopify-app-block and its iframe directly
  • Added !important flags and overflow: visible
  • Set explicit dimensions for the iframe (180px width)

Status: Resolved. The button now displays correctly without being cut off. The logout visibility issue remains unaddressed.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I’ve added the Login with Shop button to my homepage header, however the button is getting cutoff. How can I fix this? I’m using the Refresh theme with no custom code.

817191c1e3096ab9e8eec510419969ea.png
817191c1e3096ab9e8eec510419969ea.png894×312 1.24 KB

1 Like
2

Hi @NailMeHarder

Please share the link to your store so we can check

3

https://nailmeharderstore.myshopify.com/

4

https://nailmeharderstore.myshopify.com/ . Another thing is once someone Logs in via SHOP, the button disappears completely. Are there options for them to log out?

1 Like
5

Please add this code to Custom CSS of Header in Online Store > Themes > Customize > Header.

@media (min-width: 750px) {
    html .header__icons .shopify-app-block { 
        max-width: fit-content; 
        max-height: fit-content;
    }
}

Screenshot 2025-04-22 at 09.47.26.png
Screenshot 2025-04-22 at 09.47.26.png2560×314 41.2 KB

6

Thank you - unfortunately it didn’t change the outcome. Also, I can’t see the button once I log-in, not sure how to fix this. I have to use incognito to see the button, but it shows cut-off still

7

Figured it out - after trying the code provided, i received this error: <“html” does not appear to be used in this section. Try a different selector.> It seems that

  • You can’t use global selectors like html, body, or even @media queries directly unless the section supports them

  • Shopify restricts this input to CSS tied to that section’s DOM tree

To re-write the code without html or Global Context, I used this code:

.header__icons .shopify-app-block {
  max-width: fit-content !important;
  max-height: fit-content !important;
  overflow: visible !important;
}

.header__icons .shopify-app-block iframe {
  width: 180px !important;
  height: auto !important;
  display: block !important;
}

It seems to work now.

1 Like
8

Thanks for updating!

1 Like