On desktop, it looks like this which is perfect:
I need it to show up like that on mobile too. How to accomplish this?
Thank you
Topic summary
Goal: Make the site’s buttons stack vertically on mobile, matching the desktop layout.
Solution: A helper advised editing Shopify’s theme.liquid (Online store > Themes > Edit code) and adding code after the head tag. This change fixed the mobile button layout. (Exact code contents are not visible in this excerpt.)
Follow-up request: Add an inner blur so the button appears translucent, letting background image colors show through (not simply transparent).
Response: Additional code and a screenshot were provided to create the effect. However, the result introduced a blue tint to the button.
Clarification: The requester wants a colorless, untinted translucent button—no blue or solid fill—so only the background shows through.
Artifacts: Images and code snippets are central to understanding the implementation, but their full details are not included here.
Status:
- Mobile vertical stacking issue: resolved.
- Translucent, colorless blur effect: not yet resolved; further code adjustment to remove tint is needed.
Go to Online store > Themes > Edit code > open theme.liquid file, add this code after element
1 Like
Thanks, that worked perfectly. Do you happen to know of a way to add blur to the inside of the button? To basically allow the colors behind the button to come through as if the button is translucent instead of transparent?
Thanks
Thanks, but I was hoping the button color to have no color - not blue or anything, just translucent so that the image color from behind shows through.