Checkout page order Summary

Ask the community
2

Hey @MD_SHAHIN_KABIR :waving_hand:

Yes, this is possible :+1:
Right now your issue is: all free products are always showing.
We need to show them based on selected product only.

:light_bulb: Simple Idea

Think like this:

  • Product A → no free item

  • Product B → show 1 free item

  • Product C → show multiple free items

So we control it using JS + selected product

:white_check_mark: Easy Example (How to do it)

Each product has a radio button.
We listen when user selects a product.
Then we show/hide free items.

<script>
document.addEventListener("DOMContentLoaded", function () {

  const radios = document.querySelectorAll('.product-list input[type="radio"]');

  radios.forEach((radio, index) => {
    radio.addEventListener("change", function () {

      // hide all free products first
      document.querySelectorAll('.free-item').forEach(el => {
        el.style.display = "none";
      });

      // Example logic
      if (index === 0) {
        // Product 1 → no free product
      }

      if (index === 1) {
        // Product 2 → show 1 free item
        document.querySelector('.free-item-1').style.display = "block";
      }

      if (index === 2) {
        // Product 3 → show multiple free items
        document.querySelector('.free-item-2').style.display = "block";
        document.querySelector('.free-item-3').style.display = "block";
      }

    });
  });

});
</script>

:puzzle_piece: What you need to do

  1. Add class to free products:
free-item free-item-1
free-item free-item-2
free-item free-item-3
  1. By default hide them:
.free-item {
  display: none;
}

:bullseye: Result

  • User selects 29.90€ → no free item

  • User selects 39.90€ → 1 free item appears

  • User selects 59.80€ → multiple free items appear

:warning: Important

This controls UI (order summary display)

For final order (confirmation / Shopify sync)
you should also handle it using:
:backhand_index_pointing_right: Funnelish automations (recommended)

In Funnelish, products are controlled by selection (radio input) and shown in order summary dynamically.

You will find a similar solution on this example:
:backhand_index_pointing_right: https://anwer.funnelish.io/women-snail-mucin-cream-1/qf5-checkout-1769274445459175

You can also check video tutorial here https://youtu.be/ZY0R0JCpHZE?t=41

1 Like