Percebemos que a página de produtos tem um duplo carregamento de estilo, o que possivelmente denota que há uma configuração feita no CSS e outra via JS.
pois o layout da página inicia com um padrão de estilo, com o botão e outros elementos redimencionados após o carregamento completo.
Como geralmente o JS fica ao final da página ao chegar nele ocorre outra estilização.
Aproveitando o momento, solicito que o botão de compra fique visível abaixo do produto na home.
Bom dia @anon32448718,
Na verdade não há sobreposição de estilos, mas o componente pré-compilado é diferente (mais simples, com foco em SEO e performance) do que o posteriormente renderizado com JS (mais completo, adicionando efeitos e componentes secundários).
Os componentes usam os mesmos nomes de classes, e portanto a mesma cascata de estilos, durante a renderização o JS também adiciona CSS conforme a necessidade, mas o CSS anterior continua sendo válido, inclusive CSS (ou SCSS) customizado adicionado diretamente no GitHub ou no CMS, dependendo é claro dos seletores utilizados.
Obs.: na v1 do Storefront os nomes de componente divergiam realmente, até então eram folhas de estilo diferentes, isto foi alterado na versão atual.
Sobre o botão comprar sempre visível nos cards de produto, basta adicionar o seguinte trecho de CSS:
.product-card__buy.fade {
opacity: 1;
}
.product-card--small .product-card__buy {
position: static;
display: block;
}
@anon32448718 onde colocou e qual foi o erro? No repositório não mostrou nenhuma inserção com erro, foi uma tentativa remota de editar? O seu usuário do Github não estava com acesso ao repositório, acabei de inserir. Provavelmente recebeu algum email
@Matheus foi isso mesmo, recebi um email. Acho que não tinha autorização para editar o arquivo no Git.
Basta ativar esse email que passa a valer.