In shopify how to create section in hindi

Post Views : 336

Introduction

हेलो दोस्तों आज हम इस post में Shopify में section क्या होते है, और section को कैसे create करते है और section के settings कैसे set कर सकते है उसके बारे में details से example के साथ समझेंगे!. Section में हम एक text  और textarea की setting को कैसे add कर सकते उसके बारेमे में details समझायेंगे!.

What is the section in Shopify in hindi

Shopify में, Section एक customizable content block है जिसे आप अपने online store में add कर सकते है!. और अलग-अलग  प्रकार के content blocks को add करके pages buid करने के लिए sections का इस्तेमाल किया जा सकता है!. Section आपके store के layout और content को design करने के लिए एक flexible तरीके provide करते है!.
जिससे complex coding के बिना आपकी site के अलग-अलग parts को update और manage करना आसान हो जाता है!.

Key concepts before creating a section in Shopify in Hindi

Theme Structure

Shopify theme structure को समझना जरुरी है, जिसमे आम तोर पर layout, template, section और snippets शामिल होते है!. Section reusable components होते है। जबकि template page की overall page structure define करते है, जैसे की Shopify product को product template से और collection को उसके collection template से layout manage कर सकते है!.

Liquid

Shopify की temaplating language, Liquid का इस्तेमाल section बनाने के लिए किया जाता है!. Liquid के syntax और capabilities से familiar होना जरुरी है!.

Schema

हरेक section में JSON schema होती है जो Shopify admin में उस section के लिए available settings को define करती है!. यह schema merchants को section के content और style को customize करने की अनुमति देती है!.

CSS and Javascript

CSS और Javascript का basic knowledge section को styling और interactivity add करने के लिए usefull है!.

How to create a section in Shopify in hindi

Shopify में section create करने के लिए steps

Create a new section file

Shopify में section create करने के लिए सबसे पहले हमें एक section file create करनी पड़ेगी!. File create करने के लिए आप इन step को follow कर सकते है!.

1. In your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code next to your theme.
3. In the Sections directory, click Add a new section.
4. Enter a name for your section, for example, custom-section.

The Section Content

custom-section.liquid file open करके और basic structure को defining करके start कर सकते है!.
जैसे की इस section file में हम section के requirement के हिसाब से settings set कर सकते है!.

Schema

<div class="custom-section" data-section_name="custom-section">
 {% if section.settings.heading != blank %}
   <h2>{{ section.settings.heading }}</h2>
 {% endif %}
 {% if section.settings.content != blank %}
   <p>{{ section.settings.content }}</p>
 {% endif %}
</div>

{% schema %}
{
  "name": "Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Default heading text"
    },
    {
      "type": "textarea",
      "id": "content",
      "label": "Content",
      "default": "Default content text"
    }
  ],
  "presets": [
    {
      "name": "Custom Section"
    }
  ]
}
{% endschema %}

ऊपर के exaple में आप देख सकते है की heading(title) के लिए हमने text input और content के लिए textarea input का इस्तेमाल करके settings को define किया है!. और उन input field की value को output करने के लिए हमने liquid का इस्तेमाल किया है!.

CSS and JavaScript

आप अपने section को styling और interactive करने के लिए CSS और Javascript का इस्तेमाल कर सकते है!. और आप css और javascript के लिए अलग से file create कर सकते  है या section की उस file मेही css और javascript का code add कर सकते है!.

style code
<style>
.custom-section {
  padding: 20px;
  background-color: #f9f9f9;
}
.custom-section h2 {
  color: #333;
}
.custom-section p {
  font-size: 16px;
}
</style>

Add a section file in the template

अगर आप अपने द्वारा बनाये गये section को temaplte में add करना चाहते है!. तो आप उसे दो तरीके से add कर सकते है!.
पहला staticaly, उसमे क्या होता है की आप अपने section को directly theme.liquid में footer-group sections के पहले और header-group sections के बाद में add कर सकते है!.

{% section 'custom-section' %}

दूसरा आप Shopify theme customization में से section add section button पर click करके और अपने section को find करके add कर सकते है जहा आपको इन section की जरुरत हो!.

Custom section code

<style>
.custom-section {
  padding: 20px;
  background-color: #f9f9f9;
}
.custom-section h2 {
  color: #333;
}
.custom-section p {
  font-size: 16px;
}
</style>
<div class="custom-section" data-section_name="custom-section">
  {% if section.settings.heading != blank %}
    <h2>{{ section.settings.heading }}</h2>
  {% endif %}
  {% if section.settings.content != blank %}
   <p>{{ section.settings.content }}</p>
  {% endif %}
</div>

{% schema %}
{
  "name": "Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Default heading text"
    },
    {
      "type": "textarea",
      "id": "content",
      "label": "Content",
      "default": "Default content text"
    }
  ],
  "presets": [
    {
      "name": "Custom Section"
    }
  ]
}
{% endschema %}

Shopify में section create करने में theme structure को समजना, liquid code लिखना और section के लिए schema settings define करना और section के लिए css और javascript को add करना. इन सभी steps से आप अपने shopify store के लिए एक flexible और customizable section बना सकते है!