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

Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

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 
{ { 'colagem personalizada.css' | URL_do_asset | folha_de_estilo } }
 < div
 class = "customCollage" 
estilo = "
 linhas do modelo de grade:
 {% if section.settings.done_editing == true %}
 repetir(ajuste automático, 5vw);
 {% else %}
 repetir( {{section.settings.page_row}} , 5vw);
 {% endif %}
 "
 >
 { % para blocos na seção. blocos % }
 < div
 class = "colagemBlock"
 estilo = " 
coluna de grade: {{blocks.settings.col1}} / span {{blocks.settings.col2}} ;

 linha de grade: {{blocks.settings.row1}} / span {{blocks.settings.row2}} ;
 "
 >
 { % de blocos de casos . tipo % }
 { % quando 'collage_image' % } 
< div class = "collageImageWrapper" >
 < img class = "collageImage" src = " {{blocks.settings.collage_image | img_url: 'master' }} " >
 < / div >

 { % quando 'collage_video' % } 
< div class = "collageVideoWrapper" >
 < iframe class = "collageVideo" src = "//www.youtube.com/embed/ {{blocks.settings.collage_video.id}} " >< / iframe >
 < / div >
 
{ % quando 'collage_title' % }
 < h1 class = "collageTitle" > { { blocos. configurações . título_colagem } } < / h1 >

 { % quando 'collage_content' % } 
< div class = "textContent" > { { blocos. configurações . colagem_content } } < / div >

 { % quando 'collage_product' % } 
{ % atribuir produto = todos_produtos [ blocos. configurações . produto_colagem ] % }
 { % atribuir imagem_produto = produto. selecionado_ou_primeira_variável_disponível % }

 < div class = "collageProductWrapper" > 
< div class = "collageProduct" >
 < img src = " {{ product_image | img_url: " master " }} " >

 < span > { { produto. título } } < / span >
 
< span > { { produto. preço | dinheiro } } < / span >
 < / div >
 < / div >
 { % final % } 
< / div >
 { % fim para % }
 < / div >

 { % esquema % }
 {
 "name" : "Colagem personalizada" ,
 "configurações" : [
 { 
"tipo" : "intervalo" ,
 "id" : "página_row" ,
 "label" : "Altura da página" ,
 "máximo" : 100 ,
 "min" : 5 ,
 "passo 1 ,
 "padrão" : 12
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "done_editing" ,
 "label" : "Clique quando terminar a edição" ,
 "padrão" : falso
 }
 ] ,
 "blocos" : [
 {
 "nome" : "imagem de colagem" , 
"type" : "collage_image" ,
 "configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "imagem_colagem" ,
 "label" : "Imagem de colagem"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "col1" , 
"label" : "Posição esquerda e direita" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "col2" , 
"label" : "Número de colunas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "linha1" , 
"label" : "Posicionar para cima e para baixo" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "linha2" , 
"label" : "Número de linhas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 }
 ]
 } ,
 {
 "nome" : "vídeo de colagem" , 
"type" : "collage_video" ,
 "configurações" : [
 {
 "tipo" : "video_url" ,
 "id" : "colagem_vídeo" ,
 "label" : "Vídeo de colagem" ,
 "aceitar" : [
 "YouTube"
 ]
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col1" ,
 "label" : "Posição esquerda e direita" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col2" ,
 "label" : "Número de colunas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "linha1" ,
 "label" : "Posicionar para cima e para baixo" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 }
 ]
 } , 
{
 "nome" : "título da colagem" ,
 "tipo" : "título_colagem" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "collage_title" ,
 "label" : "Título da colagem"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col1" ,
 "label" : "Posição esquerda e direita" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col2" ,
 "label" : "Número de colunas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "linha1" ,
 "label" : "Posicionar para cima e para baixo" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "linha2" ,
 "label" : "Número de linhas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 }
 ]
 } , 
{
 "nome" : "conteúdo da colagem" ,
 "tipo" : "collage_content" ,
 "configurações" : [
 {
 "type" : "richtext" ,
 "id" : "collage_content" ,
 "label" : "Conteúdo da colagem"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col1" ,
 "label" : "Posição esquerda e direita" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col2" ,
 "label" : "Número de colunas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "linha1" ,
 "label" : "Posicionar para cima e para baixo" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "linha2" ,
 "label" : "Número de linhas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 }
 ]
 } , 
{
 "nome" : "produto de colagem" ,
 "tipo" : "produto_colagem" ,
 "configurações" : [
 {
 "tipo" : "produto" ,
 "id" : "produto_colagem" ,
 "label" : "Produto de colagem"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col1" ,
 "label" : "Posição esquerda e direita" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "col2" ,
 "label" : "Número de colunas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "linha1" ,
 "label" : "Posicionar para cima e para baixo" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "linha2" ,
 "label" : "Número de linhas a ocupar" ,
 "máximo" : 50 ,
 "min" : 1 ,
 "passo 1 ,
 "padrão" : 1
 }
 ]
 } 
] ,
 "predefinições" : [
 {
 "name" : "Colagem personalizada"
 }
 ]
 }
 { % termina o esquema % }

  1. Vá para a pasta Ativos e crie um novo arquivo .css. Nomeie-o como custom.collage. Em seguida, cole o código abaixo. 
. colagem personalizada {
 largura : 100 % ; 
altura : 100 % ;
 exibição : grade ;
 lacuna : 15px ;
 preenchimento : 30px ;
 grid - template - colunas : repita ( 12 , 1fr ) ;
 }
 . colagemBlock {
 largura : 100 % ; 
altura : 100 % ;
 }
 . colagemImageWrapper {
 largura : 100 % ;
 altura : 100 % ;
 }
 . colagemImagem {
 largura : 100 % ; 
altura : 100 % ;
 ajuste ao objeto : capa ;
 }
 . colagemVideoWrapper {
 largura : 100 % ;
 altura : automático ;
 preenchimento inferior : 60 % ;
 posição : relativa ; 
}
 . colagemVídeo {
 largura : 100 % ;
 altura : 100 % ;
 posição : absoluta ;
 }
 . colagemTítulo {
 tamanho da fonte : braçadeira ( 15px, 4vw, 40px ) ;
 }
 . textoConteúdo { 
largura : 100 % ;
 altura : 100 % ;
 estouro : oculto ;
 tamanho da fonte : braçadeira ( 10px, 2vw, 40px ) ;
 }
 p {
 altura da linha : 1em ;
 } 
@media screen e ( largura mínima : 24,15em ) {
 /* 21em "gate" * tamanho da fonte 1,15 */
 p { 
altura da linha : calc ( 1,3em + ( 1,5 - 1,3 ) * ( ( 100vw - 21em ) / ( 35 - 21 ) )) ) ;
 }
 } 
@media ( largura mínima : 40,25em ) {
 /* 35em "gate" * tamanho da fonte 1,15 */
 p {
 altura da linha : 1,5em ;
 }
 }
 /* tela @media only e (largura máxima: 1050px){
 .textContent{
 altura da linha: 1;
 }
 }
 */
 Tela @media somente e ( largura máxima : 300px ) { 
. colagem personalizada {
 exibição : flexível ;
 flex - direction : coluna ;
 justificar - conteúdo : centro ;
 }
 . bloco personalizado {
 exibição : flexível ;
 }
 . colagemTítulo {
 exibição : flexível ;
 justificar - conteúdo : centro ; 
margem : 0 automático ;
 }
 }

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.

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