Shopify Before After Comparison – Interactive Transformation Grid

                    {% comment %}
  Section: Before/After Comparison
  - Responsive grid layout showing transformation results
  - Animated toggle between before/after images
  - Custom styling matching the reference image
{% endcomment %}

<section class="transformation-results" style="background-color: {{ section.settings.background_color }}; padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;">
  <div class="page-width">
    {% if section.settings.heading != blank %}
      <h2 class="transformation-results__heading">{{ section.settings.heading }}</h2>
    {% endif %}
    
    <div class="transformation-results__grid">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'comparison_card' %}
            <div class="comparison-card" {{ block.shopify_attributes }}>
              <div class="comparison-card__container">
                <div class="comparison-card__image-wrapper">
                  <div class="comparison-card__image-slider" data-position="before">
                    <div class="comparison-card__before">
                      {% if block.settings.before_image != blank %}
                        {{ block.settings.before_image | image_url: width: 600 | image_tag: loading: 'lazy', class: 'comparison-card__image' }}
                      {% else %}
                        {{ 'lifestyle-1' | placeholder_svg_tag: 'comparison-card__image placeholder' }}
                      {% endif %}
                    </div>
                    <div class="comparison-card__after">
                      {% if block.settings.after_image != blank %}
                        {{ block.settings.after_image | image_url: width: 600 | image_tag: loading: 'lazy', class: 'comparison-card__image' }}
                      {% else %}
                        {{ 'lifestyle-2' | placeholder_svg_tag: 'comparison-card__image placeholder' }}
                      {% endif %}
                    </div>
                  </div>
                  
                  <div class="comparison-card__content">
                    {% if block.settings.duration != blank %}
                      <div class="comparison-card__duration">{{ block.settings.duration }}</div>
                    {% endif %}
                    
                    {% if block.settings.title != blank %}
                      <h3 class="comparison-card__title">{{ block.settings.title }}</h3>
                    {% endif %}
                  </div>
                  
                  <div class="comparison-card__toggle-container">
                    <div class="comparison-card__toggle">
                      <button class="comparison-toggle-btn comparison-toggle-before active" data-toggle="before">Before</button>
                      <button class="comparison-toggle-btn comparison-toggle-after" data-toggle="after">After</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        {% endcase %}
      {% endfor %}
    </div>
  </div>
</section>

<style>
  .transformation-results__heading {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: 500;
  }
  
  .transformation-results__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .comparison-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f5f5f5;
  }
  
  .comparison-card__container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .comparison-card__image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 150%; /* 2:3 aspect ratio */
    overflow: hidden;
    border-radius: 10px;
  }
  
  .comparison-card__image-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease;
  }
  
  .comparison-card__before,
  .comparison-card__after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  .comparison-card__image-slider[data-position="before"] .comparison-card__before,
  .comparison-card__image-slider[data-position="after"] .comparison-card__after {
    opacity: 1;
  }
  
  .comparison-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .comparison-card__content {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
  }
  
  .comparison-card__duration {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
  }
  
  .comparison-card__title {
    color: #ffffff;
    text-align: center;
    font-size: 22px;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  
  .comparison-card__toggle-container {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }
  
  .comparison-card__toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    overflow: hidden;
    padding: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  .comparison-toggle-btn {
    background: transparent;
    border: none;
    padding: 8px 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-radius: 25px;
    transition: all 0.3s ease;
    min-width: 100px;
  }
  
.comparison-toggle-before.active {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
  
  .comparison-toggle-after.active {
    background: #222222;
    color: #ffffff;
  }
  
  @media screen and (max-width: 989px) {
    .transformation-results__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media screen and (max-width: 749px) {
    .transformation-results__grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .comparison-card__title {
      font-size: 18px;
    }
    
    .comparison-toggle-btn {
      padding: 8px 20px;
      min-width: 90px;
    }
  }
  
  @media screen and (max-width: 480px) {
    .transformation-results__grid {
      grid-template-columns: 1fr;
    }
    
    .transformation-results__heading {
      font-size: 24px;
      margin-bottom: 30px;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const toggleButtons = document.querySelectorAll('.comparison-toggle-btn');
    
    toggleButtons.forEach(button => {
      button.addEventListener('click', function() {
        const toggleType = this.getAttribute('data-toggle');
        const card = this.closest('.comparison-card');
        const slider = card.querySelector('.comparison-card__image-slider');
        
        // Update active button
        card.querySelectorAll('.comparison-toggle-btn').forEach(btn => {
          btn.classList.remove('active');
        });
        this.classList.add('active');
        
        // Animate image change
        slider.style.opacity = '0.8';
        setTimeout(() => {
          slider.setAttribute('data-position', toggleType);
          slider.style.opacity = '1';
        }, 300);
      });
    });
  });
</script>

{% schema %}
{
  "name": "Before After Comparison",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Real transformation results",
      "label": "Heading"
    },
    {
      "type": "color",
      "id": "background_color",
      "default": "#f8f6f3",
      "label": "Background Color"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 40
    }
  ],
  "blocks": [
    {
      "type": "comparison_card",
      "name": "Before/After Card",
      "limit": 8,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "default": "Lorem ipsum treatment",
          "label": "Title"
        },
        {
          "type": "text",
          "id": "duration",
          "default": "4 weeks",
          "label": "Duration"
        },
        {
          "type": "image_picker",
          "id": "before_image",
          "label": "Before Image"
        },
        {
          "type": "image_picker",
          "id": "after_image",
          "label": "After Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Before After Comparison",
      "blocks": [
        {
          "type": "comparison_card",
          "settings": {
            "title": "Lorem ipsum dolor",
            "duration": "4 weeks"
          }
        },
        {
          "type": "comparison_card",
          "settings": {
            "title": "Sit amet consectetur",
            "duration": "6 weeks"
          }
        },
        {
          "type": "comparison_card",
          "settings": {
            "title": "Adipiscing elit",
            "duration": "2 weeks"
          }
        },
        {
          "type": "comparison_card",
          "settings": {
            "title": "Sed do eiusmod",
            "duration": "8 weeks"
          }
        }
      ]
    }
  ]
}
{% endschema %}