Shopify themes, liquid, logos, and UX
Hey!
I'm trying to add a custom background image to my shop but it doesn't work out 😕
I saw some tutorials that mention the Theme.scss.liquid file under the Assets menu, but this asset is missing for some reason.
Even when I try adding a new copy of the Debut template this theme.scss is nowhere to be found.
Any ideas what can be done?
Solved! Go to the solution
This is an accepted solution.
Is this what you wanna achieve?
This is a short video of the effect when scrolling: http://somup.com/crVF6Do3fJ
If this is it, then the steps are:
- Go to your theme and click in Actions > Edit Code
- Add the image you wanna use as background to the Assets folder by clicking in Add a new asset:
My asset was named bananas.png
Now open your image clicking on it in the left column of the code editor and right click on the image to open the contextual menu
And click on open image in a new tab (this is with google chrome)
In the new tab where the image opened, copy the url from the browser address bar
Now open the Assets/theme.css file and copy the following at the end of the file, replacing the image url with yours:
body {
background: url(https://cdn.shopify.com/s/files/1/0113/4044/7844/t/7/assets/bananas.png);
background-attachment: fixed;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024