[Shopify] Barra de progresso interativa que atualiza a mensagem e o progresso conforme o cliente adiciona itens ao carrinho de compras

O objetivo é criar uma barra de progresso interativa que atualiza a mensagem e o progresso conforme o cliente adiciona itens ao carrinho de compras. Esse recurso é implementado diretamente no minicart de uma loja virtual construída no Shopify, utilizando o tema Kalles.

Funcionalidade Esperada:
Barra de Progresso:

A barra de progresso é visualmente representada e vai aumentar conforme o número de camisas (ou outros itens) que o usuário adiciona ao carrinho.
A barra deve ser ajustada para um máximo de 100%, representando o cumprimento completo dos critérios de descontos.
Mensagens Condicionais:

Conforme o cliente adiciona mais camisas ao carrinho, a mensagem da barra de progresso deve mudar dinamicamente:
Primeira Etapa: "Adicione mais 2 camisas ao carrinho para obter 10EUR de desconto".
Segunda Etapa: "Adicione mais 2 camisas e obtenha 22EUR de desconto".
Terceira Etapa: Quando o cliente atinge a quantidade máxima de camisas (4 ou mais), a mensagem muda para: "Você está aproveitando todos os benefícios!"
Integração com Shopify e Tema Kalles:

O código precisa ser adaptado para o ambiente do Shopify e o tema Kalles.
O código irá utilizar o Shopify Ajax API para pegar a quantidade de itens no carrinho em tempo real (via /cart.js), e assim alterar a barra de progresso conforme o número de itens no carrinho.
Responsividade:

O código precisa funcionar bem em diferentes dispositivos, incluindo desktop, tablet e celular.
Ajustes de CSS devem ser feitos para garantir que a barra de progresso e as mensagens se ajustem corretamente em telas menores (como dispositivos móveis).
Tecnologias e Ferramentas Utilizadas:
html e css:

html é usado para estruturar a barra de progresso e o texto.
CSS é utilizado para estilizar a barra de progresso, incluindo sua animação e responsividade.
JavaScript (com Shopify Ajax API):

O JavaScript será utilizado para capturar as interações do carrinho, verificar a quantidade de itens e atualizar a barra de progresso e as mensagens dinamicamente.
O código utiliza a API Ajax do Shopify (/cart.js) para obter a quantidade de itens no carrinho e atualizar a interface sem precisar recarregar a página.
Integração no Minicart do Tema Kalles:

O freelancer precisará garantir que o código seja integrado corretamente no minicart do tema Kalles (ou qualquer outra parte do tema que exiba o carrinho de compras).
O minicart é a área onde o usuário visualiza rapidamente o que está em seu carrinho sem precisar acessar a página do carrinho. A barra de progresso e as mensagens devem ser exibidas dentro desse minicart.