Customize product tiles in Loomi AI for Shopify
Loomi AI for Shopify widgets render product tiles using a built-in template. You have two ways to customize them: CSS for restyling existing elements, and experience customization for changing the tile structure or adding new elements.
Before you start
- Loomi AI for Shopify is installed and configured in your store.
- You have access to your Shopify theme's CSS files or the Shopify theme editor.
- For experience customization, you need access to the Loomi AI for Shopify app in Data Hub.
Customize with CSS
CSS lets you restyle any element that's already rendered in the product tile. Use the documented br- classes to target specific elements without modifying the underlying template.
What you can do
- Restyle existing elements such as the image, title, price, sale price, and add-to-cart button.
- Change layout, spacing, typography, colors, and hover effects.
- Show or hide existing elements.
- Add static decorations such as background images, borders, or badges that wrap an existing element.
CSS can only target elements that are already in the tile's HTML. It can't add new elements, bind new data, or wire up interactive behavior.
See the CSS class reference for the full list of stable selectors.
Customize with experience customization
Use experience customization when CSS isn't enough—for example, when you need to add new elements, bind custom feed data, or match a fully custom design.
What you can customize
Experience customization gives you full control over the tile markup using EJS templates. You can customize:
- Product card: images, titles, prices, swatches, badges, and variant logic.
- Page layout: facet sidebar, product grid, sorting bar, and pagination.
- Text facets: checkbox filters with values and counts.
- Slider facets: range sliders for numeric attributes such as price.
- Selected facet pills: active filter pills with remove and clear-all options.
What requires a different approach
- Wishlist button: adding a wishlist button requires JavaScript behavior, not just styling. Implement it outside the widget as custom Shopify theme code or a Shopify wishlist app, then position it near the product card with CSS.
- Star ratings: rating data must be present in your product feed and isn't rendered in the default tile template. Use experience customization to add a ratings element once the feed attribute is available.
Related articles
- CSS class reference for Loomi AI for Shopify widgets
- Experience customization for Loomi AI for Shopify
- Experience customization use cases for Loomi AI for Shopify