shopifypartners

{
  "type": "color",
  "id": "announcement_bar_color",
  "label": "Background color",
  "default": "#000000"
},

shopifypartners

{
  "type": "text",
  "id": "text",
  "label": "Announcement text",
  "default": "Announce something here"
},
{
  "type": "url",
  "id": "link",
  "label": "Announcement link"

shopifypartners

{%- if section.settings.link == blank -%}
  <div class="announcement-bar">
{%- else -%}
  <a href="{{ section.settings.link }}" >
{%- endif -%}

  <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

{%- if section.settings.link == blank -%}
  </div>

shopifypartners

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": false
    },

shopifypartners

{%- if section.settings.show_announcement -%}
  {%- if section.settings.home_page_only == false or template.name == 'index' -%}
  
    <div class="announcement-bar">
      <p class="announcement-bar__message"></p>
	  </div>
    
  {%- endif -%}
{%- endif -%}

shopifypartners

.image-container {
  display: -ms-grid;
  display: grid;
  grid-gap: 30px;
  -ms-grid-columns: 200px 30px auto;
  grid-template-columns: 480px auto;
}

.image-details {
  position: relative;

shopifypartners

new Drift(document.querySelector('.image-zoom'), {
  paneContainer: document.querySelector('.image-details')
});

shopifypartners

<div class=”image-container”>
  <img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
  <div class="image-details"></div>
</div>

shopifypartners

import Drift from 'drift-zoom';

shopifypartners

"label": {
    "de": "Logo-Foto",
    "en": "Logo image",
    "es": "Logotipo",
    "fr": "Image du logo",
    "it": "Immagine del logo",
    "ja": "ロゴ画像",
    "pt-BR": "Imagem do logotipo"
}