Overview of product card configuration
Product cards show key product details in your store’s search results, collection pages, and autocomplete suggestions. You can control what information appears — like title, price, vendor, or discount badges — and enable Add to Cart features for quicker shopping.
The preview helps you to see how your product cards will look like
💡 Hint: Visual styling (like padding, fonts, or colors) is handled in the Shopify Theme Editor, not here. This article focuses on content layout, managed directly inside the Prefixbox app. If you want to learn more, read about using the Shopify Theme Editor.
Using different layouts for each module
Prefixbox gives you control over product card layouts in these areas:
Search results
Collection pages
Autocomplete (with separate settings for desktop and mobile)
Product card layout settings for search and collection pages.
Separate product card layout settings for mobile and desktop autocomplete.
This flexibility helps you design the right layout for each context, without editing any code.
💡 Hint: You can configure autocomplete cards separately for desktop and mobile — this helps keep mobile layouts cleaner by hiding non-essential details.
Product card layout settings
All product card layouts (search, collection, and autocomplete) use the same editor. You’ll see a preview panel that updates in real time — with toggles for horizontal and vertical layouts, matching how your products will appear in grid or list views.
Product card type
Choose between:
Basic layout – The default option, lets you visually adjust fields and instantly see changes.
Custom layout (Shopify Liquid) – Advanced option for developers who want full control using Shopify’s templating language.
Advanced users can use Shopify Liquid to fully customize product cards beyond the visual editor
⚠️ Important: Switching to the custom layout disables the visual editor and preview.
Add to cart section
Control whether shoppers can add products to their cart directly from the product card.
Show Add to Cart button – Toggle on/off.
Add to Cart button text – Customize the label (e.g. “Buy now” or “Add to bag”).
Show quantity selector – Allow shoppers to choose quantity before adding.
When the “Add to cart” button is enabled, you can also show a quantity selector
Fields to display
Choose which product attributes appear on the card. You can toggle each on or off:
Title – The product name
Vendor – The product’s brand or manufacturer
Description – A short product description
SKU – Internal product identifier
Price – Current selling price
Original price – Crossed-out price before discount
Discount badge – Percentage saved (e.g. "-10%")
Control which product info appears on cards using the “Fields to display” section
💡 Hint: Showing fewer fields can make product cards easier to scan, especially on mobile — keep what matters most to your customers.
Layout preview
Use the preview toggles to switch between:
Vertical layout – Used in grid view (e.g. product galleries)
Horizontal layout – Used in list view (e.g. list-style search results)
Your layout choice in the Theme Editor (grid vs. list) determines which style is shown to shoppers.
Related articles