A user building a site with the Reformation 7.0 theme is experiencing an issue where a default stock graphic (watch, camera, backpack) briefly appears while their hero video loads. They want to replace this placeholder with either a custom branded image or a solid color background (white or black).
Current Solutions Offered:
One suggestion recommends using the Avada SEO Suite app’s page loader feature, which displays a loading icon with blank background during page load
Another provides CSS code to set the slideshow background opacity to zero, creating a plain black background:
The user confirmed the CSS solution works for creating a black background, but still seeks guidance on replacing it with a custom high-resolution image instead—similar to how Porsche’s website displays a branded photo while videos load. This question remains unanswered.
Summarized with AI on November 3.
AI used: claude-sonnet-4-5-20250929.
I am building a website using the Reformation 7.0 theme. The theme homepage default uses a “slideshow” at the top. I am using a shopify hosted video as the hero image. I am not using multiple videos or images, just the one single file.
Everything works as intended, but sometimes if the page load is a hair slow, the slideshow shows a stock/default graphic image of some random items (watch, camera, backpack, etc. see image provided).
What I want to achieve would be to replace it with a high resolution photo of my choosing (something that resonates with my brand image) so if there is ever a moment too long while the video is loading this is what the customer sees.
If that is not possible, than at the very least I would want to make the background either pure white or pure black.
I am a complete beginner and nube with edting or code, so your help is very appreciated.
This is the default background that displays for a fraction of a moment during page loading. I would prefer to trplace this with a uploaded branded photo:
You can consider using our Avada SEO Suite app to set up the Page loader feature from the speed-up tool. Here is the screenshot for your reference: https://prnt.sc/FwR9vbRfMs3R
In short, before the front store is completely loaded, the loading icon with a blank background will be running so that customers can’t see blank slider from the second image you shared above.
Thanks. This makes the background plain black, which is a great option. How would I go about making it a unique photo/graphic instead of just making the opacity zero/black?
an example would be porsche website.. I like how the background is essentially a high resolution photo that looks nice while the likely high resoultion/slow loading video downloads
