থিম কোড এডিট করা
কোড এডিটরের সাহায্যে অনলাইন স্টোরে বিস্তারিত পরিবর্তন করার জন্য আপনি আপনার থিম কোড এডিট করতে পারেন। থিম তৈরি করা বেশিরভাগ ফাইলে Shopify-এর টেমপ্লেটিং ভাষা Liquid থাকে। এছাড়াও, থিম ফাইলে HTML, CSS, JSON এবং JavaScript থাকে। আপনার যদি HTML ও CSS সম্পর্কে জানা থাকে এবং Liquid সম্পর্কে প্রাথমিক ধারণা থাকে, তবেই থিমের কোড এডিট করুন।
থিম কেনার পরই কেবল আপনি সেটির কোড এডিট করতে পারবেন। এর মধ্যে থিম এডিটরে এআই কোড জেনারেটর ব্যবহার করাও অন্তর্ভুক্ত রয়েছে। আপনি যদি কোনো পেইড থিমের ট্রায়াল সংস্করণ ব্যবহার করেন, তবে কোড পরিবর্তন করার আগে সেটি আপনাকে কিনতে হবে।
কোড এডিটরে আপনার থিমের ফাইলগুলোর একটি ডিরেক্টরি এবং ফাইলগুলো দেখানোর ও এডিট করার জন্য একটি স্পেস দেখানো হয়। ডিরেক্টরিতে কোনো ফাইলে ক্লিক করলে তা কোড এডিটরে খোলে। আপনি একসাথে একাধিক ফাইল খুলতে এবং এডিট করতে পারেন। এছাড়াও আপনি একসাথে একাধিক ফাইল খুলতে এবং রিভিউ করতে পারেন।
এই পেজে
আপনার থিম কোড এডিট করুন
আপনার থিমের ফাইলগুলো মডিফাই করতে আপনি কোড এডিটর ব্যবহার করতে পারেন।
ধাপসমূহ:
ডেস্কটপ
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
> কোড এডিট করুন-এ ক্লিক করুন।
মোবাইল
Shopify অ্যাপ থেকে,
আইকনে ট্যাপ করুন।সেলস চ্যানেল সেকশনে, অনলাইন স্টোর-এ ট্যাপ করুন।
থিম পরিচালনা করুন-এ ট্যাপ করুন।
- > কোড এডিট করুন-এ ট্যাপ করুন।
পরিবর্তনগুলো সেভ করা
আপনি যখন কোনো ফাইল এডিট করেন, তখন সেভ না করা পরিবর্তনগুলো বোঝাতে ট্যাবের নামের পাশে একটি বিন্দু দেখা যায়। পরিবর্তনগুলো সেভ করতে সেভ বাটনে ক্লিক করুন। পরিবর্তনগুলো সেভ করতে Mac-এ ⌘ + S অথবা Windows-এ Ctrl + S-ও চাপতে পারেন।
থিম কোড ফর্ম্যাট করা
কোড ইনডেন্টেশন ঠিক করতে, Mac-এ ⌘ + Shift + P বা Windows-এ Ctrl + Shift + P চেপে কমান্ড প্যালেট খুলুন, format লিখুন এবং তারপর ডকুমেন্ট ফর্ম্যাট করুন নির্বাচন করুন।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
আপনি যে ফাইলটি ফর্ম্যাট করতে চান, সেটি খুলুন।
Mac-এ
⌘+Pবা Windows-এCtrl+Pচাপুন।কমান্ড প্যালেটে format লিখুন, এরপর কীবোর্ডে
Enterচাপুন।ফাইলটি সেভ করুন।
ফাইলের পরিবর্তনগুলো ট্র্যাক করা
পরিমার্জিত কোনো থিম ফাইলকে আগের ভার্সনে রিস্টোর করতে, সেই ফাইলের জন্য টাইমলাইন ভিউ ব্যবহার করুন।
টাইমলাইন ভিউ একবারে একটি বিদ্যমান ফাইল রিস্টোর করে। এটি সম্পূর্ণ থিম রিস্টোর করে না এবং মুছে ফেলা থিম ফাইলগুলো পুনরুদ্ধার করতে পারে না। টাইমলাইন ইতিহাস সীমিত, তাই হয়তো পুরোনো ভার্সনগুলো পাওয়া যাবে না।
রিস্টোর করা হলে তা ফাইলের সম্পূর্ণ কনটেন্ট প্রতিস্থাপন করে দেয়, যার মধ্যে এমন পরিবর্তনও থাকতে পারে যা আপনি হয়তো রাখতে চান। কোনো ফাইল রিস্টোর করার আগে, আপনি কোনো পরিবর্তন রেখে দিতে চাইলে বর্তমান ফাইলের কনটেন্টটি নিরাপদ কোনো জায়গায় কপি করে রাখুন।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
আপনি যে বিদ্যমান ফাইলটি পর্যালোচনা বা রিস্টোর করতে চান, সেটি খুলুন।
ঐচ্ছিক: আপনি যদি বর্তমান কোনো পরিবর্তন রেখে দিতে চান, তবে রিস্টোর করার আগে বর্তমান ফাইলের কনটেন্টটি নিরাপদ কোনো জায়গায় কপি করে রাখুন।
টাইমলাইন ভিউ থেকে, পার্থক্যগুলো তুলনা করতে টাইমলাইনের কোনো এন্ট্রিতে ক্লিক করুন।
ফাইলের সম্পূর্ণ কনটেন্ট নির্বাচিত আগের ভার্সনটি দিয়ে প্রতিস্থাপন করতে, টাইমলাইন এন্ট্রিতে রাইট-ক্লিক করুন এবং এরপর কনটেন্ট রিস্টোর করুন নির্বাচন করুন।
রিস্টোর করুন-এ ক্লিক করুন।
থিম চেক
কোড এডিটরে 'থিম চেক' অন্তর্ভুক্ত আছে। এটি এমন একটি বৈশিষ্ট্য, যা লাইভ থিমে কোনো ত্রুটি প্রকাশ পাওয়ার পরিবর্তে, কোড লেখার সময়ই তাৎক্ষণিক প্রতিক্রিয়া দিয়ে ত্রুটি প্রতিরোধ করতে সহায়তা করে।
কোড এডিটরের 'থিম চেক' এডিট করা কোডে নিচের ত্রুটিগুলো শনাক্ত করতে পারে:
- পার্সার ব্লকিং স্ক্রিপ্ট, যা স্টোরফ্রন্টকে ধীর করে দিতে পারে
- অনুবাদের ফাইলগুলোর মাঝে অসামঞ্জস্যতা, যেমন অনুবাদ কী (key) না থাকা বা এমন অনুবাদ যা কোনো লোকেল ফাইলে মেলে না
- টেমপ্লেট না থাকা
কোডের নিচে লাল রঙের লাইন দিয়ে ত্রুটি নির্দেশ করা হয়। ত্রুটি দেখতে, হাইলাইট করা লাইনটির ওপর মাউস হোভার করুন।
কোড এডিটরে সার্চ এবং রিপ্লেস করা
আপনি নিচের যেকোনো উপায়ে কোড এডিটরের ভেতর সার্চ করতে পারেন:
- নির্দিষ্ট কোনো ফাইলের কোড সার্চ করুন।
- থিমের সব ফাইলের কোড সার্চ করুন।
আপনি নির্দিষ্ট কোনো ফাইলের কোড বা সব থিম ফাইলের একাধিক ইনস্ট্যান্স রিপ্লেস করতে পারেন। কোনো ফাইল খুলতে আপনি নাম দিয়েও ফাইলটি সার্চ করতে পারেন।
কোনো ফাইলের ভেতর সার্চ করা
আপনি নির্দিষ্ট কোনো ফাইলের কোড সার্চ করে তা রিপ্লেস করতে পারেন। কোডের প্রতিটি ইনস্ট্যান্স পর্যালোচনা করতে অ্যারো (arrow) কীগুলো ব্যবহার করুন।
কোড সার্চ করার পর, আপনি ফাইলে থাকা কোড রিপ্লেস করতে পারবেন।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
আপনি যে ফাইলে সার্চ করতে চান, সেটি খুলুন।
Mac-এ
⌘+Fবা Windows-এCtrl+Fচাপুন।সার্চ ফিল্ডে, আপনার সার্চ টার্মটি লিখুন।
ঐচ্ছিক: কোড রিপ্লেস করতে, নিচের কাজগুলো সম্পন্ন করুন:
- সার্চ মোডালে,
আইকনে ক্লিক করুন। - রিপ্লেস করুন ফিল্ডে, রিপ্লেসমেন্ট কোডটি লিখুন। বিদ্যমান ইনস্ট্যান্সের সাথে রিপ্লেসমেন্ট কোডটির বড়/ছোট হাতের অক্ষর (ক্যাপিটালাইজেশন) হুবহু মেলাতে আপনি কেস প্রিজার্ভ করুন-এ ক্লিক করতে পারেন।
- একবারে একটি করে ইনস্ট্যান্স রিপ্লেস করতে রিপ্লেস করুন আইকনে ক্লিক করুন অথবা একবারে সব ইনস্ট্যান্স রিপ্লেস করতে সব রিপ্লেস করুন আইকনে ক্লিক করুন।
সব ফাইলে সার্চ করা
সব থিম ফাইলে সার্চ করতে বামদিকের সাইডবারের সার্চ বাটনে ক্লিক করুন। সার্চের ফলাফলে আপনার সার্চ টার্মের প্রতিটি ইনস্ট্যান্স এবং সেটি কোন ফাইলে আছে তা দেখা যাবে।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
সার্চ প্যানেল খুলতে
আইকনে ক্লিক করুন। সার্চ ফিল্ডে, আপনার সার্চ টার্মটি লিখুন।
ঐচ্ছিক: কোড রিপ্লেস করতে, নিচের কাজগুলো সম্পন্ন করুন:
- সার্চ মোডালে, আইকনে ক্লিক করুন।
- রিপ্লেস করুন ফিল্ডে, রিপ্লেসমেন্ট কোডটি লিখুন।
- একবারে একটি ইনস্ট্যান্স অথবা একবারে সব ইনস্ট্যান্স রিপ্লেস করুন।
অ্যাডভান্সড সার্চের বিকল্পগুলো
আপনার সার্চের ফলাফল সীমিত করতে, নিচের এক বা একাধিক সার্চ অপশন ব্যবহার করুন:
- Match case-এর সাহায্যে কেস (অক্ষরের আকার) মিলে যায় এমন খোঁজার শব্দগুলো দেখা যায়। উদাহরণস্বরূপ, আপনি যদি product লেখেন, তাহলে অনুসন্ধানে "product" বা "Product"-এর যেকোনো উদাহরণ হাইলাইট করা হয়। আপনি যদি Match case বেছে নেন, তাহলে অনুসন্ধানে শুধু product-এর উদাহরণ হাইলাইট করা হয়।
- Match Whole Word-এর সাহায্যে হুবহু একই শব্দের সাথে মিলে যায় এমন খোঁজার শব্দগুলো দেখা যায় এবং আংশিক মিল বাদ দেওয়া হয়। উদাহরণস্বরূপ, আপনি যদি cart লেখেন, তাহলে অনুসন্ধানে "cart"-এর উদাহরণ হাইলাইট করা হয়, কিন্তু "carton"-এর ক্ষেত্রে তা হয় না।
- Use Regular Expression-এর সাহায্যে রেগুলার এক্সপ্রেশনের (regex) সাথে মিলে যায় এমন খোঁজার ফলাফলগুলো দেখা যায়। একটি regex হলো কতগুলো অক্ষরের স্ট্রিং যা টেক্সটে একটি ম্যাচ প্যাটার্ন নির্দিষ্ট করে।
Search প্যানেলে, আপনি অনুসন্ধানের ফলাফলে অন্তর্ভুক্ত করতে বা তা থেকে বাদ দিতে ফাইল ও ফোল্ডার বেছে নিতে পারেন।
উন্নত মেনু খুলতে -এ ক্লিক করুন। আপনি files to include বা files to exclude ফিল্ডে যেকোনো ফাইল বা ফোল্ডারের পাথ লিখতে পারেন। একাধিক ফাইল বা ফোল্ডার যোগ করতে, সেগুলোকে একটি স্পেস এবং কমা দিয়ে আলাদা করুন। উদাহরণস্বরূপ, sections ফোল্ডারে ফাইল খুঁজতে, files to include ফিল্ডে ./sections লিখুন।
আপনি ফাইল ডিরেক্টরি ভিউ থেকে কোনো নির্দিষ্ট ফোল্ডারের ভেতরেও খুঁজতে পারেন। একটি ফোল্ডারে রাইট-ক্লিক করুন এবং তারপর ড্রপডাউন মেনু থেকে Find in folder... বেছে নিন।
থিম ফাইল ম্যানেজ করা
আপনি আপনার থিম কোডে ফাইল ম্যানেজ করতে পারেন। আপনি ফাইল মুছতে পারেন, নতুন ফাইল যোগ করতে পারেন, ফাইলের নাম পরিবর্তন করতে পারেন এবং পূর্ববর্তী সংস্করণ উপলভ্য থাকলে Timeline ভিউ থেকে সংশোধিত বিদ্যমান কোড ফাইলগুলো পুনরুদ্ধার করতে পারেন। assets ফোল্ডারে থাকা অ্যাসেট ফাইল, যেমন- ছবি, CSS, JavaScript এবং ফন্টগুলোর ক্ষেত্রে কোনো Timeline-এর ইতিহাস থাকে না।
থিম ফাইল খোলা
একটি থিম ফাইল খুলতে, একটি ফোল্ডারে ক্লিক করুন এবং তারপর এক্সপ্লোরার থেকে ফাইলের নামে ক্লিক করুন। আপনি নাম বা এক্সটেনশন দিয়েও ফাইল খুঁজতে পারেন এবং তারপর সেটি খুলতে পারেন।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
Mac-এ
⌘+Pবা Windows-এCtrl+Pচাপুন।সার্চ বারে ফাইলের নাম লিখুন এবং ফাইলটি বেছে নিন, অথবা Recently opened তালিকা থেকে একটি ফাইল বেছে নিন।
নতুন থিম ফাইল যোগ করা
কোনো ফাইল যোগ করতে, একটি ফোল্ডার বেছে নিন, New file আইকনে ক্লিক করুন এবং তারপর ফাইলের নাম ও ফাইল এক্সটেনশন লিখুন।
ফাইলের নামে A-Z, 0-9 অক্ষর থাকতে পারে এবং এতে কোনো স্পেস থাকতে পারে না। ড্যাশ বা আন্ডারস্কোর দিয়ে শব্দগুলো আলাদা করুন। একটি ফাইল এক্সটেনশন একটি পিরিয়ড . এবং এক্সটেনশনের ধরন দিয়ে সংজ্ঞায়িত করা হয়। উদাহরণস্বরূপ, .liquid বা .css।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
আপনি যে ফোল্ডারটিতে একটি নতুন ফাইল যোগ করতে চান সেটিতে ক্লিক করুন।
ফোল্ডারের নামে রাইট-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে New file... বেছে নিন।
ফাইলের জন্য একটি নতুন নাম লিখুন।
আপনার কীবোর্ডে
Enterচাপুন।
নতুন অ্যাসেট আপলোড করা
আপনি কোড এডিটরের assets ফোল্ডারে একটি নতুন অ্যাসেট আপলোড করতে পারেন, যেমন- আইকন বা ইমেজ ফাইল।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
assets ফোল্ডারে রাইট-ক্লিক করুন।
Upload...-এ ক্লিক করুন।
আপনি যে ফাইলটি আপলোড করতে চান সেটি বেছে নিন।
Open-এ ক্লিক করুন।
থিম ফাইলের নাম পরিবর্তন করা
কোনো ফাইলের নাম পরিবর্তন করতে আপনি সেটিতে রাইট-ক্লিক করতে পারেন। মনে রাখবেন যে, কোনো ফাইল এক্সটেনশন এডিট করবেন না বা সরাবেন না। ফাইল এক্সটেনশন একটি পিরিয়ড . এবং এক্সটেনশনের ধরন দিয়ে সংজ্ঞায়িত করা হয়। উদাহরণস্বরূপ, .liquid বা .css। ফাইলের নামে A-Z, 0-9 অক্ষর থাকতে পারে এবং কোনো স্পেস থাকতে পারে না। ড্যাশ বা আন্ডারস্কোর দিয়ে শব্দগুলো আলাদা করুন। ফাইলের নামটি সঠিক না হলে নতুন ফাইলের নামটি সেভ হবে না।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
কোনো ফাইলে রাইট-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে Rename... বেছে নিন।
ফাইলের জন্য একটি নতুন নাম লিখুন।
আপনার কীবোর্ডে
Enterচাপুন।
থিম ফাইল মুছে ফেলা
আপনি আপনার থিমের যেকোনো ফাইল মুছে ফেলতে পারেন। মুছে ফেলা থিম ফাইলগুলো আর পুনরুদ্ধার করা যায় না।
ধাপসমূহ:
আপনার Shopify অ্যাডমিন থেকে, অনলাইন স্টোর-এ যান।
- > কোড এডিট করুন-এ ক্লিক করুন।
কোনো ফাইলে রাইট-ক্লিক করুন এবং ড্রপ-ডাউন মেনু থেকে Delete permanently বেছে নিন।
Delete-এ ক্লিক করুন।