Pro coding help! Really need a bogo section like this

[leoking]

https://luckyfours.com/products/caspian
has this section I would like a exact replicate, the switch watch I’d prefer to be called switch item and to let the customers switch any product from that same collection only. Let me know if this is possible thank you.

My url: ee3dc1-3.myshopify.com

[Small_Task_Help]

Hi,

If you do not want to use app then custom coding will help

Custom code example (need to add to your theme) 

{% comment %} BOGO Offer Section {% endcomment %}
<div class="bogo-section">
  <h2>Buy One, Get One Free</h2>

  <div class="bogo-container">
    <!-- Main Product -->
    <div class="bogo-product">
      <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
      <p>{{ product.title }}</p>
      <p>Price: {{ product.price | money }}</p>
    </div>

    <!-- Switchable Free Item -->
    <div class="bogo-switch">
      <p>Switch Item:</p>
      <select id="bogo-free-item">
        {% for product in collections['your-collection-handle'].products %}
          <option value="{{ product.id }}">{{ product.title }}</option>
        {% endfor %}
      </select>
    </div>

    <!-- Add to Cart Button -->
    <button id="add-bogo-to-cart">Add to Cart</button>
  </div>
</div>

<style>
  .bogo-section { text-align: center; padding: 20px; background: #f9f9f9; }
  .bogo-container { display: flex; justify-content: center; gap: 20px; }
  .bogo-product, .bogo-switch { border: 1px solid #ccc; padding: 10px; }
  select { padding: 5px; }
</style>

<script>
  document.getElementById("add-bogo-to-cart").addEventListener("click", function() {
    let mainProduct = {{ product.id }};
    let freeProduct = document.getElementById("bogo-free-item").value;
    
    fetch('/cart/add.js', {
      method: 'POST',
      body: JSON.stringify({ items: [{id: mainProduct, quantity: 1}, {id: freeProduct, quantity: 1}] }),
      headers: { 'Content-Type': 'application/json' }
    }).then(response => response.json()).then(data => { 
      window.location.href = '/cart'; 
    });
  });
</script>

After this Add Section to Your Product Page

[leoking]

Hi the code isn’t working and the functions also anyway to make it a clean layout like the original?