Triggers & accessibility
More ways to open quick view, browse products without closing it, and fine-tune keyboard and screen reader support.
Product card triggers
| Setting | Default |
|---|---|
| Clicking the product image | Off |
| Clicking the product title | Off |
| Hide the quick-view button | Off. Only while the image or title trigger is on, so shoppers always have a way in |
Ctrl/⌘-click and middle-click still open the product page. Add to cart buttons keep working normally. Hide the quick-view button hides it on product cards (shop, categories, related products and other product lists); buttons added with the shortcode or the siteryn_qv_button() template tag stay.
Custom elements
For example .promo-card .peek. The element needs a data-product-id attribute, or must sit inside a product card that has a quick-view button.
Custom elements work on pages where quick view loads: shop, categories, product pages, the cart, search, and any page with a Quick View button.
Shortcode
[siteryn_quick_view id="123" label="Take a look"]
- Adds a Quick View button anywhere, using your Button settings.
idis optional inside a product loop;labelreplaces the button text. - On by default (Enable the [siteryn_quick_view] shortcode). If the setting is off or the license inactive, the shortcode text shows on the page.
- Use a "Button before/after add to cart" position: image positions place it as an icon.
Product navigation
- "Previous product" and "Next product" at the bottom of the modal
| Setting | Default |
|---|---|
| Previous/next product buttons | On. Moves through the products on the current page, in page order |
| Left/right arrow keys switch products | On. Ignored while typing, choosing an option or using the gallery |
The buttons appear only when the page has more than one product with a Quick View button and the open product is one of them, so a suggestion that isn't listed on the page shows no navigation. They don't wrap around: Previous is disabled on the first product and Next on the last. In right-to-left languages the arrow keys follow the reading direction.
Focus
| Setting | Default | Options |
|---|---|---|
| Focus when a product loads | The dialog | The dialog (screen readers read its title), The product title, The first option or add-to-cart button, The close button |
| Enhanced focus outline | On | A thick, high-visibility outline inside the modal |
| Focus outline color · width (px) | #2563eb · 3 | Width 2–6 |
Announcements & motion
Screen readers hear, for example, "Blue Shirt, product 2 of 12".
For every visitor. Visitors whose device asks for reduced motion never get them either way.