Products Feed Widget¶

Description¶

The Products Feed Widget displays a list of products from any category or product page URL. Supports Grid or Carousel display with various sorting options.

Page Builder Name: Products Feed | PapaThemes Beautify

Version: 1.0.2

Supported Themes: Eyeva, Dinosaur, Kitchenary, MoonCat, InHealth, Kansha, Beautify, Chiara, Supermarket, Cornerstone

Features¶

• ✅ Fetch products from any URL
• ✅ Grid or Carousel display
• ✅ Multiple sorting options
• ✅ Limit product count
• ✅ Multi-theme support
• ✅ Automatically inherits theme styles

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Products Feed | PapaThemes Beautify widget to the page
3. Widget displays loading indicator

2. Configuration¶

In the Design tab:

Products¶

Configuration Details¶

Product Page URL¶

Enter the URL of the page containing products:

/shop-all/
/categories/clothing/
/brands/nike/
/new-arrivals/
/sale/

Note: Only enter the path, not the full domain.

Theme Selection¶

Display Type¶

For Beautify Theme¶

• Grid: Grid display
• Carousel: Slider display

For Eyeva Theme¶

• Grid: Standard product grid
• Carousel: Blaze Slider carousel

For Others Theme¶

• Uses theme's default template
• Can customize template path

Sort Options¶

Product Limit¶

• Min: 1 product
• Max: 50 products
• Recommended: 4-12 products

Advanced Configuration (Others Theme)¶

When selecting "Others" theme:

Render with Template¶

• Enable to use custom template
• Enter template file path

Template Path¶

category/product-listing
products/card
custom/product-grid

Product List Selector¶

CSS selector to find product container:

.productCarousel, .productGrid
.product-list
.products-container

Usage Examples¶

New Arrivals¶

URL: /new-arrivals/
Theme: Beautify
Display: Carousel
Sort: Newest Items
Limit: 8

Best Sellers¶

URL: /shop-all/
Theme: Eyeva
Display: Grid
Sort: Best Selling
Limit: 4

Sale Products¶

URL: /sale/
Theme: Others
Template: category/product-listing
Selector: .productGrid
Sort: Price: Ascending
Limit: 12

Eyeva Carousel¶

When using Eyeva theme with Carousel:

Default Configuration¶

{
    "all": {
        "slidesToShow": 4,
        "slidesToScroll": 4,
        "slideGap": "32px"
    },
    "(max-width: 800px)": {
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "slideGap": "16px"
    },
    "(max-width: 550px)": {
        "slidesToShow": 2,
        "slidesToScroll": 2,
        "slideGap": "16px"
    }
}

Navigation¶

• Previous/Next buttons
• Pagination dots
• Pause/play support

Error Handling¶

No Products¶

Widget displays message:

"Please input the page URL to fetch products."

Invalid URL¶

Widget displays error:

"Request error (status). Please make sure your theme exists and the template file exists."

Template Not Found¶

Check: 1. Template path is correct 2. Template file exists in theme 3. Theme is active

Cookie Handling¶

Widget automatically handles lastVisitedCategory cookie: - Saves original value before fetch - Restores after loading complete - Doesn't affect analytics

Performance¶

Lazy Loading¶

• Products load asynchronously
• Shows loading spinner
• Doesn't block page render

Caching¶

• Browser cache for requests
• Stencil template cache

Notes¶

1. URL must exist: Ensure URL leads to a page with products
2. Matching theme: Select the correct theme being used
3. Template path: Verify template path carefully
4. Reasonable limit: Don't load too many products (affects performance)
5. Sort: Some sort options may not work with all URLs