Currently working on a new store but have been having issues with the load of variant buttons on phone. It starts as a squareish looking button and turns into a rectangular form.
The theme orginally has the rectangular form for the button so i dont understand why it fastloads as a square and turns into the rectangular.
The issue is even worse if you reload the page. The variant buttons now stays as squares and will not turn into rectangular buttons.
I’ve tried using ChatGPT to find the issue within the code but no luck so far.
Anyone able to find a solution? Also maybe you can tell me if its a general issue or just an issue on my version of the theme.
That flash happens when Horizon’s variant pill CSS loads late. Make sure section-main-product.css isn’t deferred and confirm the root --variant-pill-height variable is set, had that go missing on a client build and it caused the same square, to, rect jump.
This issue is actually very common so don’t worry it’s not just your store. When the page loads, variant buttons first appear with the browser’s default styling. A moment later, the theme’s CSS/JS loads and changes them into the rectangular shape. On some reloads, the styling loads too late or not at all , so the buttons stay square.
This isn’t a theme bug, it’s just slow styling being applied.
You just need to force the rectangular shape right from the first paint, so the button doesn’t rely on slow scripts.
Add this CSS inside your theme editor (Theme > Edit code > base.css OR theme.liquid before ):
/* Keep variant buttons rectangular from the first load */
This makes the shape stable before any JavaScript or theme styling kicks in, so no more jumping on mobile.
When you see UI elements ‘jump’ on page load, it also means your site is loading slowly especially on mobile. That’s why your variant buttons change shape after a second. For that part, tools like Website Speedy App help reduce script delays and improve how quickly styles load.
You don’t need to redesign anything; it works with your existing theme.
Hi! I’ve seen this behaviour on Horizon before. The variant “pills” are styled with custom CSS variables like --variant-pill-height and --variant-pill-border-radius. When that CSS hasn’t loaded yet, the buttons render with the browser’s default square button styling and then morph into pills once the stylesheet is parsed. If the CSS is deferred or the variables are missing, they can remain as squares.
Here are a few things to check:
Ensure the product CSS is loaded early: Horizon’s variant pill styles live in section-main-product.css. Make sure that file is included in your theme.liquid (via {{ 'section-main-product.css' | asset_url | stylesheet_tag }}) and isn’t set to load asynchronously. If you’ve moved it or deferred it to improve speed, move it back to the head so the styles are available when the product section renders.
Check the root variables: In your CSS you should have declarations like:
This gives them the same pill shape from the start.
After making these changes, refresh on mobile and see if the flash is gone. If not, it might be worth reaching out to the Horizon theme developers to see if there’s an update that addresses this bug. Hope that helps!
