Pro coding help! Really need a bogo section like this

Topic summary

A user seeks to replicate a specific “Buy One, Get One” (BOGO) product section from another Shopify store (luckyfours.com). The desired functionality includes:

Key Requirements:

  • A section similar to the reference image showing a BOGO offer
  • Ability to switch between products from the same collection (labeled “Switch Item” instead of “Switch Watch”)
  • Clean layout matching the original design

Current Status:

  • Another user provided custom HTML/Liquid code as a no-app solution
  • The code includes basic structure for BOGO display and product switching functionality
  • Issue reported: The provided code is not working properly and doesn’t match the clean layout of the reference site

Unresolved:
The discussion remains open with the implementation unsuccessful. The code needs debugging and styling improvements to achieve the desired appearance and functionality.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

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

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 %}

  ## Buy One, Get One Free

  
    
    

      
      

{{ product.title }}

      

Price: {{ product.price | money }}

    

    
    
      

Switch Item:

      
    

    
    
  

After this Add Section to Your Product Page

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