Hello devs,
Is there anything in the pipeline to address this issue? It’s a big issue when stores are running a theme with a dark background.
Thanks!
4 Likes
Hi Daryl,
I’ve just connected with the team who owns this area and will update here when I learn more about this request.
4 Likes
Awesome! Thank you Liam!
Hey Liam,
Just checking in to see if there was any further news on support for cards with white backgrounds on the order status / thank you pages?
Hey Daryl,
Our team are still actively looking at the best option for supporting this, but I’ve no ETA to share right now.
Ok, so found a solution … actually backtracked a method from another app called ‘Ecocart’.
Wrap your component e.g. View in the following for a nice yellow background. Could be any background…
<Grid overflow="hidden" rows={["0fr","auto"]}> <Image source="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRkZGRjAwIi8+PC9zdmc+" /> ... your transparent widget goes here ... </Grid>
Explanation: The rows prop of the Grid component dictates that the first child takes up zero space and the subsequent child consumes the remaining. The Image component renders an image out of zero space that overflows behind the sibling component. Finally, 'overflow=“hidden” keeps the image within the grid. Note the supplied image dimensions may be insufficient for your use-case, if so generate your own.
White background image:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+
Hi @Ryan_Dutton
We would not recommend implementing this approach you suggested as it would break accessibility standards for checkout, which could result in negative consequences for both customers and merchants.
1 Like
Hi Liam, I 100% agree with you that it’s a hack and not ideal from a pure accessibility standpoint… visually it works. If it were up to me, I would simply accept the limitations of the Checkout UI and move on. Unfortunately, my employer wanted the white background they saw in another app so I delivered as per their scope. I am onboard with Shopify either (a) Releasing a sensible method to specify a background colour or (b) Plugging the hole that enables the hack. I just need a plausible story so I don’t look incompetent 
We will be releasing a better experience for this soon - no ETA to share, but I will update here once available. Recommendation for now is to not interfere with the current state.