Добавление образцов цветов в продукты

Решение

Решение, представленное здесь, не будет работать в следующих темах: венчурный и безграничный.

После выполнения действий, описанных в этом руководстве, параметры цвета ваших продуктов будут отображаться на страницах продукта как образцы с возможностью нажатия.:

Любая опция, которая не является цветом (например, Размер, Название), будет превращена в серые кнопки, как это:

Взгляните на это демо-магазин , чтобы увидеть учебник в действии.

На этой страничке

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

  1. Из своего важными администратора, перейти в интернет магазин > темы.
  1. Найти тему, которую вы хотите изменить, а затем щелкните действия > редактировать код.
  2. На левой стороне, нажмите на фрагменты заголовка, чтобы раскрыть свои фрагменты контента.
  3. Под заголовком фрагменты, нажмите кнопку Добавить новый фрагмент ссылке:
  4. Позвоните в свой новый фрагмент ‘образец‘. Нажмите кнопку Создать сниппет.
  5. Копировать+вставить содержимое этого файла в новый swatch.liquid фрагмент.
  6. Сохранение изменений.

Включить образец.жидкость в продукте.жидкий

  1. Правка HTML и CSS в разделе Шаблоны заголовком слева, найдите и нажмите кнопку product.liquid для открытия вашего товара шаблон в онлайн редакторе.
  2. Включать свой swatch.liquid фрагмент, где вы хотите вставить на образец. Включите его с названием опции продукта, которую вы должны превратить в образец. Например, используйте этот код, если ваш продукт имеет цвет варианта:{% if product.available and product.variants.size > 1 %} {% include 'swatch' with 'Color' %} {% endif %}

Если вы хотите использовать кнопку обработки на размер вариант, использовать этот:

Если вы хотите применить кнопку или обработку образца ко всем вашим опциям продукта, используйте это:

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

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

Если Вы не уверены, какой фрагмент кода использовать, используйте последний.

Если Вы не уверены, куда вставить фрагмент, найдите элемент select с именем ‘ id ‘ и добавьте фрагмент прямо под этим элементом:

Найдите функцию selectCallback

Эти selectCallback функции в тема Shopify обновляет состояние добавить в корзину кнопку и отображается продажа и “сравнение по ценам”, когда вариант выбран.

Еще в свой product.liquid файл, найти этот:

Не видите этого? Под макеты папок, найдите и щелкните theme.liquid файл, чтобы открыть его в онлайн-редактор кода. В изрядное количество тем, selectCallback функция находится в этом файле вместо product.liquid.

После того как вы расположены ваши selectCallback функции, добавьте следующий код в тело функции, либо в верхней или нижней:

Если вы добавляете его в верхней части тела функции:

Если вы добавите его в нижней части тела функции:

Добавьте код в нижней части темы.жидкий

Еще на редактирования HTML и CSS страницы, под макеты заголовок слева, найдите и щелкните theme.liquid файл, чтобы открыть его в онлайн-редактор кода.

В нижней части theme.liquid файла, прямо над вашим </body> тегом, добавьте этот код:

Загрузите soldout.png графика к вашей теме активов

Мы собираемся загрузить графическое изображение для наших ресурсов темы, которые будут накладываться поверх наших кнопок, когда их связанное значение будет распродано для всех вариантов нашего продукта.

Вы можете использовать это одно изображение ниже, сохранить его на рабочем столе:

Отмечать

Не забудьте назвать его soldout.формат PNG.

CSS, который мы используем, растягивается или сжимает этот рисунок, чтобы он хорошо вписывался на кнопку или образец.

  1. На редактирования HTML и CSS страницы найдите и нажмите на активы папку для отображения ее содержимого.
  2. Под активами заголовок, щелкните Добавить новый актив ссылке.
  3. Загрузите свой soldout overlay.

Добавление CSS в таблицу стилей

  1. На редактирования HTML и CSS страницы найдите и нажмите на активы папку для отображения ее содержимого.
  2. Под активами заголовком найдите файл с расширением .css.liquid , что это не checkout.css.liquid. Должен быть только один другой файл. Такой файл часто называют styles.css.liquidstyle.css.liquid или shop.css.liquid.
  3. После обнаружения файла щелкните его, чтобы открыть его в интерактивном редакторе кода. Копировать+вставить содержимое этого файла в нижней части вашего файла. Важно добавить CSS в нижней части таблицы стилей.

Если вы не можете найти вашей темы стилей, копировать+вставить CSS, предоставленных в styleэлемент, и добавить, что стиль элемента в нижней части product.liquid файла.

Загрузка цветных изображений

Если у вас есть варианты цвета, вы можете либо позволить, чтобы смекалка сценария предоставила цвет для вас, либо вы можете загрузить изображение, которое представляет этот цвет.

Как я получил мои изображения из моих продуктов в моем демо-магазине, чтобы открыть каждое изображение продукта на моей витрине в «colorbox» (лайтбокс) и захватить вокруг ~ 55 на 40 пикселей раздел изображения продукта, а затем сохранить этот небольшой экран захватить на моем рабочем столе, и переименовать изображение.

Отмечать

Здесь есть важное соглашение об именах! Изображение должно быть названо после опции color, но быть handleized, и иметь a .расширение png.

Например, если у вас есть Цвет под названием «Déjà Vu Blue», то назовите свой образ deja-Vu-blue.формат PNG

Другой пример, если ваш цвет синий/серый’, потом название вашего изображения blue-gray.png.

Самый простой пример, если ваш цвет «черный», название вашего изображения black.png.

  1. На редактирования HTML и CSS страницы найдите и нажмите на активы папку, чтобы раскрыть его содержание.
  2. Под активами заголовок, щелкните Добавить новый актив ссылке.
  3. Загрузите изображение.

Повторяйте шаги 2 и 3 до тех пор, пока не будут загружены все ваши изображения.

Вопросы и ответы

  • Что происходит, когда мои продукты имеют варианты, отличные от цвета и размера?Если вы включите образец со всеми опциями продукта, каждый вариант будет превращен в кнопки. Если вы включаете только образец с ‘Color’, то остальные опции будут представлены их обычным выпадающим списком.
  • Что будет с моими продуктами, которые имеют только один вариант?Ничего не взорвется. Там не будет кнопки для этого продукта.
  • Что будет, если один цвет (или размер, или…) продано для всех вариантов моего продукта?Он будет слегка серым и зачеркнут.
  • С помощью этого решения, может ли моя тема по-прежнему автоматически выбрать первый доступный вариант на странице загрузки?ДА.
  • Что делать, если я хочу использовать изображения JPEG для моих образцов вместо PNG?В ваш swatch.liquid файл, редактировать строку Номер 5 для этого:{% assign file_extension = 'jpg' %}
  • Что происходит, если я забыл или не Загрузил изображение для одного из моих цветов?Ничего не взорвется. Сценарий возьмет последнее слово Вашего имени цвета и установит цвет коробки образца к этому имени:background-color: {{ value | split: ' ' | last | handle }};Если цвет ‘небесно-голубой’, то CSS будет применять синий цвет к коробке. Вот список из CSS цвет ключевых слов и их шестнадцатеричные значения.Если нет цвета, связанного с этим словом, то поле будет серым, но имя цвета будет отображаться во всплывающей подсказке.
  • Нужно ли загружать изображение, если я согласен с веб-цветом по умолчанию, связанным с моим именем цвета?Правильный.
  • Коробки могут быть меньше? Они вроде большие!ДА. В начале предоставленной CSS, то есть 2 жидкости переменных, которые можно изменить, width и height. Отредактируйте эти значения. Вот и все.
  • Почему мои параметры цвета отображаются как текст в поле, а не как цветная коробка?Назовите опцию Shopify Color, или color, или Colour, или colour, или Base color, или что-нибудь, что содержит colo(u)r в нем. Это не чувствительно к регистру.
  • Это совместимо с глубоким вариантом связывания?ДА. Этот адрес содержится ?variant=179075152 в его. Указывает на военно-морской флот / большой вариант продукта. Нажмите там и посмотреть военно-морской флот / большой вариант выбран.