Where in theme.liquid did you paste it?
Topic summary
Main issue: adding a preloader (loading animation shown before content) to a Shopify theme, specifically Debut, without paying for an app or developer.
Options suggested:
- Install high-rated apps (Loadify, Preloader) to add a preloader without coding. Shopify Support also points to lazy loading tips to improve site speed.
- DIY code: insert HTML/JS/CSS into theme.liquid (Layouts). Use a hosted image/GIF via a direct, publicly accessible URL and adjust timing via setInterval; mobile vs. desktop hide times differ.
Key technical fixes and advice:
- Correct CSS background URL syntax: use url(“…”), remove extra single quotes.
- Host assets on Shopify Files or a public CDN; avoid non-direct links (e.g., Google Drive folder URLs, some Dropbox links).
Developments/outcomes:
- One user confirmed the code worked after adjustments.
- Another user’s implementation failed due to using a Google Drive folder URL; needs a direct image link.
Open questions:
- How to add a fade-out effect.
- Exact placement within theme.liquid.
Notes: Code snippets and image hosting details are central to understanding and implementation. The thread remains partially resolved with ongoing questions and community support; Shopify Support clarifies customization is outside theme support scope.
1 Like