EasyStore integration with SP Page Builder gives you the power to design and customize your store and product pages the way you want. 

This documentation will guide you through the EasyStore Addons available, allowing you to create a highly customized product list and single product page for your online store.

To edit your product list page with SP Page Builder, log in to your Joomla backend dashboard. Navigate to Components > SP Page Builder Pro > EasyStore. 

Within EasyStore, you'll have the option to edit both the Storefront and Single Product pages using SP Page Builder for customization.

Storefront Page

Storefront Addons:

• Cart: Simplify the shopping process by allowing customers to view and manage their cart easily.
• Product List: Create dynamic and organized product listings for an engaging storefront.
• Search: Enable quick and efficient product searches to enhance user experience.
• EasyStore List: Combine various EasyStore addons seamlessly to craft the perfect product listings.
• Add to Cart: Streamline the buying process by letting customers easily add products to their cart.
• Add to Wishlist: Boost engagement and retention by allowing users to save their desired products.
• Availability: Keep customers informed about product availability to build trust and satisfaction.
• Badge: Highlight special promotions or product features with eye-catching badges.
• Category: Organize your products effectively to ensure an efficient shopping experience.
• Filter: Allow customers to refine their product searches based on specific criteria.
• Pagination: Create user-friendly navigation with pagination for large product listings.
• Price: Clearly display product prices, a critical element in the buying process.
• Ratings: Showcase star ratings to emphasize the quality of your products, building trust and credibility.
• Thumbnail: Present product thumbnails for quick visual recognition.
• Title: Display product titles clearly for easy browsing.

Filter Addon

By configuring the Filter addon settings as per your requirements, you can provide users with efficient tools to refine their product search, enhancing their overall shopping experience on your online store.

Creating Filter Items

You can create custom filter items to match the specific attributes of your products. Click on the + Add Item button to create a new filter item.

Title: Set a title for your filter to provide context and help users understand its purpose.

Filter Types: Choose from various filter types based on your product attributes:

• Categories: Filter by product categories.
• Price Range: Allow users to filter products within specific price ranges.
• Variants: Filter by product variants.
• Brands: Enable users to filter products by brand.
• Tags: Filter by product tags.
• Availability: Allow users to filter products by availability.
• Sorting: Provide sorting options for products.

Filter Style: Select the style for displaying your filter:

• List: Display filter items in a list format.
• Dropdown: Use a dropdown menu for filter items.

Show Title: Choose whether to display the title of the filter.

Show Count: Determine whether to show the count of items for each filter option.

Filter Items Placement

Specify how the filter items should be arranged:

• Row: Display filter items in a horizontal row.
• Column: Display filter items in a vertical column.

Product List Addon

The Product List addon provides a dynamic way to display your products within your eCommerce website. It acts as a versatile container, allowing you to add various addons such as product titles, thumbnails, and more. These addons fetch real-time data from your EasyStore, ensuring that your product lists stay up-to-date.

Save as Preset

One of the key features of the Product List addon is the ability to save your configurations as presets. This means you can design different product lists for various purposes, such as showcasing featured products, best-sellers, or items on sale. Once you've configured a product list to your liking, you can save it as a preset. This makes it incredibly efficient to reuse specific layouts 

Product List Settings

Presets: Select a preset from the dropdown menu if you've saved any. Presets are previously crafted Product List that can be saved for easy reuse.

Grid Column: Set the number of columns you want in your product list layout. This determines how many products appear side by side.

Grid Gap: Define the grid gap to control the spacing between products.

Limit: Specify the number of products to display per page. This setting allows you to control how many items appear on a single product list page.

Source: Choose the source of your products. You can display the latest products, featured items, best-sellers, those currently on sale, or related products based on your selection.

Category: Select a specific category from the dropdown menu to filter products within a particular category.

Enable Slide Show: Toggle this option on to create a product list slideshow. This feature adds a dynamic element to your product display.

Active Slide: If you've enabled the slideshow feature, specify the number of active slides to display at once.

Badge Addon 

The Badge addon in EasyStore allows you to apply badges to your product listings, drawing attention to special promotions, product features, or discounts. These badges serve as visual cues for customers, helping them quickly identify important information about your products.

Badge Addon Settings

Text: This setting defines the text that appears within the badge. You can choose from the following options:

• Sale: Use this option to indicate that a product is on sale.
• On Sale: Similar to "Sale," this option highlights products with ongoing promotions.
• %s Off: Select this option to display the discount percentage a product is currently offering.
• Custom: If none of the predefined badge texts suit your requirements, you can opt for the "Custom" option. This allows you to input your own custom text, providing maximum flexibility.

Thumbnail Addon

The Thumbnail addon in EasyStore dynamically fetches thumbnail images from your EasyStore product listings. It provided customers with a quick and convenient way to view alternate product images without clicking into the product details page.

Thumbnail Addon Settings

Switch to Alternate Image on Hover: When this option is enabled, it triggers an image switch effect when a customer hovers their mouse pointer over a product thumbnail. 

By default, this feature displays an alternate image associated with the product, allowing customers to see different angles, variations, or other aspects of the product without navigating away from the product listing page.

EasyStore Addons (Single Page)

The EasyStore Single Page addon for SP Page Builder brings a whole new level of convenience and style to your e-commerce journey. Dive into a world of enhanced functionality and visual appeal with this set of powerful addons.

• Add to Cart: Let customers easily add their favorite products to their cart, streamlining the buying process.
• Add to Wishlist: Enable users to save their desired products for future reference, boosting engagement and retention.
• Availability: Keep your customers informed about product availability, fostering trust and satisfaction.
• Category: Categorize your products effectively, ensuring an organized and efficient shopping experience.
• Description: Provide comprehensive product descriptions to help customers make informed decisions.
• Gallery: Showcase your products with a stunning image gallery, allowing customers to explore every detail.
• Price: Clearly display product prices, a crucial element in the buying process.
• Quantity: Show product availability, helping customers make purchasing decisions confidently.
• Ratings: Display star ratings to highlight the quality of your products, building trust and credibility. You can choose to show or hide review count and label. 
• Review Form: Encourage customers to leave reviews, enhancing social proof and boosting sales.
• Review Summary: Summarize product reviews to provide a quick overview of customer feedback.
• Reviews: Showcase detailed product reviews, allowing shoppers to learn from others' experiences.
• SKU: Display product SKUs for easy identification and inventory management.
• Social: Enable social sharing to expand your product's reach through social media.
• Specification: Highlight product specifications, helping customers choose the right fit.
• Tags: Enhance discoverability by adding descriptive tags to your products.
• Thumbnail: Present product thumbnails for quick visual recognition.
• Title: Display product titles clearly for easy browsing.
• Variants: Offer product variants like size or color, allowing customers to tailor their choices.