Relume - Product Listing Setup

Add the Product Listing Component

1. Open the Shopyflow Relume Library and navigate to the Product Listing folder.
2. Choose a component that best fits your needs (e.g., Filters 3).
3. Click Copy, then go back to Webflow Designer.
4. Remove any existing product listing section.
5. Paste the copied component inside the Main Wrapper element.

Populate the Product List

1. Select the Product List element and connect it to the Products CMS collection.
2. The Product List element contains the sf-product-list attribute, which dynamically loads filtered product items.
3. Inside it, the Product Container serves as a wrapper for individual product items.
4. Select the Product Container and set its sf-product attribute value to the Product ID field from the CMS.

Connect Product Information

1. Link the Product Page link to the correct CMS field.
2. Set the Product Image to display dynamically from the CMS.
3. Connect the Product Title field.
4. Assign Price and Compare Price fields.

💡 Tip: Each product item is a Buy Module, meaning you can also add:

• Add to Cart buttons
• Variant Option Selectors
• Quantity Changers
• Image Galleries

Configure Product Filters

Make the Filter Panel Visible for Editing

1. The filter panel is inside a modal, placed next to the Filters Button.
2. Select the modal in the Navigator.
3. Go to the Transform Settings in the Styles Panel and disable the applied transform (click the eye icon).

Configure Taxonomy Filters

1. Expand all elements in the Navigator.
2. Locate the Filter Group List, which contains Taxonomy Filter Wrappers (one for each filter type: Collection, Product Type, Vendor, and Tags).
3. Each Taxonomy Filter Wrapper has:
   1. sf-filter attribute (set to the taxonomy type).
   2. A Filter Reset Button.
   3. A Collection List containing the Taxonomy Filter Value components.

Assign Filter Values

1. Select a Taxonomy Filter Value component.
2. Set its source as the corresponding CMS collection (e.g., Collections, Product Types, Vendors, or Tags).
3. In Custom Attributes, set the sf-filter-value attribute to the Name field from the CMS.
4. Finally, set the Label text to display the Name field.

Repeat for other Filter Groups

Repeat the above process for:

• Product Type filters
• Vendor filters
• Tags filters

Finalizing Filters & Active States

1. Remove any helper elements.
2. When a filter is active, the sf-active class is applied to the component and its children.
3. Checkbox icons and form pills use sf-active to style the active state.
4. If needed, customize the appearance of active filters.
5. Remove the sf-active classes before publishing.
6. In Transform Settings, click the eye icon to reapply the hidden state to the modal.

Configure the Active Filters List & Sorting Controls

1. The Active Filters List dynamically displays selected filters using the Active Filter Item component.
2. Each item consists of:
   • Filter Item Title (showing the filter name).
   • Filter Remover Button (to clear an applied filter).
3. The Sorting Control is a pre-configured Select element with necessary attributes. No further setup is needed.

Publish and Test

1. Publish your site and verify the Product Listing Module.
2. Check if:
   • Products load correctly.
   • Filters apply dynamically.
   • Sorting works as expected