A Merchant Guide to GP Product Options' Visual Card and Button Layouts
When customers land on your product page, they make rapid decisions about whether to purchase. If they find your product options confusing or difficult to navigate, they are likely to leave your store. While color swatches are perfect for selecting colors, customizable items often need other choices, such as selecting warranty upgrades, custom packaging types, or sizing.
GP Product Options provides merchants with two powerful visual layouts for these choices: Visual Cards and Button Layouts. By structuring these layouts correctly, you can turn text-heavy configuration lists into clean, interactive sections. This guide details when and how to deploy visual cards and buttons to improve your store's user experience.
What is a Visual Card Layout?
Visual cards are rich option boxes that group an image, a title, a short description, and an optional price upcharge into a unified container. Instead of displaying a flat list of text options, visual cards present each option as a distinct, selectable product tile.
When to Use Visual Cards
Use visual cards when an option requires visual context or additional explanations. Since they occupy more screen space, they should be reserved for high-impact decision points.
- Bespoke Packaging: Show pictures of standard boxing versus premium wooden gift boxes.
- Service Upgrades: Offer extended warranty plans or assembly services with a list of benefits.
- Component Selection: Let customers pick different structural pieces of a product (e.g., choosing between three different shapes of chair legs).
What is a Button Layout?
Button layouts—often called text pills—are clean, compact, clickable boxes containing text labels. They replace traditional dropdown lists with open selections, allowing customers to view all available sizes or simple choices immediately.
When to Use Buttons
Buttons are best suited for short, text-based options that do not require visual explanations or images.
- Sizing Options: Displaying sizes like S, M, L, XL, and XXL.
- Lengths and Dimensions: Showing simple measurements like 10cm, 20cm, or 30cm.
- Binary Choices: Simple "Yes" or "No" selections (e.g., "Add gift receipt?").
Layout Comparison Matrix
Choosing the right format keeps your product pages organized and prevents mobile layout issues. Use the comparison below to guide your design choices.
| Feature / Detail | Visual Card Layout | Button Layout |
|---|---|---|
| Primary Visual Asset | High-resolution image or icon | Text label only |
| Description Space | Supports multi-line descriptions | Limited to short label |
| Grid Arrangement | 1, 2, or 3 columns (vertical stack) | Dynamic wrap (horizontal flex row) |
| Page Space Footprint | Large (highly prominent) | Compact (minimal space) |
| Best For | Upgrades, packaging, custom components | Sizing, dimensions, basic configurations |
| Price Upcharges | Highly visible within the card | Shown in brackets or labels |
How to Configure Cards and Buttons in GP Product Options
Implementing these layouts in GP Product Options is simple. Follow this configuration process:
Step 1: Select the Option Type
- Log in to your Shopify dashboard and open GP Product Options.
- Click on the Option Set you want to configure.
- Click Add Option.
- To build visual cards, select Visual Card or Image Select from the option type list. To build buttons, select Button or Text Pill.
Step 2: Configure Option Values
- For visual cards, click Add Value, upload a 1:1 ratio image, enter the title, and add a short description (e.g., "Our wooden box is crafted from sustainable oak").
- For button layouts, enter the labels sequentially (e.g., "Small", "Medium", "Large").
- Assign any necessary price adjustments to individual values. The app's pricing engine will calculate the upcharges automatically.
Step 3: Define Layout Grid Settings
- Scroll down to the Layout settings inside the option drawer.
- For visual cards, select the number of columns. A 2-column grid is ideal for mobile devices to keep card images clear.
- For button layouts, leave the layout as Flex wrap to allow buttons to adjust to the screen size automatically.
- Save your changes and preview the storefront to check the rendering on desktop and mobile.