Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

Crie uma colagem com blocos reposicionáveis ​​ou dinâmicos na página do Shopify

Log in or Sign up to ensure access to FREE code across multiple devices.

Helpful Free links

Migrating to Shopify Transferring Domain to Shopify Master sections and blocks Free Essential tools Custom App Creation Shopify theme templates Add custom CSS to themes Master product variants in Shopify Free Shopify Themes How to customize Shopify themes Automate your store processes Improve store's search Free apps to enhance your store Upload and manage files Facebook ads for your Shopify Shopify Support Stay updated with Shopify changes Join Shopify Community for free help

Neste tutorial, vamos adicionar uma seção de colagem onde você pode reposicionar os blocos na página do Shopify usando o layout de grade.

Espero que o Shopify utilize a grade para posicionar os blocos facilmente.

  1. Vá para Loja online> Temas> Ações> Editar código
  2. Vá para a pasta Seção, crie uma nova seção e nomeie-a como colagem personalizada. Substitua o código abaixo e clique em SALVAR

  1. Vá para a pasta Ativos e crie um novo arquivo .css. Nomeie-o como custom.collage. Em seguida, cole o código abaixo.

Você terminou. (“,)

Encontrei alguns problemas depois de criar o vídeo. Eu adicionei alguns códigos para consertar isso.

Dicas: Use a altura mínima de página possível para evitar grandes lacunas na parte inferior.

Certifique-se de atribuir o número de células (colunas ou linhas) que cabem no título ou conteúdo.

Certifique-se de não ter espaço no editor da caixa de conteúdo. Para evitar lacunas desnecessárias.

Copied!

Lutando com instruções?

Não se preocupe, nós oferecemos cobertura por um preço razoável. Entre em contato conosco através de "Converse conosco" para obter um orçamento.

Relaxe enquanto nós cuidamos disso para você!

Voltar para o blogue

4 comentários

I tried inserting this code into my Dawn theme, and Shopify rejected it citing “Invalid JSON in tag ‘schema’”.

I tried to self-serve a quick fix by running it through a JSON formatter (https://jsonformatter.curiousconcept.com/#), and the result was unintelligible.

Has something changed in the past year to make this trick unusable? Is there a newer version? I really like this concept, and I’d love to be able to implement it on my site…

Mike

Very Great Section for Front Page Design, could it applied on page also?

Jackie

Hi Dylan,
Since image are assigned to the grid area, you can manipulate its size to by occupying less or more grid areas. What I am talking about is the 13:30 part of the video. Regarding at mobile view, I cannot recreate your problem. Items should be displaying flex in mobile view as what we design in the last part of our css code

Anonymous

Hi There,

Tried installing this onto the dawn theme, and when i upload any image, they are just way too big.
And when you switch to mobile view, it only shows 1/8 of the photo..

Any solutions to fix this?

Thanks

Dylan

Deixe um comentário