The quick menu

How many services the strip shows

Six is the default, and it is the number to argue with rather than accept. Under about four the strip is barely worth the press; far past eight it is the full sheet with none of its search or its scrolling, which is why the number stops at 24.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

One to twenty-four

Read as a number or as a string. Anything that is not a number, and anything below one, falls back to six; anything above twenty-four is clamped to it. Nothing is lost at the cap — the plus at the end of the strip still opens the whole catalogue, which is the point of capping it at all.

window.ats_config = { quick_count: 4 };

It counts services you do not already have

The strip is filled from the catalogue minus whatever this kit renders inline, so six means six the reader could not already press. That makes the useful number a function of your row: a kit showing two services can afford a long strip, a kit showing eight rarely needs more than three past them.

A capped row feeds it back

num_services trims the row, and the buttons it trims are gone from the page rather than hidden — so they are not counted as already shown and are candidates for the strip like any other catalogue entry. Cap the row at three and the fourth service you listed may well turn up one press away, though in catalogue order rather than in yours.

Live demo

Demo ↗

An article worth passing on

Three services in the strip, and this page sets nothing else: quick_count on its own is enough to switch the quick menu on.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>window.ats_config = window.ats_config || {}; window.ats_config.quick_count = 3;</script>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>

How many show