Grid widgets display products in a structured rows-and-columns layout. They're perfect for product pages, homepage sections, and anywhere you want to showcase multiple products at once.
Step 1: Create the Widget
Go to Widgets in the sidebar
Click Create Widget
Select Grid as the widget type
Give your widget a name (e.g., "Homepage Best Sellers")
Step 2: Connect a Data Rule
Every widget needs a Data Rule to know which products to display.
Go to the Settings tab
Under Connected Data Rules, select an existing data rule from the dropdown
Set the Product Limit (maximum number of products to display)
Click Save
Note: Data Rules are created and configured separately in the Data Rules section. If you don't have any data rules yet, create one first.
Important: Widgets without a connected Data Rule will not be displayed on your storefront.
Step 3: Configure the Layout
Go to the Design tab
Under Layout Settings, configure:
Desktop columns - How many products per row on desktop (1-6)
Tablet columns - Products per row on tablet (1-4)
Mobile columns - Products per row on mobile (1-2)
Row limit - Maximum rows to display
Grid gap - Spacing between products (Tight, Normal, Comfortable, Spacious)
Example setup for a homepage section:
Desktop: 4 columns
Tablet: 3 columns
Mobile: 2 columns
Row limit: 2 rows
Grid gap: Normal
Step 4: Style the Product Cards
Under Product Card Design, customize how each product looks:
Card Appearance
Card style - Bordered, shadow, or flat
Border radius - Corner rounding (None to Rounded)
Background color - Card background
Padding - Space inside the card
Product Image
Aspect ratio - Square (1:1), Portrait (3:4), Landscape (4:3), or Original
Product Title
Text color - Custom color for titles
Font size - Small (12px) to Extra Large (18px)
Font weight - Light (100) to Bold (900)
Product Price
Show original price - Display strikethrough price if discounted
Price color - Color for current and original prices
Font size and weight - Match your design
Add to Cart Button
Button text - Custom text (e.g., "Add to Cart", "Quick Add")
Button color - Background color
Text color - Button text color
Step 5: Add Title and Subtitle
Under Content Controls:
Widget Title
Enter your title (e.g., "Recommended for You")
Set font size, color, and alignment
Widget Subtitle (optional)
Add supporting text (e.g., "Based on your browsing history")
Toggle show/hide as needed
Step 6: Configure Display Controls
Quantity Picker
Enable this if you want customers to select quantity before adding to cart.
Variant Picker
Enable this if your products have variants (size, color) and you want customers to select them in the widget.
Product Sorting
Choose how products are ordered:
Best selling
Price (low to high / high to low)
Newest first
Random
Step 7: Set Up Discounts (Optional)
If you want to offer a discount on widget products:
Go to Settings tab
Enable Apply Discount
Choose discount type:
Percentage - e.g., 10% off
Fixed amount - e.g., $5 off each
Configure options:
Quantity limit - Max discounted items per line
Cart threshold - Only apply if cart exceeds a value
Discount message - Text shown in cart
Step 8: Save and Publish
Review your widget in the preview panel
Click Save Changes
Toggle status to Live
Step 9: Add to Your Store
Go to Shopify Admin > Online Store > Themes
Click Customize on your active theme
Navigate to the page where you want the widget
Click Add section or Add block
Select your Triom widget
Click Save