Adicione uma seção de imagem clicável e personalizável

 <estilo> _
 . clicávelImageContainer {
 posição : relativa ;
 largura : 100 %;
 }
 . clicávelImageContainer {
 posição : relativa ; 
largura : 100 %;
 }
 . clickableImageContainer a {
 exibição : flexível ;
 }
 . herói {
 ajuste ao objeto : capa ;
 }
 . imagem - esquerda {
 justificar - conteúdo : flex - start ;
 } 
. imagem - centro {
 justificar - conteúdo : centro ;
 }
 . imagem - direita {
 justificar - conteúdo : flex - end ;
 }
 </ estilo > 
< div class = "clickableImageContainer" style = "background: {{ section.settings.background }} " >
 < um
 href = " {% if section.settings.image_link != blank %} {{ section.settings.image_link }} {% endif %} "
 class = "imagem- {{ section.settings.image_position }} " 
{ % se seção. configurações . link_aberto == verdadeiro % }
 alvo = "_blank"
 { % fim se % }
 > 
{ %- atribuir img_url = seção. configurações . imagem | img_url : 'mestre' -% }
 < imagem
 classe = "herói"
 estilo = "
 largura:
 {% case section.settings.image_size %}
 {% when 'x-small' %}
 25%
 {% when 'small' %}
 50%
 {% when 'medium' %}
 70% 
{% when 'large' %}
 100%
 {% endcase %}
 "
 src = " {{ img_url }} "
 largura = " {{ image_url.width }} "
 altura = " {{ image_url.height }} "
 >
 </a> _
 </div> _ _
 { % esquema % }
 { 
"name" : "Imagem clicável" ,
 "configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "imagem" ,
 "rótulo" : "Imagem"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "tamanho_da_imagem" ,
 "rótulo" : "tamanho da imagem" ,
 "padrão" : "médio" ,
 "info" : "A altura será ajustada dependendo da proporção da imagem" , 
"opções" : [
 {
 "label" : "Extra Pequeno" ,
 "valor" : "x-pequeno"
 } ,
 {
 "rótulo" : "Pequeno" ,
 "valor" : "pequeno"
 } , 
{
 "rótulo" : "Médio" ,
 "valor" : "médio"
 } ,
 {
 "rótulo" : "Grande" ,
 "valor" : "grande"
 }
 ]
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "posição_imagem" ,
 "rótulo" : "Posição" ,
 "padrão" : "centro" ,
 "opções" : [
 { 
"rótulo" : "centro" ,
 "valor" : "centro"
 } ,
 {
 "rótulo" : "esquerda" ,
 "valor" : "esquerda"
 } ,
 { 
"rótulo" : "certo" ,
 "valor" : "certo"
 }
 ]
 } ,
 {
 "tipo" : "url" ,
 "id" : "image_link" , 
"label" : "Link da imagem" ,
 "info" : "Coloque o link e certifique-se de clicar na seta depois"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "link_aberto" ,
 "label" : "Abra o link em um novo navegador" , 
"padrão" : verdadeiro
 } ,
 {
 "tipo" : "cor" ,
 "id" : "plano de fundo" ,
 "label" : "Cor de fundo" ,
 "default" : "#fff" , 
"info" : "Remova a cor de fundo para torná-lo transparente"
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Imagem clicável"
 }
 ]
 }
 { % termina o esquema % }