To customize the XRecommend Widget fully, you will need to use the controls in the Widget Customize page, as well as the App Block’s editor in the Template section of the theme.
Shopify App Widget Customization Page
Time Estimate
< 1 hour
This page lets you fully control how your XRecommend and XSearch product cards look and behave on your Shopify storefront.
Card Layout
Control which elements are shown inside each product card, including the vendor name, variant selectors (for choosing size, color, etc.), and Add-to-Cart buttons. Adjusting these options helps you balance clean design with faster purchase paths, depending on your store’s goals.
Content Alignment & Spacing
Set whether product content (like name and price) aligns to the left, center, or right, and adjust the spacing (padding) inside each card. Careful alignment improves scannability and keeps your design consistent with the overall site style.
Fonts
Choose specific fonts for headings (usually the product name) and body text (price, vendor name) to match your store's typography. This helps your widgets feel natively integrated with your Shopify theme rather than looking "pasted on."
Card Corner Radius
Adjust the roundness of the card’s corners. A larger radius gives a softer, more modern feel, while smaller or zero radius offers a sharper, cleaner look. Matching your card style to your brand vibe subtly improves the perceived quality of your store.
Card Background and Outline Colors
Select background and border (outline) colors for product cards. This is especially useful for ensuring your recommendation widgets stand out properly against different Shopify theme backgrounds, or for highlighting cards without overwhelming the page.
Product Image Settings
Control image behavior by setting interactions like zoom-on-hover or swapping images, choose aspect ratios (such as square 1:1), and round the corners of product images independently from the card. Well-optimized product imagery makes your widgets more attractive and drives more clicks into product pages.
Product Details Styling
Customize the size, color, and styling (bold, italic) of the vendor name, product name, and price displayed in each card. Highlighting the most important product information clearly and elegantly leads to higher engagement and better conversion rates.
Badge Customization
Add visual "badges" onto products by mapping them to Shopify product tags (for example: "New," "Bestseller," "Limited Edition"). You can customize the badge's text, size, color, and shape. Effective use of badges helps shoppers quickly identify important products and creates urgency.
Button Customization ("Add to Cart" Button)
Fully customize the Add-to-Cart button, including the label text ("Add to Bag", "Buy Now"), font, size, fill color, outline, and shape. A well-designed button encourages faster checkout behaviors and can meaningfully increase your click-through and conversion rates.
Global Custom CSS
For full creative control, you can paste your own CSS code into the Global Custom CSS field. This lets advanced users override any widget styles to achieve pixel-perfect matches with complex Shopify themes or campaign-specific designs.
Shopify Theme Page App Block
Time Estimate
1 Minute
Options inside the theme include:
Experience ID
Paste the unique Experience ID generated from your XGEN Platform. This ID tells the widget exactly which set of product recommendations to render. Without it, the widget cannot display dynamic, AI-driven product suggestions.
Heading Size, Alignment & Color
Set a custom heading that will appear above your recommendations, such as "Recommended for You" or "Other Shoppers Viewed." This allows you to tailor the shopper’s emotional connection based on page context or target audience.
Choose the heading size (H1, H2, H3, etc.). Typically, H3 is used for sub-sections like recommendations, keeping your theme hierarchy clean without overpowering the main page title.
Select whether the heading text aligns to the left, center (middle), or right of the widget area. Proper alignment keeps the flow of your page consistent with your overall brand layout and visual rhythm.
Pick the color for your heading text. Matching your theme’s accent or primary text color ensures that the recommendation block feels naturally embedded into the page rather than looking out of place.
Background Color
Set a background color behind the heading area. This can be useful for visually separating the recommendation section from other parts of the page, or for matching promotional page designs during campaigns.
Product Card Layout
Choose whether the product recommendations display in a Grid (static, multi-row layout) or a Carousel (scrollable horizontal slider). Carousels are often better for mobile, while grids can work well for desktop category pages.
Desktop & Mobile Columns
Define how many product columns are displayed on desktop — 3, 4, or 5. This choice affects the density of your product display and can be adapted based on your site’s design style and the size of your product imagery.
On mobile devices, choose whether your widget shows 1 or 2 columns. Two columns usually improve scroll efficiency and prevent giant product cards from dominating the small screen experience.
Show/Hide Switches
Show Vendor
Toggle ON if you want to display the product’s vendor or brand name under the product title. Useful for multi-brand stores but may be turned off if you want a cleaner, simpler card.
Show Variant Selector
Enable this option if you want shoppers to immediately choose a variant (like size or color) without needing to click into the product page. This feature reduces friction and speeds up purchase decisions for stores with many product options.
Show Add to Cart
Toggle ON to display an "Add to Cart" button directly under each recommended product. This is highly recommended for driving immediate conversions, especially when paired with high-intent recommendations.
Custom CSS for advanced users
The Custom CSS field in the XGEN AI widget settings allows you to apply custom styling directly to your recommendation or search components without modifying your Shopify theme files. To use it, simply paste valid CSS code into the text area. Your CSS will automatically apply to the widget components after saving and refreshing your storefront.
This is ideal for making targeted visual adjustments — such as changing font sizes, button colors, margins, or hover effects — when the built-in settings don't offer enough flexibility.
Best Practices with Custom CSS
Scope your CSS to XGEN widget elements to avoid accidentally impacting other parts of your site.
Keep CSS snippets small and focused for easier troubleshooting.
Preview changes on both desktop and mobile after applying custom styles.