Unable to access Section object

atkinyo
Shopify Partner
4 0 0

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:

Screenshot 2024-02-26 203909.png

 

Any help would be appreciated, thanks!

 

Replies 5 (5)

BrainStation23
Shopify Partner
260 43 41

Hi @atkinyo. In which folder you created this 'hero.liquid' file?

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
BrainStation23
Shopify Partner
260 43 41

It should be in sections folder. Then section object will be available.

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
atkinyo
Shopify Partner
4 0 0

It lives in the 'sections' folder

BrainStation23
Shopify Partner
260 43 41

@atkinyothanks for the reply. From the below screenshot you can see that there is not error. I've copy-pasted your code and removed the {% render 'foo' %} as I don't have any foo snippet.

BrainStation23_0-1709036809831.png

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
atkinyo
Shopify Partner
4 0 0

Thank you for responding! I cloned the Dawn theme and replaced all the files with the files from my directory and it's not giving the error. So maybe theres some error or hiccup with my setup that was causing the issue. I guess for now I can go this route to avoid the errors.