Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में shopify के files structure के बारेमे details से समझेंगे!. Shopify file structure को समजना उन developer और designers के important है जो अपने या client के online store को effectively रूप से create करना, customize करना और manage करना चाहते है!. shopify के file structure को अच्छी तरह से समाज लेने के बाद shopify online store को अपने तरीके से unique तरीके से design करके customer को better और unique user expefience दे सकते है!.
Shopify file structure
- Layout
- Templates
- Sections
- Snippets
- Config
- Assets
- Locales
Layout
Shopify theme में, layout folder में template files होती है जो आपके online store का structure define करती है!. ये template file एक wrappers के रूप में काम करती है जो आपके store के सभी pages और section के content को manage करती है!. main template file जिसे theme.liquid name दिया जाता है और theme.liquid से सभी section file, और snippest को manage किया जाता है!. साथ में जीतनी बी css files और javascript file का theme में इस्तेमाल किया
जाता है वह सभी theme.liquid से खास करके manage किया जाता है!.
Templates
Shopify में, template folder theme structure का एक important part है!. जिसमे अलग-अलग template files है जो आपके online store पर different pages के layout और structure को define करती है!. ये सभी template file निर्धारित करती है की आपके store के content को कैसे display किया जाये!. Template folder में हम page के लिए , product के लिए, collection के लिए, blog के लिए उनके default template layout के आलावा दूसरे multiple templates को create कर सकते है!.
जैसे की मान लीजिये हमने एक product के लिए उसके default template आलावा एक दूसरे template create किया जिसमे product data को अलग तरीके से styling करके represent कर सकते है!
Exmple के लिए product के लिए product-one-grid template create किया तो उसमे हम products image को one line में show करेंगे और दूसरा product-slider इस product template में हम product के images को slider के formate में show करेंगे!. default template types जैसे की 404, article, blog, cart, collection, customers, gift-card, index, list-collection, metaobject, page, password, product, robots.txt, search जैसे default template है!. ये सभी
template को हम liquid और json format के extension में create कर सकते है!.
Sections
Shopify sections को theme में sections filder में arganized कर सकते है!. हरेक section की अपनी liquid template file, css और javascript files होती है!. shopify sections एक modular components के तरह है जो हम online store pages के specific parts को create और customize करने की अनुमति देते है!. और वह sections reusable है साथ ही section के layout, content और site में अलग elements को manage कर सकते है!. Sections का इस्तेमाल करके site के pages में design की consistent easily maintain कर सकते है!. Sections का इस्तेमाल खास करके अलग-अलग pages में content को easily updating और rearrangine बी कर सकते है!.
Snippets
Shopify theme में snippets को “snippets” folder में organized किया जाता है!. shopify snippets reusable code का छोटा sa part है जिसे हम हमारे templates और sections में consistency बनाये रखने और theme के codebase को easily management करने के लिए temaplates और sections में include कर सकते है!.
Snippets खास तोर पर उस code के लिए इस्तेमाल होती है जो अलग-अलग template जैसे headers, footers, navigation menu और अन्य common elements में repeated किया जाता है!.
Config
Shopify theme, theme editor में “settings_schema.json” file और “Customizer” section के माद्यम से configuration settings को manage करती है!. मतलब की “settings_schema.json” file का इस्तेमाल “configuration” options को define करने के लिए किया जाता है जिसे store owner shopify theme editor से options को
customized कर सकता है!. यह file settings और controls को define करने के लिए एक structured way provide करती है!. जैसे text input, color pickers, image uploads, checkboxes, और कई setting available होते है!. इन सभी settings को theme editor में “customizer” section के माध्यम से access किया जा सकता है!.
जिसे store owner code को edition किये बिना directly visual और functional changes करने की अनुमति मिलती है!.
Example
{
"name": "Theme Settings",
"settings": [
{
"type": "text",
"label": "Header Text",
"id": "header_text",
"default": "Welcome to Our Store"
},
{
"type": "color",
"label": "Button Color",
"id": "button_color",
"default": "#FF5733"
},
{
"type": "image",
"label": "Logo",
"id": "logo",
"default": "logo.png"
}
// ... other settings ...
]
}
Assets
Shopify theme में “Assets” folder theme structure का एक important part है जहा आप अलग प्रकार के static assets जैसे की images, stylesheets, javascript files, fonts और दूसरी files को manage कर सकते है!. shopify theme के “assets” folder में सभी static files होती है जिन्हे आपकी theme को ठीक से load करने और display करने की अवश्यकता होती है!. ये files shopify के liquid template engine के द्वारा processes नहीं की जाती!. इसके बजाय वह directly visitors को served किया जाता है!. “assets” folder आमतौर पर आपके theme की root directory level located होती है!.
Locales
Shopify आपको अपनी buil-in translation featured और languages files के इस्तेमाल के माध्यम से translation create और manage करने की अनुमति देता है!.
shopify “locales” folder में अलग-अलग languages के लिए translation file create और manage करने अनुमति देता है!.
