Understand Layout Engine Editable Files

After activating Layout Engine, you shall see the entrance of Code Editor on your ADMIN panel, which enables you to change the default template of Privatized Pages’ component by editing relevant files.

There are files for each storefront component, please refer to below table to know which file to start your own customization.

Storefront Fields	Layout Engine File
Header (Including Menu Navigation)	theme.liquid Snippets > navigation_bar_mobile.liquid Snippets > navigation_bar_desktop.liquid Snippets > menu_panel.liquid Snippets > light_nav.liquid Snippets > dark_nav.laquid
Footer	Snippets > footer.liquid
Shopping Cart	Snippets > cart_panel.liquid
Product Details Pages	Template > product_detail liquid
Product details page	Express checkout page & 1-Page Store
Product Listing Pages	Template > products liquid Template > product liquid Template > quick_cart_product liquid
Blog Listing Pages	Template > posts liquid
Blog Post Pages	post.liquid
Advance Pages	Template > page.liquid ＊Product item displayed in widgets are using the template from Template > product.liquid ＊SHOP Builder Widgets is not open for customization by Layout Engine (system page)
Promotion Related Pages	Template > promotion_page liquid Template > promotion_product liquid Template > redeem_gift_page liquid Template > redeem_gift_item liquid
Other Shop Pages	Template > 404 liquid Template > 500 liquid Template > closed liquid
Email Notifications	email.liquid
Other Store Layout	theme.liquid

If you want to change CSS style on pages, under the Asset folder, there are CSS files for different storefront pages/components.

You can also create your own css.liquid files and extract certain file on a specific page by adding below code on theme.lliquid:

{% if page.url == '/' %}  
    {{ 'custom_homepage.css' | asset_source }}  
{% endif %}