Shopify Subscribe and Save – Convenient & Cost-Effective Subscriptions

                    <!-- 
========================================
Section Name: Subscribe and Save
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays a subscription-based section with product details, promotional text, delivery schedules, and pricing.
- Includes an FAQ accordion for answering common customer queries.
- Highlights subscription benefits with customizable text and icons.
- Fully responsive design for seamless mobile and desktop compatibility.

Promotion: 
Increase customer loyalty with a "Subscribe and Save" section. Offer convenience, savings, and exclusive benefits to your Shopify customers. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="subscribe-save-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="subscribe-save-container page-width">
    <h2 class="section-title">{{ section.settings.section_title }}</h2>
    
    <div class="subscribe-save-grid">
      <!-- Left Column: Product Info & FAQs -->
      <div class="product-info-column">
        <h3 class="product-title">{{ section.settings.product_title }}</h3>
        <div class="product-description">{{ section.settings.product_description }}</div>
        <div class="product-promo">{{ section.settings.promo_text }}</div>
        <div class="product-note">{{ section.settings.note_text }}</div>
        
        <!-- FAQ Accordion -->
        <div class="faq-accordion">
          {% for block in section.blocks %}
            {% if block.type == 'faq_item' %}
              <div class="faq-item">
                <button class="faq-question">
                  {{ block.settings.question }}
                  <span class="icon"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="#0F0F0F"></path> </g></svg></span>
                </button>
                <div class="faq-answer">
                  <p>{{ block.settings.answer }}</p>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
      
      <!-- Right Column: Subscription Details -->
      <div class="subscription-details-column">
        <div class="subscription-box">
          <div class="delivery-info-wrapo">
          <div class="delivery-info">
            <h4>{{ section.settings.delivery_title }}</h4>
            <p>{{ section.settings.delivery_schedule }}</p>
          </div>
          
          <div class="price-tag">
            <span>{{ section.settings.price_text }}</span>
          </div>
          </div>
          <ul class="benefits-list">
            {% for block in section.blocks %}
              {% if block.type == 'benefit_item' %}
                <li>
                  <span class="checkmark">✓</span>
                  {{ block.settings.benefit_text }}
                </li>
              {% endif %}
            {% endfor %}
          </ul>
          
          <a href="{{ section.settings.button_link }}" class="subscribe-button">
            {{ section.settings.button_text }}
          </a>
        </div>
        
        <div class="guarantee-text">
          {{ section.settings.guarantee_text }}
        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const faqQuestions = document.querySelectorAll('.faq-question');
  
  faqQuestions.forEach(question => {
    question.addEventListener('click', function() {
      // Close all other open FAQs first
      const allAnswers = document.querySelectorAll('.faq-answer');
      const allQuestions = document.querySelectorAll('.faq-question');
      
      // Skip if clicking on already open item
      if (this.classList.contains('active')) {
        this.classList.remove('active');
        this.nextElementSibling.style.maxHeight = null;
        return;
      }
      
      // Close all answers
      allAnswers.forEach(answer => {
        answer.style.maxHeight = null;
      });
      
      // Remove active class from all questions
      allQuestions.forEach(q => {
        q.classList.remove('active');
      });
      
      // Open the clicked one
      this.classList.add('active');
      const answer = this.nextElementSibling;
      answer.style.maxHeight = answer.scrollHeight + 'px';
    });
  });
});

</script>

<style>
  .subscribe-save-section {
    width: 100%;
  }
  .delivery-info h4 {
    font-size: 18px;
    margin: 0;
}
  .delivery-info p {
    margin: 0;
}
  span.icon svg {
    width: 17px;
}
  .subscribe-save-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .delivery-info-wrapo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: bold;
}
  
  .subscribe-save-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #e0e0e0;
  }
  
  /* Left Column Styles */
  .product-info-column {
    padding: 30px;
  }
  
.product-title {
    font-size: 32px;
    letter-spacing: 0;
    max-width: 300px;
    margin: 0;
    line-height: 1.4;
    margin-bottom: 20px;
}
  
.product-description {
    margin-bottom: 15px;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.4;
}
.product-promo {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.4;
}
  
.product-note {
    font-style: italic;
    margin-bottom: 30px;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.4;
}
  
  /* FAQ Styles */
  .faq-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
  }
  
.faq-question {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 15px 0;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}
  .faq-answer p {
    letter-spacing: 0;
    line-height: 1.4;
}
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  /* Right Column Styles */
  .subscription-details-column {
    padding: 30px;
    background-color: #f9f9f9;
  }
  
  .subscription-box {
    margin-bottom: 20px;
  }
  
  .delivery-info {
    margin-bottom: 20px;
  }
  
  .price-tag {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50px;
    padding: 8px 15px;
  }
  
  .benefits-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
  }
  
.benefits-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.4;
}
  
  .checkmark {
    margin-right: 10px;
  }
  
.subscribe-button {
    display: block;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 8px  0;
    text-decoration: none;
    margin-bottom: 20px;
}
  
.guarantee-text {
    text-align: center;
    font-size: 12px;
}
  @media (max-width: 768px) {
    .subscribe-save-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

{% schema %}
{
  "name": "Subscribe and Save",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 60,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 60,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "Subscribe and Save"
    },
    {
      "type": "text",
      "id": "product_title",
      "label": "Product Title",
      "default": "Toothpaste Bits Fluoride-Free"
    },
    {
      "type": "textarea",
      "id": "product_description",
      "label": "Product Description",
      "default": "Our best-selling toothpaste alternative, made without harsh chemicals, plastics or fluoride."
    },
    {
      "type": "text",
      "id": "promo_text",
      "label": "Promotional Text",
      "default": "Free Welcome Kit for Plastic Free July only."
    },
    {
      "type": "text",
      "id": "note_text",
      "label": "Note Text",
      "default": "Auto-applies at checkout with every new Toothpaste Bits subscription. Limit 1 per order."
    },
    {
      "type": "text",
      "id": "delivery_title",
      "label": "Delivery Title",
      "default": "DELIVERED EVERY"
    },
    {
      "type": "text",
      "id": "delivery_schedule",
      "label": "Delivery Schedule",
      "default": "4 MONTHS"
    },
    {
      "type": "text",
      "id": "price_text",
      "label": "Price Text",
      "default": "$8/MONTH"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Subscribe"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "text",
      "id": "guarantee_text",
      "label": "Guarantee Text",
      "default": "Satisfaction Guaranteed • Free Shipping Over $32 • Secure Check Out"
    }
  ],
  "blocks": [
    {
      "type": "faq_item",
      "name": "FAQ Item",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question",
          "default": "How do Toothpaste Bits work?"
        },
        {
          "type": "textarea",
          "id": "answer",
          "label": "Answer",
          "default": "Simply bite down, wet your toothbrush, and brush as normal. Our bits foam up just like regular toothpaste."
        }
      ]
    },
    {
      "type": "benefit_item",
      "name": "Benefit Item",
      "settings": [
        {
          "type": "text",
          "id": "benefit_text",
          "label": "Benefit Text",
          "default": "Subscribe and Save"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Subscribe and Save",
      "category": "Custom Sections",
      "blocks": [
        {
          "type": "benefit_item",
          "settings": {
            "benefit_text": "Subscribe and Save"
          }
        },
        {
          "type": "benefit_item",
          "settings": {
            "benefit_text": "Ships Free"
          }
        },
        {
          "type": "benefit_item",
          "settings": {
            "benefit_text": "Pause or Cancel Anytime"
          }
        },
        {
          "type": "faq_item"
        },
        {
          "type": "faq_item"
        }
      ]
    }
  ]
}
{% endschema %}