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

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.

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.

Shopify Theme Page 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.