Customize PLP Widget

Before You Start

At this point, you have already configured your PLP Service in the XGEN platform

This page will cover two steps taken within your Shopify Storefront

1. Shopify App Widget Customization

2. Shopify Theme App Block

Shopify App Widget Customization Page

Time Estimate

5 mins

Page Layout

Choose overarching styles like heading font, body font, page padding and page background color. Properly adjusting these settings helps keep product grids visually organized and easy to browse.

Filter Layout & Styles

Customize the look of the filtering sidebar or dropdowns. You can set a background color for the filter area, choose heading font and size for filters, and control padding, alignment, and colors.

Style individual filter groups as either pills or checkboxes. Update the label styling including padding and font size. You can set specific font and color choices to match the filters to your store’s typography system.

Filter Customization

To further customize the way your filters appear within your PLP Widget, you can assign images to filters and change the individual filter styling displayed on your PLP. You can find the Filter Customization page in the main XGEN app menu below Widgets.

Filter Image Mapping

In Filter Image Mapping, you can assign images or colors to your Pill and Swatch style filters.

Filter Style

In Filter Style, you can configure the styling of each individual filter you are passing from XGEN’s Merchandising Rules. There are three styles to choose from: Checkbox, Pill, and Swatches.

Checkbox Style Limitations

Checkbox styles currently do not support images or colors. If you are using images in swatch or pill styles, you can add images and colors to your filter items.

Sort Button Layout

Control the appearance of the "Sort By" dropdown that lets customers re-order results (e.g., by Newest, Price: Low to High, Best Selling). You can customize the font, text transform (like Uppercase), and spacing within the sort bar.

Navigation Layout

Customize how page navigation or pagination looks at the bottom of product listings. Define the label for navigation (such as "View More Products"), font styles, padding, and the styling for navigation buttons. Good navigation design ensures customers always know how to load or explore more results without getting stuck or confused.

Global Custom CSS

Add any additional CSS code to fine-tune your PLP and Filter styling beyond the built-in controls. This is ideal for matching precise brand styles, campaign designs, or making mobile-specific adjustments for better usability.

Learn more about using Custom CSS on your widgets and app blocks here

Shopify Theme App Block

Time Estimate

3 mins

Go to your Themes section of your Shopify Storefront and select a theme to Customize.

Navigate to a Collection Page

Inside your theme editor, use the top nav bar to select a collection page to edit.

Insert an App Block

On the left sidebar, choose a section to add an App Block. Click the + button between sections or click the “Add Section” button at the bottom of your Template layer list.

Paste in Your PLP Experience ID

Once the XProduct Listing App Block is added to your Template, you can paste your XSearch Experience ID into the field at the top of the side bar.  Continue to adjust you product card column count on desktop and mobile and show/hide options like Vendor Name, Variant Selector, or the Add To Cart Button.

Custom CSS can be added to this App Block at the bottom of the side bar to further customize the display of the PLP.