То, что вы пытаетесь достичь, невозможно только с помощью жидкости. Liquid это просто язык шаблонов, который отображается на стороне сервера. Он не обновляется на стороне клиента.
Вы хотите отобразить цену в кнопке только для выбранного варианта, но Liquid не имеет информации об этом на стороне сервера, и вы просто l oop просматриваете цены всех доступные варианты. Следовательно, вы видите все цены в своей кнопке.
Чтобы исправить это, используйте первую доступную или выбранную альтернативную цену, используя Liquid, и обновите остаток, используя JavaScript на стороне клиента.
Возвращает объект варианта выбранного в данный момент варианта, если в URL имеется действительный параметр запроса? Если выбранного варианта нет, возвращается первый доступный вариант.
При этом ваш код будет выглядеть как
<button type="submit" name="add" class="border--none">
<span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
add to bag |
<strong>
{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
</strong>
</span>
</button>
Затем измените цену с помощью JavaScript при изменении варианта , это зависит от вашей темы.
Дополнительная информация о Выбранный или первый доступный вариант