Welcome to the Liquify Community

Updated last week

theme.liquid not containing a <main> tag

Hi!

When I run the conversion, the theme.liquid file which, as I understand, is used to create new page layouts, doesn't have a <main> tag for some reason. I've read elswhere in this help topic that the theme.liquid is generated from the main page - however, my main page has the li-content-for-layout applied correctly to the <main> element.

Looks like an issue with the conversion process maybe? When I add it manually in Shopify code editor and then do another conversion, my changes are overwritten.
j
G
37 comments
Thanks Georgy! We will get into it!
Hi @Georgy Rakita, we checked it but the converter is doing it correctly. Maybe the main element had a div tag in previous onversions? We dont change this after the first conversion becaus this info is stored in the template files
Hi @jonas.halbstark - hm, I don't think so! I was using the modified version of the Liquify template and the main wrapper there is a <main> tag.

Right now, each time I do a conversion, the theme.liquid is overwritten and I have to manually overwrite it again in the Shopify editor.
Let me know if anything is needed from me to troubleshoot.
are you using shopify 2.0?
the tag information is in the template files. So main.main-wrapper renders the content as a main element with a main-wrapper class
Attachment
Bildschirmfoto_2024-11-07_um_18.35.45.png
@jonas.halbstark yes I do!

To clarify - the issue happened to me when I created a custom template for a metaobject using the Shopify Editor. I did it, used on of the sections, and when I inspected the resulting page, there was no <main> on it. I then modified the theme.liquid file, wrapping the {{place_for_content}} (or what it's called) with the <main tag> and it appeared on the metaobject page.
can you send me the json fale of the metaobject template. The last 10 lines?
/* * ------------------------------------------------------------ * IMPORTANT: The contents of this file are auto-generated. * * This file may be updated by the Shopify admin theme editor * or related systems. Please exercise caution as any changes * made to this file may be overwritten. * ------------------------------------------------------------ */ { "sections": { "faq_xkX3kE": { "type": "faq", "settings": {} } }, "order": [ "faq_xkX3kE" ] }
Attachment
image.png
and from the index.json? Can you also send me an image?
but this is already modified with main tag?
No, what I have to do to get the tag to display is to set it up manually in the theme.liquid.
can you add: "wrapper": "main.main-wrapper" to the metaobject json?
can you send me the link to the store?
Changing the theme.liquid fixes it
Yes, but I've already applied the changes right now so it does have the correct <main> tag right now.
If it's easier for you, happy to jump on a call at a time that works for you?
I would love to learn exactly how this works - where do custom templates are created from, etc:

What is theme.liquid and how is it different from page.liquid?
Also, you've mentioned that you don't touch pages after the initial conversion - but I am not sure how this works. In both Webflow and Shopify, I have these pages and layouts for these pages - are they updated when I make changes to them outside of the <main> - like changing head/body code?
What are this .liquid layouts for if in Shopify I still had to do "Add new page template" in Shopify editor and build it with sections? Where does the header and footer for this new page template come from?
Attachments
image.png
image.png
when you change it like this you havt to main tags on the home page
adding this to the template json will tell shopify in which element the content should be wrapped
Layouts contain the information outside the content for layout and will be updated when you make changes in webflow. Temmplates are only created after the first conversion and contain only the infromation about content, which sections etc.
Thanks @jonas.halbstark - but these pages don't exist in Shopify after the conversion, right?
I still need to make a new page and assign a template to it - or am I wrong?
@jonas.halbstark , adding the wrapper setting to the metaobject json worked, thanks!

Could you please explain why this is happening and how the client will be able to add new metaobject pages in the future if need be?
Hi @Georgy Rakita 🙂
The template files will remain unchanged, so the metaobject page in Shopify will persist even if a new conversion is made.

It appears that when you create a new template for a metaobject, Shopify doesn’t automatically include the wrapper tag by default. This needs to be added manually, but it won’t be overwritten by Liquify.
Thanks @jonas.halbstark - this is strange! Looks like nothing you can change here, right? Apart from hardcoding the wrapper into the template files instead of json structure.
@jonas.halbstark could you please clarify why these page templates are picked up & synced with Shopify if there can't be used later on (still have to create pages through Shopify admin and create and assign a new template for them).
Hi @Georgy Rakita, yes. But i think it wont happen that often that you create a new metaobject template for the first time.
I dont know if i get the quesion right. The content of each page is stored in the template files. So we cant override them with every new conversion. So after the first conversion you need to create every new templae in shopify.
We are currenlty working on it, that every new page template will be created if it not already exist.
@jonas.halbstark , thanks for your reply.

My question was about .liquid files - why are they created in the shopify theme if they are not used and I need to create a new layout manually in Shopify 2.0 editor.
Attachment
image.png
we update these pages because you can still make change to the layout file in the befory body tag or inside the head.
Yes, but there are no way to use any of these layouts in the Shopify editor, or am I worng?

These are the templates that I've created in Shopify editor myself and I think they are not using any of the page.[...].liquid templates, just the main page.liquid one?
Attachments
image.png
image.png
layout files are not templates. They just contain everything outside the li-content-for-layout
you can assign the layout later in shopify in the template file if needed.
Add a reply
Sign up and join the conversation on Discord