Custom CSS
Add custom CSS to fine-tune the appearance of the Recently Viewed widget and badges beyond the built-in styling options.
Adding Custom CSS
Go to Online Store > Themes > Customize
Click App embeds in the left sidebar
Click Recently Viewed to expand settings
Scroll to the Custom CSS field
Add your CSS and save
Your CSS applies to all Recently Viewed elements across your store.
Common Examples
Change Widget Background
css .recently-viewed-widget { background-color: #f5f5f5; padding: 20px; border-radius: 8px; }
Style Product Cards
```css .recently-viewed-product { border: 1px solid #eee; padding: 10px; }
.recently-viewed-product:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } ```
Customize Badge Appearance
css .previously-viewed-badge { font-size: 10px; padding: 4px 8px; border-radius: 4px; }
Hide on Specific Pages
css /* Hide widget on cart page */ .template-cart .recently-viewed-widget { display: none; }
CSS Class Reference
Element | Class |
Widget container |
|
Widget heading |
|
Product grid |
|
Product card |
|
Product image |
|
Product title |
|
Product price |
|
Previously viewed badge |
|
Tips
Use browser developer tools to inspect elements and find the exact classes you need
Test your CSS on different screen sizes
Prefix your selectors with
.recently-viewedto avoid affecting other parts of your theme