The Recently Viewed widget is highly customizable through Shopify's theme editor. You can control everything from the number of products displayed to colors, layout, carousel settings, and more—all without writing any code.
Accessing Widget Settings
Navigate to the page where you have added Recently viewed widget. Please note that widget styles are not global so you will need to make same adjustments to all widgets added to your store.
General Settings
Configure the basic appearance and content of your widget.
Widget Title
Setting: Title
Default: "Recently Viewed"
Purpose: The heading displayed above the product grid
Examples:
"Recently Viewed" (default)
"Products You've Viewed"
"Your Browsing History"
"Keep Shopping"
"You Recently Checked Out"
Leave blank to hide the title
Best Practice: Keep it short and clear. Customers should immediately understand what this section shows.
Heading Size
Setting: Heading Size
Options:
Small (h3)
Medium (h2) - default
Large (h1)
When to Use:
Large (h1): Homepage or landing pages where the widget is a primary feature
Medium (h2): Product pages, collection pages (recommended)
Small (h3): Sidebar placements or when you have multiple widgets
Tip: Match your theme's heading hierarchy. If your theme uses h2 for section titles, use h2 for consistency.
Heading Alignment
Setting: Heading Alignment
Options:
Left (default)
Center
Right
Choosing Alignment:
Left: Most common, works with most themes
Center: Clean, modern look; works well with centered product grids
Right: Unique placement; use if your theme has right-aligned design elements
Example: If your product pages have centered headings, set the widget title to center alignment for visual consistency.
Layout Settings
Control how many products are displayed and how they're arranged.
Products to Show
Setting: Products to show
Range: 2 - 25 products
Default: 8
Recommendations by Placement:
Product Pages: 4-8 products (most common placement)
Homepage: 8-12 products (customers browse longer)
Cart Page: 4-6 products (don't overwhelm)
Collection Pages: 4 products (complement main products)
Performance Consideration: More products = slightly longer load time. Keep under 12 for optimal performance.
Note: The widget only shows products the customer has actually viewed. If they've only viewed 3 products, only 3 will display regardless of this setting.
Columns (Desktop)
Setting: Number of columns on desktop
Range: 2 - 5 columns
Default: 4
Choosing Column Count:
2 columns: Large product images, detailed view, good for luxury/high-ticket items
3 columns: Balanced, works well for most stores
4 columns (recommended): Most common, clean grid layout
5 columns: Compact, good for stores with many products, shows more at once
Theme Integration: Match your theme's product grid. If your collections show 4 products per row, use 4 columns.
Columns (Mobile)
Setting: Number of columns on mobile
Options:
1 column: Full-width products, easiest to browse
2 columns (default): Shows more products at once
Mobile UX Considerations:
1 column: Best for products with detailed information, easier thumb navigation
2 columns: More products visible, faster browsing, recommended for most stores
Recommendation: Use 2 columns unless your products have very small images or require large tap targets.
Display Options
Control which product information is shown in the widget.
Exclude Current Product
Setting: Exclude current product
Default: ☑️ Enabled (recommended)
What it does: On product pages, hides the current product from the recently viewed list
Example: Customer is viewing "Blue T-Shirt". Widget shows previously viewed products but NOT "Blue T-Shirt" since they're already on that page.
When to disable:
You're placing the widget on non-product pages only (homepage, cart)
You want to show all viewed products regardless of current page
Best Practice: Keep this enabled. Showing the current product is redundant and wastes space.
Show Vendor
Setting: Show vendor
Default: ☐ Disabled
What it does: Displays the brand/vendor name below the product title
When to enable:
✅ You sell products from multiple brands (e.g., marketplace, multi-brand store)
✅ Brand names help customers identify products
✅ Your main product cards show vendor
When to disable:
✅ Single-brand store (your own products only)
✅ Vendor names aren't meaningful to customers
✅ You want a cleaner, simpler look
Example: Electronics store selling Samsung, Apple, Sony products would enable this. Single-brand clothing store would disable it.
Show Product Price
Setting: Show product price
Default: ☑️ Enabled (recommended)
What it does: Displays product price below the product name
Why enable (recommended):
Customers can quickly compare prices
Helps in decision-making
Standard e-commerce practice
Increases transparency
When to disable:
Custom pricing (B2B stores where prices vary by customer)
Request-for-quote products
Extremely minimal design preference
Best Practice: Keep this enabled unless you have a specific reason not to show prices.
Show Secondary Image
Setting: Show secondary image on hover
Default: ☐ Disabled
What it does: When customer hovers over a product, the main image switches to the second product image
Benefits:
Shows more product details without clicking
Creates engaging, interactive experience
Helps customers preview products better
Common on fashion/apparel sites
When to enable:
✅ Your products have high-quality secondary images
✅ Fashion, apparel, jewelry (showing different angles helps)
✅ Your theme uses image hover effects
✅ You want a more premium, interactive feel
When to disable:
Your secondary images aren't meaningful
You prefer faster, simpler interactions
Your products only have one image
Note: Only works if products actually have a second image. No effect if products have only one image.
Text Alignment
Setting: Product information alignment
Options:
Default: Inherits from theme settings
Left: Product name, price aligned left
Center: Product name, price centered
Right: Product name, price aligned right
Choosing Alignment:
Default (recommended):
Matches your theme's product card style automatically
Ensures visual consistency with rest of your store
Left:
Most common, easy to scan
Best for text-heavy product names
Professional, traditional look
Center:
Modern, clean aesthetic
Works well with short product names
Good for minimalist themes
Right:
Unique, artistic layouts
Rarely used, mostly for specific design systems
Tip: Use "Default" unless you have a specific design reason to override.
Carousel Settings
Control horizontal scrolling behavior and navigation arrows.
Enable Carousel (Desktop)
Setting: Enable carousel on desktop
Default: ☑️ Enabled
What it does: Allows horizontal scrolling/sliding through products with arrow controls
Grid vs Carousel:
Carousel (enabled):
Products slide horizontally
Navigation arrows to scroll
Shows partial next product (hints at more content)
Good for many products (8+)
Grid (disabled):
Shows all products at once
No scrolling needed
Cleaner, simpler view
Good for few products (4 or fewer)
Recommendation: Enable carousel if showing 6+ products. Disable if showing 4 or fewer.
Enable Carousel (Mobile)
Setting: Enable carousel on mobile
Default: ☑️ Enabled
What it does: Enables horizontal swipe scrolling on mobile devices
Mobile UX:
Enabled (recommended):
Natural swipe gesture
Faster browsing through products
Saves vertical space
Standard mobile e-commerce pattern
Disabled:
Vertical scroll (shows all products stacked)
May create very long pages
Easier to see all products at once
Best Practice: Keep enabled. Mobile users expect swipe-to-scroll behavior for product carousels.
Carousel Arrow Position
Setting: Arrow position
Options:
Below (default): Arrows appear centered below the product grid
Sides: Arrows appear on left/right edges of the carousel
Choosing Position:
Below (recommended):
✅ Clean, centered navigation
✅ Doesn't overlap product images
✅ Works well with any product image size
✅ Clear, obvious controls
Sides:
✅ Overlay arrows on carousel (like Netflix, Amazon)
✅ Saves vertical space
✅ More immersive browsing experience
⚠️ May overlap product images on small screens
⚠️ Can interfere with product badges/labels
Recommendation: Use "Below" for consistent, accessible design. Use "Sides" for modern, space-saving layout (test thoroughly).
Card Styling
Customize the appearance of individual product cards.
Use Theme Settings
Setting: Use theme settings
Default: ☑️ Enabled (recommended)
What it does: Automatically inherits product card styles from your theme
Why enable (recommended):
✅ Ensures visual consistency with your store
✅ Widget matches your existing product cards
✅ No manual color/style configuration needed
✅ Automatic updates when you change theme settings
Why disable:
You want the widget to have a unique look
Your theme's product cards don't match your vision
You want custom branding for recently viewed products
Best Practice: Keep enabled unless you need custom styling for specific branding/design reasons.
Note: When enabled, the color/border/radius settings below are ignored.
Card Background Color
Setting: Card background
Default: #ffffff (white)
Purpose: Background color of each product card
Only applies when: "Use theme settings" is disabled
Common Choices:
White (
#ffffff): Clean, traditional e-commerce lookLight gray (
#f8f8f8): Subtle, reduces glareOff-white (
#fafafa): Warmer than pure whiteTransparent: Use your page background color
Best Practice: Match or slightly contrast with your page background. Ensure product images stand out.
Card Text Color
Setting: Card text color (product name)
Default: #333333 (dark gray)
Purpose: Color of product titles
Only applies when: "Use theme settings" is disabled
Accessibility: Ensure minimum 4.5:1 contrast ratio with card background
Common Choices:
Dark gray (
#333333): Softer than pure black, easy to readBlack (
#000000): Maximum contrast, traditionalBrand color: For unique branding (ensure readability)
Card Price Color
Setting: Card price color
Default: #333333 (dark gray)
Purpose: Color of product prices
Only applies when: "Use theme settings" is disabled
Common Strategies:
Same as text color: Clean, unified look
Accent color: Draw attention to prices (e.g.,
#c41e3ared)Muted color: Subtle pricing (e.g.,
#757575gray)
Example: Fashion stores often use same color for name and price. Discount stores may use bold/red prices.
Card Border Thickness
Setting: Card border thickness
Range: 0px - 5px
Default: 1px
Only applies when: "Use theme settings" is disabled
Choosing Thickness:
0px: No border, clean modern look
1px (recommended): Subtle definition, most common
2-3px: Strong borders, defined cards
4-5px: Very bold, graphic design style
Best Practice: Use 1px for subtle definition, or 0px for borderless modern design.
Card Border Color
Setting: Card border color
Default: #e5e5e5 (light gray)
Only applies when: "Use theme settings" is disabled and border thickness > 0px
Common Choices:
Light gray (
#e5e5e5): Subtle, professionalMedium gray (
#cccccc): More definedBrand color: Match your branding (use light shade)
Card Corner Radius
Setting: Card corner radius
Range: 0px - 24px
Default: 0px (square corners)
Only applies when: "Use theme settings" is disabled
Visual Impact:
0px: Sharp corners, modern/minimalist
4-8px: Slightly rounded, friendly look
12-16px: Very rounded, soft appearance
20-24px: Extremely rounded, playful design
Best Practice: Match your theme's button/card corner radius. Most modern themes use 4-8px.
Section Spacing
Control padding around the entire widget section.
Padding Top
Setting: Top padding
Options:
None (0px): No space above widget
Small (24px): Minimal spacing
Medium (36px) - default
Large (72px): Generous spacing
When to Use:
None/Small: Tight layouts, multiple sections stacked
Medium: Standard spacing, recommended for most placements
Large: Hero-style placement, feature section
Padding Bottom
Setting: Bottom padding
Options:
None (0px): No space below widget
Small (24px): Minimal spacing
Medium (36px) - default
Large (72px): Generous spacing
Best Practice: Match top padding for symmetry, or use larger bottom padding to separate from content below.