Skip to main content

Manage your template: Product list

In this article, we show you how to customize your Product List in your template.

Thomas Ta avatar
Written by Thomas Ta
Updated over a week ago

๐Ÿ“– In this article, we will show you how to use Turbo's Visual Editor to edit your product list presentation.

โš ๏ธ This feature is only applied to customers using the Boost app's TURBO version.


To customize the Product List

Follow these steps:

  1. From the appโ€™s dashboard, click on the Integration icon > Shopify integration.

  2. Find the template you want to modify, then click on Customize or Add new template to open the Visual Editor tool.

  3. Click on the Product List icon in the Icon sidebar to open the Product List panel.

Screenshot 2024-04-25 at 00.33.46.png

Layout

1. On the Layout panel, you can customize your listing:

Left sidebar.png
  • Products per page: You can choose the number of products on one page (max: 50 products).

  • Products per row (desktop): You can choose the number of products per row on the desktop (max: 6 products).

  • Products per row (mobile): You can choose the number of products per row on mobile (max: 2 products).

2. Click the Save button to save all the changes you have made.

Collection Header

To customize the Collection header:

  • Enable Collection header

๐Ÿ’ก The Collection title always displays when you enable the Collection header.

Content position

Options for content position depend on the Collection header layout. You can change the Collection header layout in the Layout Library.

Text field.png

  • Click the Save button to save all changes you have made

Note: Show product count: Enable product count below the collection title.

๐Ÿ’ก To update the text of product count, click on the Settings icon > Translation > Products tab > Under the Toolbar, update the Product count and Product count plural fields.

  • Show collection description: You can provide a short description of the collection right below the product count.

  • Show collection image: Enable collection cover image.

  • Collection image size: there are 4 options:

    • Small

    • Medium

    • Large

    • Original: The image will be shown in its original size

  • Click the Save button to save all changes you have made

Breadcrumbs

Toggle it ON to enable these settings below.

  • Show collection list: Once ticked, it will display the collection list option to help your users redirect to the All collection page

  • Show collection title

  • Show pagination: In case youโ€™d like to optimize your Search Engine Optimization on your Breadcrumbs, turn on this option.

Breadcrumbs placement

There are 2 options:

  • On top, you can change Alignment for Breadcrumbs

  • Above title

Alignment

  • Left

  • Center

  • Right

Toolbar

  • View as: When enabled, your customer will have the option to display the products list as grid view or list view.

    • View as display feature is only available for Default templates that have a 'List View' function.

Screenshot 2024-04-25 at 01.04.34.png
  • Product count: Displays the total number of products in the collection.

  • Show Limit per page: Enable the option to display a certain number of items per page on your storefront.

  • Sort by: By enabling this setting, you can apply the Sort by options feature to the collection page and search page.

  • Click the Save button to save all changes you have made

Pagination

Pagination splits long product lists into smaller chunks so shoppers can browse and find items more easily on your site.

Where it applies

  • Collection pages

  • Search results pages

Types

  • Page links โ€” Numbered pages with Next/Previous controls.

  • Load more โ€” A Load more button appends the next set of items without leaving the page.

  • Infinite scroll โ€” More items load automatically as the shopper scrolls.

Screenshot 2024-04-25 at 01.23.05.png
  1. Page links: This is a standard pagination style that includes 2 main parts: numbers that link to each page of products and previous/next buttons.

  2. Load more: This pagination style replaces page links with a "Load More" button, which customers can click to display more products on the page.

  3. Infinite scroll: This style loads more products automatically as the user scrolls down the page, creating a seamless browsing experience without clicking any buttons.

Page links and Load more configuration

  • Pagination alignment

    • Align to left

    • Align center

    • Align to right

  • Show product count: Check this box to display the product count along with the pagination element.

  • Product count position

    • Above

    • Below

Screenshot 2024-04-25 at 01.27.24.png

๐Ÿ’ก To update the text of product count, go to Settings icon > Translation > Products tab > Under the Pagination, update the Product count and Product count plural fields.

  • Click the Save button to save all changes you have made


Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.

Did this answer your question?