Редактиране на кода на темата

Внимание

Ако промените, които сте направили в кода на дадена тема, са несъвместими с актуализация на темата, тогава всички Ваши промени в кода се премахват в актуализираното копие. Трябва да редактирате кода на темата си само ако не можете да направите необходимите промени, като използвате приложение Shopify или редактора на теми.

Можете да редактирате кода на Вашата тема, за да направите детайлни промени в своя онлайн магазин с помощта на редактора на код. Повечето от файловете, които съставляват една тема, съдържат Liquid – езика за шаблони на Shopify. Файловете на темите съдържат също така HTML, CSS, JSON и JavaScript. Редактирайте кода на дадена тема само ако познавате HTML и CSS и имате основни познания за Liquid.

Можете да редактирате кода на темата си едва след като сте я закупили. Това включва използването на AI генератора на код в редактора на теми. Ако използвате пробна версия на платена тема, трябва да я закупите, преди да можете да правите промени в кода.

Развитие на бизнеса

Ако искате да добавите персонализирани функции или код, но нямате опит в разработването на уебсайтове с HTML, CSS и JavaScript, обмислете наемането на Shopify Partner.

Внимание

За да се подготвите за персонализиране на Вашата тема, изпълнете следните препоръчителни задачи:

• Дублирайте темата си, за да създадете резервно копие. Това улеснява отхвърлянето на промените и започването отначало, ако се наложи.
• Уверете се, че разбирате какво ниво на поддръжка е налично.
• Научете за изискванията и най-добрите практики за качване на изображения.

Редакторът на код показва директория с файловете на Вашата тема и пространство за показване и редактиране на файловете. Когато кликнете върху файл в директорията, той се отваря в редактора на код. Можете да отваряте и редактирате няколко файла едновременно. Можете също така да отваряте и преглеждате няколко файла едновременно.

Редактиране на кода на темата Ви

Можете да използвате редактора на код, за да променяте файловете на темата си.

Стъпки:

Настолен компютър

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

Мобилно устройство

1. От приложението Shopify докоснете иконата .

2. В секция Канали за продажба докоснете Онлайн магазин.

3. Докоснете Управление на теми.

4. Докоснете > Редактиране на код.

Запазване на промените

Когато редактирате файл, до името на раздела се показва точка, която указва незапазени промени. Кликнете върху бутона Запазване, за да запазите промените си. Можете също да въведете ⌘ + S на Mac или Ctrl + S на Windows, за да запазите промените си.

Форматиране на кода на темата

За да коригирате отстъпите в кода, отворете командната палитра с ⌘ + Shift + P на Mac или Ctrl + Shift + P на Windows, въведете format и след това изберете Форматиране на документ.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Отворете файла, който искате да форматирате.

4. Въведете ⌘ + P на Mac или Ctrl + P на Windows.

5. В командната палитра въведете format, след което натиснете Enter на клавиатурата си.

6. Запазете файла.

Проследяване на промените във файла

За да възстановите променен файл на темата до предишна версия, използвайте изгледа Хронология за съответния файл.

Изгледът Хронология възстановява по един съществуващ файл наведнъж. Той не възстановява цялостната тема и не може да възстанови изтрити файлове на темата. Историята на хронологията е ограничена, така че по-старите версии може да не са налични.

Възстановяването заменя цялото съдържание на файла, включително промени, които може да искате да запазите. Преди да възстановите файл, копирайте текущото му съдържание на сигурно място, в случай че искате да запазите някои от промените.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Отворете съществуващия файл, който искате да прегледате или възстановите.

4. По избор: Ако искате да запазите някои от текущите промени, копирайте съдържанието на файла на сигурно място, преди да го възстановите.

5. В изгледа Хронология кликнете върху запис в хронологията, за да сравните разликите.

6. За да замените цялото съдържание на файла с избраната предишна версия, кликнете с десния бутон върху записа в хронологията и след това изберете Възстановяване на съдържанието.

7. Кликнете върху Възстановяване.

Theme Check

Редакторът на код включва Theme Check – функция, която помага за предотвратяването на грешки, като предоставя незабавна обратна връзка, докато се пише кодът, вместо да откривате грешки в активната си тема.

В редактора на код Theme Check може да идентифицира следните грешки в редактирания код:

• Скриптове, блокиращи парсера, които могат да забавят витрината
• Несъответствия между файловете за превод, като например липсващи ключове за превод или преводи, които не съвпадат в даден локален файл
• Липсващи шаблони

Грешките се обозначават с червена линия под кода. За да видите грешката, задръжте курсора на мишката върху маркирания ред.

Търсене и заместване в редактора на код

Можете да търсите в редактора на код по един от следните начини:

• Търсене в кода на конкретен файл.
• Търсене в кода на всички файлове в темата.

Можете също така да замествате код в конкретен файл или на няколко места във всички файлове на темата. Можете да търсите файл и по име, за да отворите файл.

Търсене във файл

Можете да търсите код в конкретен файл и да го замествате. Използвайте клавишите със стрелки, за да прегледате всеки екземпляр на кода.

След като потърсите код, можете да го замените във файл.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Отворете файла, в който искате да търсите.

4. Натиснете ⌘ + F на Mac или Ctrl + F на Windows.

5. В полето Търсене въведете Вашия термин за търсене.

6. По избор: За да замените код, изпълнете следните действия:

• В модалния прозорец за търсене кликнете върху иконата .
• В полето Заместване въведете кода за заместване. Можете да кликнете върху Запазване на регистъра, за да съобразите главните букви на кода за заместване с тези на съществуващия екземпляр.
• Кликнете върху иконата Заместване, за да заместите един екземпляр, или върху иконата Заместване на всички, за да заместите всички екземпляри наведнъж.

Търсене във всички файлове

Кликнете върху бутона за търсене в лявата странична лента, за да търсите във всички файлове на темата. Резултатите показват всеки екземпляр на Вашия термин за търсене и в кой файл се намира.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Кликнете върху иконата , за да отворите панела за търсене.

4. В полето Търсене въведете Вашия термин за търсене.

5. По избор: За да замените код, изпълнете следните действия:

• В модалния прозорец за търсене кликнете върху иконата .
• В полето Заместване въведете кода за заместване.
• Заменете един екземпляр или всички екземпляри наведнъж.

Разширени опции за търсене

За да стесните резултатите от търсенето, използвайте една или повече от следните опции за търсене:

• Съвпадение на регистъра връща термини за търсене, които съвпадат по регистър. Например, ако въведете product, търсенето ще маркира всички екземпляри на „product“ или „Product“. Ако изберете Съвпадение на регистъра, търсенето ще маркира само екземпляри на product.
• Съвпадение на цяла дума връща термини за търсене, които съвпадат с точната дума, и изключва частични съвпадения. Например, ако въведете cart, търсенето ще маркира екземпляри на „cart“, но не и на „carton“.
• Използване на регулярен израз връща резултати от търсенето, които съответстват на регулярен израз (regex). Regex е низ от символи, който указва модел на съвпадение в текст.

Внимание

Използването на regex е усъвършенствана техника за персонализиране. Можете да използвате инструмент на трета страна като regex101 или RegExr за насоки относно изграждането на regex низ.

В панела Търсене можете също да избирате файлове и папки, които да включите или изключите от резултатите от търсенето.

Кликнете върху , за да отворите разширеното меню. Можете да въведете път до всеки файл или папка в полетата файлове за включване или файлове за изключване. За да добавите повече от един файл или папка, разделете ги с интервал и запетая. Например, за да търсите файлове в папката sections, въведете ./sections в полето файлове за включване.

Можете също така да търсите в конкретна папка от изгледа на файловата директория. Кликнете с десния бутон върху папка и след това изберете Търсене в папка... от падащото меню.

Управление на файлове на темата

Можете да управлявате файловете в кода на темата си. Можете да изтривате, добавяте нови и преименувате файлове, както и да възстановявате променени съществуващи файлове с код от изгледа им Хронология, когато е налична предишна версия. Файловете с активи, като изображения, CSS, JavaScript и шрифтове в папката assets, нямат история в Хронологията.

Отваряне на файл на тема

За да отворите файл на тема, кликнете върху папка и след това върху името на файла в експлоръра. Можете също да търсите файлове по име или разширение и след това да отворите файла.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Въведете ⌘ + P на Mac или Ctrl + P на Windows.

4. Въведете името на файла в лентата за търсене и го изберете, или изберете файл от списъка Наскоро отворени.

Добавяне на нов файл на тема

За да добавите файл, изберете папка, кликнете върху иконата Нов файл и след това въведете името на файла и файловото разширение.

Имената на файловете могат да включват символи A-Z, 0-9 и не могат да включват интервали. Разделяйте думите с тирета или долни черти. Файловото разширение се определя от точка . и типа на разширението. Например .liquid или .css.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Кликнете върху папката, към която искате да добавите нов файл.

4. Кликнете с десния бутон върху името на папката и изберете Нов файл... от падащото меню.

5. Въведете ново име за файла.

6. Натиснете Enter на клавиатурата си.

Качване на нов асет

Можете да качите нов асет, като например икона или файл с изображение, в папката assets на редактора на код.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Кликнете с десния бутон върху папката assets.

4. Кликнете върху Качване....

5. Изберете файла, който искате да качите.

6. Кликнете върху Отваряне.

Преименуване на файл на тема

Можете да щракнете с десен бутон върху файл, за да го преименувате. Уверете се, че не редактирате или премахвате файловото разширение. Файловото разширение се дефинира от точка `.` и типа на разширението. Например `.liquid` или `.css`. Имената на файловете могат да включват буквите A-Z, цифрите 0-9 и не могат да съдържат интервали. Разделяйте думите с тирета или долни черти. Ако името на файла не е валидно, новото име няма да се запази.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Щракнете с десен бутон върху файл и изберете Преименуване... от падащото меню.

4. Въведете ново име за файла.

5. Натиснете Enter на клавиатурата си.

Изтриване на файл от темата

Внимание

Изтриването на файл от темата може да я повреди. Преди да изтриете който и да е файл, уверете се, че сте направили дубликат на темата си.

Можете да изтривате файлове от темата си. Изтритите файлове от темата не могат да бъдат възстановени.

Стъпки:

1. От своя администраторски панел на Shopify отидете на Онлайн магазин > Теми.

2. Кликнете върху > Редактиране на код.

3. Щракнете с десен бутон върху файл и изберете Изтриване за постоянно от падащото меню.

4. Натиснете Изтриване.