Debut Theme - Image with Text Overlay - Changing button to clickable image

Solved
Shopify Partner
12385 1505 4470

@iamcurious 

Thanks for post 

can you please add me staff account easy add code then i will guide how to mange same as other 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
17 0 9

Thanks Ketan - I've done so. Let me know if you have been added!

Shopify Partner
12385 1505 4470

@iamcurious 

Thanks for if 
i have done, please check 

KetanKumar_0-1607150198771.png

 

also, someone uses the debut theme please use this code replace the hero section to the below code

<div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
     {% if section.settings.image %}
     data-bgset="{% include 'bgset', image: section.settings.image %}"
     data-sizes="auto"
     data-parent-fit="cover"
     style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});"
     {% endif %}>
  {% if section.settings.image == blank %}
    <div class="placeholder-background">
      {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {% endif %}
  <a href="{{ section.settings.img_link }}">
  <div class="hero__inner">
    <div class="page-width text-center">
      {% if section.settings.title != blank %}
        <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        <a href="{{ section.settings.button_link }}" class="btn hero__btn">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>
  </div>
  </a>
</div>

<noscript>
  <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
</noscript>



{% schema %}
{
  "name": {
    "de": "Foto mit überlegtem Text",
    "en": "Image with text overlay",
    "es": "Imagen con texto",
    "fr": "Image avec texte",
    "it": "Immagine con testo",
    "ja": "テキストオーバーレイ付き画像",
    "pt-BR": "Imagem com texto"
  },
  "class": "index-section index-section--flush",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": {
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fr": "Image",
        "it": "Immagine",
        "ja": "画像",
        "pt-BR": "Imagem"
      }
    },
	{
      "type": "url",
      "id": "img_link",
      "label": "Image Link"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": {
        "de": "Fotoausrichtung",
        "en": "Image alignment",
        "es": "Alineación de imagen",
        "fr": "Alignement de l'image",
        "it": "Allineamento immagine",
        "ja": "画像アラインメント",
        "pt-BR": "Alinhamento da imagem"
      },
      "default": "center",
      "options": [
        {
          "value": "top",
          "label": {
            "de": "Oben",
            "en": "Top",
            "es": "Superior",
            "fr": "Haut",
            "it": "In alto",
            "ja": "上",
            "pt-BR": "Acima"
          }
        },
        {
          "value": "center",
          "label": {
            "de": "Mitte",
            "en": "Middle",
            "es": "Al medio",
            "fr": "Milieu",
            "it": "Al centro",
            "ja": "中央",
            "pt-BR": "Meio"
          }
        },
        {
          "value": "bottom",
          "label": {
            "de": "Unten",
            "en": "Bottom",
            "es": "Inferior",
            "fr": "Bas",
            "it": "In basso",
            "ja": "下",
            "pt-BR": "Abaixo"
          }
        }
      ]
    },
    {
      "type": "text",
      "id": "title",
      "label": {
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fr": "En-tête",
        "it": "Heading",
        "ja": "見出し",
        "pt-BR": "Título"
      },
      "default": {
        "de": "Foto mit überlegtem Text",
        "en": "Image with text overlay",
        "es": "Imagen con texto",
        "fr": "Image avec superposition de texte",
        "it": "Immagine con testo",
        "ja": "テキストオーバーレイ付き画像",
        "pt-BR": "Imagem com sobreposição de texto"
      }
    },
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fr": "Texte",
        "it": "Testo",
        "ja": "テキスト",
        "pt-BR": "Texto"
      },
      "default": {
        "de": "<p>Nutzen Sie überlegten Text, um Kunden über Ihre Marke zu informieren. Wählen Sie Fotos und Text aus, die zu Ihrer Marke passen.</p>",
        "en": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>",
        "es": "<p>Usa el texto superpuesto para darles información a tus clientes sobre tu marca. Selecciona imágenes y textos que se relacionen con tu estilo e historia.</p>",
        "fr": "<p>Utilisez la superposition de texte pour donner un aperçu de votre marque à vos clients. Utilisez une image et du texte qui se rapportent au style et à l'histoire de votre marque.</p>",
        "it": "<p>Utilizza il testo in sovrapposizione per dare ai clienti informazioni sul tuo brand. Seleziona immagini e testo legati al tuo stile e alla tua storia.</p>",
        "ja": "<p>オーバーレイテキストを使用して、お客様があなたのブランドについてよく理解できるようにします。あなたのスタイルやストーリーに関連する画像やテキストを選択してください。</p>",
        "pt-BR": "<p>Use o texto de sobreposição para apresentar informações sobre sua marca aos clientes. Selecione imagens e textos que reflitam seu estilo e sua história.</p>"
      }
    },
    {
      "type": "select",
      "id": "hero_size",
      "label": {
        "de": "Bereichs-Höhe",
        "en": "Section height",
        "es": "Altura de la sección",
        "fr": "Hauteur de la section",
        "it": "Altezza sezione",
        "ja": "セクションの高さ",
        "pt-BR": "Altura da seção"
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "de": "Extra klein",
            "en": "Extra Small",
            "es": "Extra pequeña",
            "fr": "Très petite",
            "it": "Molto piccola",
            "ja": "極小",
            "pt-BR": "Extra pequeno"
          },
          "value": "x-small"
        },
        {
          "label": {
            "de": "Klein",
            "en": "Small",
            "es": "Pequeña",
            "fr": "Petite",
            "it": "Small",
            "ja": "小",
            "pt-BR": "Pequeno"
          },
          "value": "small"
        },
        {
          "label": {
            "de": "Mitte",
            "en": "Medium",
            "es": "Mediana",
            "fr": "Moyenne",
            "it": "Medium",
            "ja": "中",
            "pt-BR": "Médio"
          },
          "value": "medium"
        },
        {
          "label": {
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fr": "Grande",
            "it": "Large",
            "ja": "大",
            "pt-BR": "Grande"
          },
          "value": "large"
        },
        {
          "label": {
            "de": "Extra groß",
            "en": "Extra Large",
            "es": "Extra grande",
            "fr": "Très grande",
            "it": "Molto grande",
            "ja": "特大",
            "pt-BR": "Extra grande"
          },
          "value": "x-large"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_size",
      "label": {
        "de": "Textgröße",
        "en": "Text size",
        "es": "Tamaño del texto",
        "fr": "Taille du texte",
        "it": "Dimensione testo",
        "ja": "文字サイズ",
        "pt-BR": "Tamanho do texto"
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "de": "Mitte",
            "en": "Medium",
            "es": "Mediano",
            "fr": "Moyenne",
            "it": "Medium",
            "ja": "中",
            "pt-BR": "Médio"
          },
          "value": "medium"
        },
        {
          "label": {
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fr": "Grande",
            "it": "Large",
            "ja": "大",
            "pt-BR": "Grande"
          },
          "value": "large"
        }
      ]
    },
    {
      "type": "text",
      "id": "button_label",
      "label": {
        "de": "Button-Etikett",
        "en": "Button label",
        "es": "Etiqueta de botón",
        "fr": "Texte du bouton",
        "it": "Etichetta pulsante",
        "ja": "ボタンラベル",
        "pt-BR": "Etiqueta do botão"
      }
    },
    {
      "type": "url",
      "id": "button_link",
      "label": {
        "de": "Button-Etikett",
        "en": "Button link",
        "es": "Enlace de botón",
        "fr": "Lien du bouton",
        "it": "Link pulsante",
        "ja": "ボタンリンク",
        "pt-BR": "Link do botão"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "de": "Foto mit überlegtem Text",
        "en": "Image with text overlay",
        "es": "Imagen con texto",
        "fr": "Image avec superposition de texte",
        "it": "Immagine con testo",
        "ja": "テキストオーバーレイ付き画像",
        "pt-BR": "Imagem com sobreposição de texto"
      },
      "category": {
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fr": "Image",
        "it": "Immagine",
        "ja": "画像",
        "pt-BR": "Imagem"
      }
    }
  ]
}
{% endschema %}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
17 0 9

This worked! Thanks so much Ketan.

0 Likes
Excursionist
17 0 9

Hi Ketan, so sorry but can I check how to change the hero section height to medium instead of large (as it currently is)? Thank you!

Shopify Partner
12385 1505 4470

@iamcurious 

Thanks for it 

yes, please you can do on your theme setting.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Excursionist
17 0 9

I changed the Section Height to Medium but it didn't change. Wondering if it's something to do with the code that you put in?

0 Likes
Shopify Partner
12385 1505 4470

@iamcurious 

what's the issue you have facing?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Excursionist
17 0 9

I'm trying to change the hero image section height from large to medium, but it doesn't seem to work after the code was edited to make the hero image clickable.

0 Likes
Excursionist
17 0 9

Somehow the section height of my hero image is now fixed, I'm unable to change it to small / medium / large.

Any way to fix this? I tried adding this code at the bottom of my theme file but it doesn't seem to work for desktop (min width 1025px). Works ok for mobile (max width 767px).

@media screen and (max-width: 767px){
.shopify-section .hero--medium {
    height: 250px;
}
}
@media (min-width: 768px) and (max-width: 1024px){  
.shopify-section .hero--medium {
    height: 350px;
}
}  
@media (min-width: 1025px) and (max-width: 3000px){  
.shopify-section .hero--medium {
    max-height: 500px;
}
}

 

0 Likes