Shopifyテーマ（Dawn）に追従固定フッター・バナーを追加する

<!-- Sticky Footer -->
<a href="https://yoursite.com/account/register" class="sticky-footer-link">
<div class="sticky-footer">
    <img src="{{ 'banner_2x.png' | asset_img_url: '1000x160'}}" alt="Footer Banner" style="width: 100%; height: 80px;">
</div>
</a>
<!-- END Sticky Footer -->

...
    {% section 'footer' %}

    <!-- Sticky Footer -->
    {% render 'sticky-footer' %}
    <!-- END Sticky Footer -->
...

<!-- Sticky Footer -->
<a href="https://yoursite.com/account/register" class="sticky-footer-link">
<div class="sticky-footer">
    <img src="{{ 'banner_2x.png' | asset_img_url: '1000x160'}}" alt="Footer Banner" style="width: 100%; height: 80px;">
</div>
</a>
<!-- END Sticky Footer -->

{% style %}
.sticky-footer-link {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherits text color from parent elements */
    display: block; /* Make sure it's always block to maintain layout */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0; /* Start with the banner hidden */
    transition: opacity 0.5s ease-out, bottom 0.5s ease-out; /* Smooth transition for opacity and sliding up */
    z-index: 1000;
}

.sticky-footer {
    background-color: #2f2f2f;
    text-align: center;
    overflow: visible;
    height: 80px; /* Adjust this height to fit the image */
}

.sticky-footer img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.sticky-footer-link:hover .sticky-footer {
    transform: scale(1.05); /* Slightly enlarge the footer on hover */
    filter: brightness(120%); /* Increase brightness by 20% on hover */
    transition: transform 0.3s ease, filter 0.3s ease; /* Ensure smooth transition for hover effects */
}
{% endstyle %}

...
{% endstyle %}


<!-- Detect if the page has been scrolled by the scroll start flag -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  let hasScrolled = false; // Flag to check if user has scrolled
  let footerLink = document.querySelector('.sticky-footer-link');

  document.addEventListener('scroll', function() {
      if (window.pageYOffset > 0) {
          hasScrolled = true; // Set flag to true when user scrolls
      }
      if (hasScrolled) {
          footerLink.style.opacity = '1'; // Keep the banner visible once scrolling has started
      } else {
          footerLink.style.opacity = '0'; // Initially hidden
      }
  });
});
</script>

<!-- Detect if the page has been scrolled by the scroll position -->
<script>
document.addEventListener('scroll', function() {
  const footerLink = document.querySelector('.sticky-footer-link');
  if (window.pageYOffset > 0) { // Check if the page has been scrolled
      footerLink.style.opacity = '1'; // Make the banner fully visible
  } else {
      footerLink.style.opacity = '0'; // Hide it again when scrolled back to top
  }
});
</script>

<!-- Apply only for non-logged in users -->
{% if customer == nil %}

...

% endif %}

<!-- Apply only for non-logged in users, and not on the login nor register pages -->
{% if customer == nil and template.name != 'login' and template.name != 'register' %}

...

{% endif %}

{% if template.suffix != 'email-register' %}

   <!-- Debugging to see the template name -->
   Current template: {{ template.name }}

Current suffix: {{ template.suffix }}

<!-- Apply only for non-logged in users, and not on the login nor register pages -->
{% if customer == nil and template.name != 'login' and template.name != 'register' %}


<!-- Sticky Footer -->
<a href="https://yoursite.com/account/register" class="sticky-footer-link">
<div class="sticky-footer">
    <img src="{{ 'banner_2x.png' | asset_img_url: '1000x160'}}" alt="Footer Banner" style="width: 100%; height: 80px;">
</div>
</a>
<!-- END Sticky Footer -->

{% style %}
.sticky-footer-link {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherits text color from parent elements */
    display: block; /* Make sure it's always block to maintain layout */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0; /* Start with the banner hidden */
    transition: opacity 0.5s ease-out, bottom 0.5s ease-out; /* Smooth transition for opacity and sliding up */
    z-index: 1000;
}

.sticky-footer {
    background-color: #2f2f2f;
    text-align: center;
    overflow: visible;
    height: 80px; /* Adjust this height to fit the image */
}

.sticky-footer img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.sticky-footer-link:hover .sticky-footer {
    transform: scale(1.05); /* Slightly enlarge the footer on hover */
    filter: brightness(120%); /* Increase brightness by 20% on hover */
    transition: transform 0.3s ease, filter 0.3s ease; /* Ensure smooth transition for hover effects */
}
{% endstyle %}


<!-- Detect if the page has been scrolled by the scroll start flag -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  let hasScrolled = false; // Flag to check if user has scrolled
  let footerLink = document.querySelector('.sticky-footer-link');

  document.addEventListener('scroll', function() {
      if (window.pageYOffset > 0) {
          hasScrolled = true; // Set flag to true when user scrolls
      }
      if (hasScrolled) {
          footerLink.style.opacity = '1'; // Keep the banner visible once scrolling has started
      } else {
          footerLink.style.opacity = '0'; // Initially hidden
      }
  });
});
</script>

{% endif %}

...
    {% section 'footer' %}

    <!-- Sticky Footer -->
    {% render 'sticky-footer' %}
    <!-- END Sticky Footer -->
...