Quick View button
What the button says, where it sits on each product card, and how it looks. The Live Preview updates as you change settings.
Position
- A dark "Quick View" text button under the product card
- Square eye icon button at the bottom center of the product image
| Position | Where |
|---|---|
| Button after add to cart (default) | Below the card's own button |
| Button before add to cart | Above the card's own button (above the title if the card has no add to cart button) |
| Icon on the image | On the product image, in the corner you choose |
| Replace theme's icon | When your theme shows icons on product images (cart, wishlist, view…), quick view takes over its "view product" icon, or joins those icons, with the same look. Themes without such icons get the icon on the image |
Placement & visibility
| Setting | Default | Applies to |
|---|---|---|
| Icon corner | Bottom center (or top center, any corner, center) | Image positions |
| Distance from image edge (px) | 12 (0–60) | Image positions |
| Full width | Off: stretch across the card | Before / after add to cart |
| Only show on hover | Off: appears when the card is hovered or focused; touch devices always show it | Icon on the image |
| Hide on phones | Off: hidden on screens 600 px or narrower | All |
Button content
| Setting | Default | Options |
|---|---|---|
| Show | Icon and text | Icon and text, Icon only, Text only. Replace theme's icon always shows an icon |
| Button text | Quick View | |
| Icon | Eye | No icon, Eye, Magnifier, Expand, Plus |
| Icon position | Before text | Before, After |
Show, Button text and Icon position are hidden for Replace theme's icon, which always shows the icon alone. Icon is used by "Icon and text" and "Icon only"; with No icon, an icon-only button still shows the eye. Clearing Button text also gives an icon-only button.
Icon-only buttons are still announced as "Quick view: product name" to screen readers. Long text is shortened with "…" on narrow cards.
Appearance
Style: Custom (default) uses the colors below; Theme button inherits your theme's button design. Colors, corner radius, inside spacing, border width and soft shadow show only for Custom.
| Setting | Default |
|---|---|
| Background · Text & icon | #111827 · #ffffff |
| Hover background · Hover text & icon | #2563eb · #ffffff |
| Border · Border width (px) | #111827 · 1 |
| Corner radius (px) | 6 (0–50) |
| Inside spacing, top & bottom · left & right (px) | 9 · 16 (icon-only buttons use top & bottom on every side) |
| Soft shadow | Off |
| Font size (px) · Font weight · Letter case | 14 · Semi-bold · As typed (both styles) |
| Icon size (px) | 16 (both styles) |
Live Preview
The Button tab's sidebar shows a sample product card with the real button. It updates as you change settings, before you save; hover the card to try Only show on hover. With Replace theme's icon, a note explains that on your store the icon joins your theme's own image icons.
- Button Content, Placement & Visibility and Appearance cards
- Live Preview with a sample product card, and the Reset to Defaults card
The button elsewhere
Add it to a custom product loop in your theme with <?php siteryn_qv_button(); ?> (shown with a Copy button on the General tab). Pro adds custom triggers and a shortcode.