subscription-swatches
Webflow tabs and radios that choose a selling plan.
At a glance
A group with several plans
- Tab
- The group's name, from
subscription-group="name". - Pane
- One Radio button per plan.
- Class
more-optionson the tab and pane. Elements withgroup-condition="more-options"on or inside them show.
A group with one plan
- Tab
- The plan's name instead of the group's. A click on the tab chooses the plan.
- Class
one-optionon the tab and pane. Elements withgroup-condition="one-option"on or inside them show.
A product sold only by subscription
- One-time tab
- Removed, with its pane.
- Starts on
- The first plan.
No plan for the selected variant
- Picker
subscription-swatchesis removed, when the product or the selected variant has no plan.- Groups
- A group without a plan for the selected variant is dropped.
More in the guide.
Where it can go
- Inside
smootify-product. - Must contain
.w-tabs,.w-tab-link,.w-tab-pane. - Out of place, Smootify removes it from the page: also when the product has no selling plans.
What it requires
Nothing beyond Smootify: it works on every plan.
Attributes on the element
- It reads
auto-select-plan,auto-select-index,data-selected-group,data-selected-option-index.
Attributes inside it
| Group | Attribute name | Values |
|---|---|---|
| Selling plans | subscription-group | 1 |
| Loading | skeleton | 5 |
| Subscription choices (condition) | group-condition | 2 |
Loading
Its code loads only on pages that have subscription-swatches.