Introduction
Shopify theme में layouts directory main होती है, जिसमे सभी templated को rendered किया जाता है!. Shopify में, layouts directory theme’s file structure का एक important part है!. इसमें liquid template files होती है जो theme के भीतर web pages की सभी structure and layout को define करती है!. हरेक layout files एक अलग प्रकार के page layout या template को represents करती है, जैसे की home page, product page, collection page, cart page.
Layouts
Shopify theme में theme.liquid एक main layout file है और shopify store के सभी pages के लिए template के रूप में कार्य करती है!. इसमें सभी pages के लिए सामान्य HTML strucutre include है और इसमें {{content_for_header}} और {{ content_for_layout }} liquid object का इस्तेमाल shopify के लिए जरूरी script और third party
shopify app की script को और section के dynamic data को manage किया जाता है!.
हम theme.liquid layout को edit कर सकते है, या अपनी जरूरियात के अनुरूप कई custom layout file बना सकते है!. आप template level पर specify कर सकते है की किस layout का इस्तेमाल करना है या किसी layout का इस्तेमाल करना है या नहीं!.
JSON template में, page को render करने के लिए जिस layout का इस्तेमाल किया जाता है, उसे layout का attribute का इस्तेमाल करके specified किया जाता है!.
In liquid template में, page को render करने के लिए जिस layout का उपयोग किया जाता है उसे layout liquid tag का इस्तेमाल करके specified किया जाता है!.
Layout directory
Layout files theme की layout directory में located होती है!.
└── theme
├── layout
| ├── theme.liquid
| ...
├── templates
...
Layout Schema
Layout files theme का आधार है, उन्हें एक standard HTML document structure किया जाता है!. Most layout files में {{ content_for_header }} और {{ content_for_layout }} liquid object भी होते है!.
Basic layout example
<!DOCTYPE html>
<html>
<head>
...
{{ content_for_header }}
...
</head>
<body>
...
{{ content_for_layout }}
...
</body>
</html>
Layout Content
Layout आपको ऐसे content को include करने की अनुमति देता है जो एक ही place पर कई page type में repreated होती हो, जैसे की layout में header और footer sections और SEO metadata शामिल हो सकते है!. Layout किसी भी global liquid object को access कर सकते है. theme.liquid में {{ content_for_header }} और {{ content_for_layout }} ये object जरुरी है!. यदि ये object theme.liquid में शामिल नहीं है, तो आप code editor और Shopify CLI जैसे tool का इस्तेमाल करके file को save और update नहीं कर सकते है!.
content_for_header
theme.liquid में content_for_header boject जरुरी है इसे HTML <head> tag के अंदर रखा जाना चाहिए!. यह shopify द्वारा जरूरियात सभी script को document head में dynamic रूप से load करता है!. ये script reCAPTCHA, Shopify apps की लिए अवसायक है!. आपको content_for_header object को modify करने का प्रयाश नहीं करना चाहिए!. यदि
content_for_header change होता है!. तो आपके Liquid का behavior change हो सकता है!.
content_for_layout
content_for_layout object हरेक template के लिए content को dynamic रूप से output करता है!. आपको <body> और </body> HTML tag के बीच इस object को set करना है!.
