Hello community,
I’m pretty new to Shopify and trying to build a custom theme from scratch and have previous experience with HTML/CSS/JS and some Liquid experience. I’m trying to assign a background image to a hero section, but I’m getting an error reading “Unknown object ‘section’ used.” I understand if my setup to display the background image/image-picker may be incorrect, but I’m still confused as of why it’s not recognizing the section object that lives within the same file. I’ve tried searching for many resources related to objects being unaccessible but no luck.
Sidebar issues:
I’ve also created a dummy snippet to render on the page. It’s displaying, however, it’s also returning an error of “snippets/foo.liquid does not exist”. In my theme.liquid file, the link to the stylesheet is also stating that it doesn’t exist but is still applying the styles.
Below is my ‘hero.liquid’ file:
{% assign background_image_url = section.settings.image_with_text | image_url: 'master' %}
<section class="flex items-center h-[716px] bg-cover bg-center bg-no-repeat" style="background-image: url('{{ background_image_url }}');">
<div class="w-1/2"></div>
<aside class="w-1/2 px-10 pt-16 mr-20 rounded-xl bg-[#FFF3E3] pb-9">
<h3 class="font-semibold tracking-widest text-gray-900">New Arrival</h3>
<h1 class="text-5xl font-bold leading-normal text-orange-500">Discover Our <br> New Collection</h1>
<p class="mt-4 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.</p>
<button class="px-20 py-6 mt-12 text-white uppercase bg-orange-500 rounded-sm font-sembold">Buy Now</button>
{% render 'foo' %}
</aside>
</section>
{% schema %}
{
"name": "Hero",
"class": "hero",
"limit": 2,
"tag": "section",
"settings": [
{
"type": "image_picker",
"id": "image_with_text",
"label": "Image"
}
]
}
{% endschema %}
File structure:
Any help would be appreciated, thanks!
