Product List Guide – Shop Page

What is Product List?

SureCart offers a flexible product list block to showcase a grid of your products in your store. This guide will walk you through the customization options and features available for your product list.

When you set up your store in SureCart, a default shop page named Shop — Sample Page is automatically created for you.

This page contains some sample product items, displaying them based on the chosen theme. You can always populate these with your own products later on.

You can find this page under the Pages section in your WordPress dashboard.

Product List Customization Features

SureCart provides a range of customization options to tailor your product list according to your preferences. Here are some key options:

1. Columns and Products per Page

You can choose the number of columns and products displayed per page to suit your layout preferences.

2. Pagination Options

If you have a vast array of products, you can enable the Paginate option for your products.

This adds new Next and Previous buttons, making it easier for users to move between pages.

It also displays a message showing the exact item count across multiple pages.

For example, the image below shows the text– Displaying 1 to 9 of 20 items. This means that your product list overall has 20 items and the current page is showing 9 of them.

You also have the option to modify your pagination font size.

Adjust the dropdown below to change the font size of the text message– Displaying 1 to 9 of 20 items and the size of the Next and Previous buttons.

2.1 Ajax Pagination

Ajax Pagination is a handy feature in SureCart that allows for faster browsing. When you turn it on, the page updates without reloading when you click Next or Previous.

This option is located just below Paginate. It cannot be activated unless Paginate is enabled.

When activated, it allows content updates without a full page reload.

When a user clicks on the Next/Previous page, the content is loaded dynamically, and only the relevant portion of the webpage is updated.

2.2 Scroll into View

When you go to the next or previous page, the Scroll into View option automatically takes you to the top of the page.

The page adjusts itself so you can see the important stuff without having to scroll upwards yourself.

This can be only activated if you have enabled Ajax Pagination. The page automatically goes back to the top only after loading the new content.

Here’s how the Scroll Into View feature will look on your website:

3. Sorting Filter

Sorting filters are helpful for your customers to navigate through your products easily. This feature becomes especially useful when you have a large number of items on your shop page.

Activate the Sort option. The filter will appear in the top-right corner of the product list block.

With this option, customers can filter your products by their latest additions, oldest items, or in alphabetical order, either from A-Z or Z-A.

4. Search Products

If you wish to provide your customers with the ability to search for specific product items within your list, you can activate the Search option.

The search bar appears in the top-right corner of your product list.

5. Choose the Products You Want to Display

Select which products you want to display on your product list. You can either show all, featured, or hand-picked products based on your preference.

6. Edit Individual Products

SureCart gives you the option to edit each product card individually.

Editing each product card individually allows you to customize how each item is presented, ensuring a tailored and visually appealing display.

You can access this editor by clicking on the highlighted pen icon:

After clicking on the pen icon, you’ll be directed to this interface:

You can do many things here, such as:

• Change the title text size and font.
• Update the images.
• Set price ranges.
• Manage the padding between items.

These, along with a variety of other options, allow you to achieve a polished and customized appearance for your products.

Integrating ShortCodes

For those who prefer shortcodes, SureCart provides the flexibility to configure your product list.

[sc_product_list] - Display a list of products in a grid.   
   "columns": It sets the number of columns, defaulting to 4.   
   "limit": It sets the maximum limit, defaulting to 15.   
   "pagination_enabled": It enables or disables pagination, defaulting to enabled (true).   
   "ajax_pagination": It activates or deactivates AJAX pagination, defaulting to enabled (true).   
   "pagination_auto_scroll": It turns on or off automatic scrolling when new results are loaded, defaulting to on (true).   
   "search_enabled": It allows or disallows the use of a search function, defaulting to allowed (true).   
   "sort_enabled": It permits or prohibits sorting functionality, defaulting to permitted (true).   
   "ids": The product ids you want to show here, separated by a comma.   
   type="custom": This is useful if you do not wish to display all of the products from the shop page on a page but only custom ones. 

If you want to add a product list to a page builder, use the following shortcode.

Ensure that the entire shortcode is on one line:

[sc_product_list columns="3" limit="9" ids="049627ac-f5e0-4157-a530-c4b2dbef82bb,c960b061-d321-43e3-a151-8c40b35f0c22,a114295c-198a-4e33-aa47-ab7d07172193" search_enabled="true" sort_enabled="true" type="custom"]

That’s it! We hope this guide helped you. Feel free to explore this feature on your own, and don’t hesitate to reach out to our support team if you have any further questions or feedback.