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

Внимание

Если внесённые вами в код темы изменения несовместимы с её обновлением, то все они будут удалены из обновлённой копии. Редактируйте код темы, только если не можете внести нужные изменения с помощью приложения 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 и выберите Форматировать документ.

Шаги:

1. В панели администратора Shopify откройте раздел Интернет-магазин > Темы.

2. Нажмите > Редактировать код.

3. Откройте файл, который хотите отформатировать.

4. Нажмите ⌘ + P на Mac или Ctrl + P на Windows.

5. В палитре команд введите format и нажмите клавишу Enter на клавиатуре.

6. Сохраните файл.

Отслеживание изменений файла

Чтобы восстановить предыдущую версию измененного файла темы, используйте режим Временная шкала для этого файла.

Режим Временная шкала позволяет восстанавливать только по одному существующему файлу. С его помощью нельзя восстановить тему целиком или вернуть удаленные файлы темы. История временной шкалы ограничена, поэтому более старые версии могут быть недоступны.

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

Шаги:

1. В панели администратора Shopify откройте раздел Интернет-магазин > Темы.

2. Нажмите > Редактировать код.

3. Откройте существующий файл, который вы хотите просмотреть или восстановить.

4. Необязательно: если вы хотите сохранить текущие изменения, перед восстановлением скопируйте текущее содержимое файла в надежное место.

5. В режиме Временная шкала нажмите на запись на временной шкале, чтобы сравнить отличия.

6. Чтобы заменить все содержимое файла на выбранную предыдущую версию, нажмите правой кнопкой мыши на запись на временной шкале и выберите Восстановить содержимое.

7. Нажмите Восстановить.

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. Нажмите «Удалить».