Help understanding the JSON changes as HTML/CSS Designer

Technical Q&A
1

Hey all,

I am in the process of upgrading my “Prestige” theme to 2.0. We chose Prestige because we love the product display, cart, and collection display, but over the years our front page has shifted to being 95% HTML/CSS/JS that I wrote and so have most side pages and collection pages. What I’ve done until now was build the HTML around the {{ content_for_index }} and used the index content to feature a single collection, because I like the ability for the collection to update the products instantly once the collection is updated. I’ve also created multiple custom collection pages to fit the needs of our design direction. The new structure is such that the core components are no longer liquid, but JSON.

I know there is a “custom HTML” section in the theme, but that inserts the HTML into the theme containers and it isn’t really possible to change that without messing up the look of the entire site. Not to mention the “custom HTML” section editor is basically just notepad without any markup, and I would have to use an outside program to structure it first even if it didn’t break my layouts. This is similar to the struggles and frustrations I’ve had to go through when building Squarespace/wordpress sites, and I was always really appreciative of the ability to go in and code HTML/CSS in Shopify In fact, I have driven clients to Shopify because of that freedom, knowing I can deliver a wider-range of unique and custom websites. I am desperately hoping this isn’t the end of that.

My question is simple:

Is there a way that I can continue to write in the theme editor directly in HTML/CSS/JS so that I can achieve a more customized design result without being forced to use the theme sections?

2

Hi @lance_w ,

If you want to edit the HTML/CSS/JS of the home page directly without using theme sections, you can do it in the following way:
Step 1: Delete templates/index.json file. https://i.imgur.com/1sgKH0A.png
Step 2: Add a new template with index liquid. https://i.imgur.com/CMhupyF.png
Step 3: Code HTML/CSS/JS in this file. https://i.imgur.com/ixCeMjj.png
Hope it helps!

3

Hey,

I tried this a few days ago and upon previewing the home page it gave me a 404 error. Maybe there’s a spot in the theme files that is sourcing or calling index.json. I will mess around with it again.

4

Hi @lance_w ,

Have you deleted the index.json file and are checking at home page?

Just you need to delete index.json file and then add index.liquid file, it will work fine.

Hope it helps!