Shopify themes, liquid, logos, and UX
Hi there,
At the top of our home page (Password: mimo), we have an Image With Text block that we would like to have a background image behind.
We are using the Dawn theme and the URL of the image file is:
https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498
I'm not sure how to apply the background to this specific section, on this specific page, without applying the image to the background across the entire website. Is this even possible?
If so, can someone help me determine that path to find the correct placement along with the code snippet that we need to achieve this? I am not a coder!
Thank you in advance!
Solved! Go to the solution
This is an accepted solution.
Hi @mimbuffalo
To just apply the background for that section, we should use its section ID as CSS selector, please add the CSS below to your theme, see result here: https://take.ms/ykVGr
<style>
#shopify-section-template--16631339155674__ceae3c1e-1a99-4fbd-b04a-5e41673bbf8a {
background-image: url(https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498);
background-repeat: repeat;
background-size: 100%;
}
</style>
Please go to edit your theme -> Open file layout/theme.liquid then add CSS to right before closing tag </head> as my screenshot: https://take.ms/0DPFB
This is an accepted solution.
Hi @mimbuffalo
To just apply the background for that section, we should use its section ID as CSS selector, please add the CSS below to your theme, see result here: https://take.ms/ykVGr
<style>
#shopify-section-template--16631339155674__ceae3c1e-1a99-4fbd-b04a-5e41673bbf8a {
background-image: url(https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498);
background-repeat: repeat;
background-size: 100%;
}
</style>
Please go to edit your theme -> Open file layout/theme.liquid then add CSS to right before closing tag </head> as my screenshot: https://take.ms/0DPFB
Worked like a charm, thank you!
If I wanted to add additional sections, how would I format this?
Just replace CSS selector by the ID of the new section, it would be better if you can show me what section on your store.
Hi James,
After the new dawn update this appears not to be working.
Is there something new that needs to be done?
The section is right at the top of our home page:
shopify-section-template--16858034569434__ceae3c1e-1a99-4fbd-b04a-5e41673bbf8a
The image url is below:
https://cdn.shopify.com/s/files/1/0651/5697/2762/files/graph_paper.png?v=1667524498
Update: got it wo work.
Though, we are trying to do something similar on another page.
Here is the link to the page:
https://mimo-decor.com/pages/design-appointment
This is the section:
shopify-section-template--16858035880154__29c7fe9e-fb02-4694-9a50-842f0febf992
This is the image:
https://cdn.shopify.com/s/files/1/0651/5697/2762/files/mmmm.png?v=1670109601
thank you for providing this solution. I'm just wondering how can i find the selector for a specific section on the Dawn template? is there an indicator? Like i'm trying to add an image as a background for the text in a website section where I used 'image with text" but where on the website can I find the specific ID that refers to this 'image with text' on the website? I'm looking with inspect function on chrome. any help would be much appreciated.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025