Редагування коду теми

Обережно

Якщо внесені вами зміни до коду теми несумісні з оновленням теми, усі вони будуть видалені в оновленій копії. Редагувати код теми варто лише в тому разі, якщо ви не можете внести необхідні зміни за допомогою застосунку Shopify або редактора тем.

За допомогою редактора коду ви можете редагувати код теми, щоб вносити детальні зміни у свій інтернет-магазин. Більшість файлів, з яких складається тема, містять Liquid — мову шаблонів Shopify. Файли теми також містять HTML, CSS, JSON та JavaScript. Редагуйте код теми, лише якщо ви знаєте HTML і CSS, а також маєте базове розуміння Liquid.

Ви можете редагувати код теми лише після її купівлі. Це стосується й використання генератора коду на базі ШІ в редакторі тем. Якщо ви використовуєте пробну версію платної теми, вам необхідно її придбати, перш ніж вносити зміни до коду.

Розвивайте свій бізнес

Якщо ви хочете додати користувацькі функції або код, але не маєте досвіду розробки вебсайтів за допомогою HTML, CSS та JavaScript, радимо найняти партнера Shopify.

Обережно

Щоб підготуватися до кастомізації теми, виконайте такі рекомендовані дії:

• Продублюйте тему, щоб створити резервну копію. Це дасть змогу легко відхилити зміни й почати спочатку в разі потреби.
• Переконайтеся, що розумієте, який рівень підтримки вам доступний.
• Ознайомтеся з вимогами та найкращими практиками щодо завантаження зображень.

У редакторі коду відображається каталог файлів вашої теми, а також робоча область для їх перегляду й редагування. Коли ви натискаєте файл у каталозі, він відкривається в редакторі коду. Ви можете відкривати та редагувати кілька файлів одночасно. Ви також можете одночасно відкривати й переглядати декілька файлів.

Редагування коду теми

За допомогою редактора коду ви можете змінювати файли вашої теми.

Кроки:

Десктоп

1. У панелі адміністрування Shopify перейдіть до розділу Інтернет-магазин.

2. Натисніть > Редагувати код.

Мобільний пристрій

1. У застосунку Shopify торкніться значка .

2. У розділі Канали продажів торкніться Інтернет-магазин.

3. Торкніться Керувати темами.

4. Торкніться > Редагувати код.

Збереження змін

Під час редагування файлу поруч із назвою вкладки з’являється крапка, яка вказує на незбережені зміни. Натисніть кнопку Зберегти, щоб зберегти зміни. Також для збереження змін можна натиснути ⌘ + S на Mac або Ctrl + S на Windows.

Форматування коду теми

Щоб виправити відступи в коді, відкрийте палітру команд за допомогою комбінації клавіш ⌘ + Shift + P на Mac або Ctrl + Shift + P на Windows, введіть format, а потім виберіть Format document.

Кроки:

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) — це рядок символів, що визначає шаблон пошуку в тексті.

Обережно

Використання регулярних виразів — це метод розширеної кастомізації. Ви можете скористатися сторонніми інструментами, як-от regex101 або RegExr, щоб отримати інструкції зі створення рядка регулярного виразу.

На панелі Пошук також можна вибрати файли й папки, які слід включити до результатів пошуку або виключити з них.

Натисніть , щоб відкрити розширене меню. Ви можете ввести будь-який шлях до файлу або папки в поля файли для включення або файли для виключення. Щоб додати кілька файлів чи папок, розділяйте їх комою та пробілом. Наприклад, для пошуку файлів у папці 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. Натисніть Видалити.