Variant Showcase

The Variant Showcase element shows one image with two choices above or below it: a group, such as a product or a style, and a variant of that group, such as a color. Visitors switch between them in place, and the caption and the button follow the variant on screen. Use it for a product in several colors, a floor plan per building and floor, a room in different materials, or a template in its color versions.

Adding the element

Add an element in the YOOtheme Pro builder and pick Variant Showcase from the Planckie Elements group. A new element comes with placeholder items: two groups with two colors each, a placeholder image, a caption and a link, so every part is visible before you replace the content.

Every item is one variant. Variants with the same Group Name form one group, in the order of the items. The element needs at least one item with an image; items without an image are left out.

Content

Option	Description
Items	The variants. Each item is one image of one variant.
Display	Show the group navigation, Show the variant navigation, Show the caption and Show the link. All on by default.
Link	Links the whole showcase instead of linking variants separately. A link entered on a variant takes precedence.

With the variant navigation off, its swatches are hidden but still decide what a group switch shows, so visitors choose only the group. With the group navigation off, only the first group can be reached.

Items

Option	Description
Group Name	Items with the same name form one group, for example a product or a style. Names match without regard to letter case or spaces at either end; the first spelling is the one shown. Left empty, the item joins a group without a name, listed as Other next to named groups.
Variant Name	The name of the variant, for example a color. Visitors hear and see it on the swatch, and switching groups keeps a variant with the same name selected. Left empty, it reads Variant 2 and so on.
Swatch Color	The color of the swatch. Without a color the swatch is grey.
Swatch Thumbnail	A small image shown in the swatch instead of the color, for example a fabric or a material.
Image, Image Alt	The image of the variant and its alternative text.
Caption	An optional line below the image, for example the variant name and its price.
Link, Link Text	The button link of this variant and a different button text for it.

The item's Settings tab has Focal Point, which controls cropping when the image is cut to a set width and height.

Which link the button uses. A variant without its own link takes the first link entered on any variant of its group, and a group without links takes the element's Link. To link a whole group, enter the link on its first variant.

Settings

Group Navigation and Variant Navigation

Option	Description
Navigation (group)	Dropdown, Tabs, Subnav Pill, Subnav Divider or Subnav. Dropdown by default. With a single group the navigation is hidden automatically.
Label	Shown in front of the dropdown, for example Style. Empty by default, which shows no label.
Navigation (variant)	Swatches, Numbers, Dots, Tabs, Subnav Pill, Subnav Divider or Subnav. Swatches by default. Swatches, numbers and dots show the variant name in a tooltip; tabs and subnav show it as text.
Size	Small, Default or Large swatches and numbers: 24, 32 or 44 pixels.

The dropdown opens the dropdown list of the active theme style. A long group name ends with an ellipsis once the pill text reaches a width of 14em; the open list shows it in full. Tabs, subnav and dots are the navigation styles of the theme.

When visitors switch the group, the variant with the same name stays selected. Without one, the group's first variant is shown.

Navigation Layout

Option	Description
Position	Top or Bottom of the image. Top by default.
Alignment	Split puts the groups on the left and the variants on the right. Left, Center and Right keep both together. Split by default.
Margin	The space between the navigation and the image.

On a narrow screen the variant navigation wraps below the groups.

Image

Option	Description
Width/Height	The proportions and resolution of the images. The image always fills the width of the element. Set both values to crop every image to the same proportions, so the element keeps its height when visitors switch.
Transition	Fade or None. Fade by default.

Loading, Border, Box Shadow and Box Decoration work as they do in the native Image element of YOOtheme Pro. The decoration stays in place while the image changes.

Caption

Option	Description
Layout	Stacked puts the button below the caption. Split puts them in one row, the caption on the left and the button on the right; on a narrow screen the button wraps below. Stacked by default.
Style	A text style of the theme: Text Meta, Text Lead, Text Small, Text Large or Heading H4 to H6. None by default.
Margin Top	The space above the caption, or above the row with Split.

Link

Option	Description
Text	The button text. Left empty, it reads Learn more. %group% and %variant% insert the names on screen, for example Download %group%.
Icon	An optional icon in front of the text.
Attributes	Open in a new window, Download, Nofollow and Noreferrer.
Style, Button Size, Full width button	The button and link styles of the theme. Button Default by default.
Margin Top	The space above the button in the Stacked layout.

Accessibility, General and Advanced

ARIA Label names the showcase for screen readers. Left empty, it reads Variants. The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla. Text Alignment in General also aligns the caption and the button.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-variant-showcase-group-nav, .pe-variant-showcase-variant-nav, .pe-variant-showcase-swatch, .pe-variant-showcase-image, .pe-variant-showcase-caption, .pe-variant-showcase-button

--pe-variant-showcase-line sets the color of the dropdown pill border and of the ring around the selected swatch: a light tint of the text color by default.

Accessibility and keyboard

The variant navigation and the tabs or subnav of groups are radio groups: one Tab stop each, with the chosen item focused. The dropdown is a menu button. A swatch, a number or a dot is named after its variant, a number as 1. Blue. A change of image is announced through its alternative text.

Key	Action
Arrow keys	Move to the next or previous variant or group and show it. In the open dropdown they only move the focus.
Home, End	The first or last variant or group.
Enter, Space	Opens the dropdown, or picks the focused group and closes it.
Escape	Closes the dropdown and returns to the pill.

Focus uses the focus ring of the theme. A click on the dropdown pill shows no ring.

With reduced motion enabled in the visitor's system settings, images change without the fade.

Notes and limits

• Only the image on screen loads with the page. The others load when a visitor points at, focuses or touches a swatch or a group, or when the browser is idle with the element in view, so a page with several showcases stays light.
• Without JavaScript the first variant shows with its caption and button, and the navigation does nothing.
• Group and variant names are plain text; HTML in them is removed.