*Note: The "standard page" feature currently only supports the Ultra Chic theme template. With regards to systematic layout concerns, this feature will not be available for merchants who use the layout engine and whose HTML Editor contains the "products.liquid" file.
SHOP Builder-powered advanced pages support "standard page", allowing you to comprehensively adjust the layout of all advanced pages down to the finest details. Within the "product listing page layout" feature, you can arrange the layout of widgets, and adjust their format and placement. Furthermore, you can also insert relevant texts to propel SEO effectiveness.
In this article, you'll find:
- Go to the "Product listing page layout" editor
- Adjust product listing page layout
1. Go to the "product listing page layout " editor
In the SHOPLINE Admin, go to [Online Store Design] > [Pages] > [Standard Page], and click Edit on the right of "Product Listing Layout".
You will enter the editor for the product listing page layout.
Click on the drop-down list above the preview window to switch between the product listing pages you want to view (these pages are the categories you set in the Admin > [Product & Categories] > [Categories]).
- The product listing page layout editor does not support SEO settings on the left sidebar.
- If you have enabled the layout engine for online store design, you will not be able to use the standard page. To edit the layout with the standard page, you need to delete the file: "products.liquid".
2. Adjust product listing page layout
In the product listing page editor, you can edit the "Announcement bar", "Header", "Footer" and other widgets. The Announcement bar, Header, and Footer share the same setting steps and effects as that of SHOP Builder. In this section, you'll be introduced to the settings of other widgets.
In the product listing page layout, widgets can be divided into fixed widgets and movable widgets (which have a gray background). The fixed widget cannot be repositioned, while the movable widget can be adjusted, added, or removed.
i. Fixed widgets
Fixed widgets cannot be repositioned, added, or removed. You can only adjust the content.
*Note: This feature only supports the desktop version and does not support the mobile version.
You can set the breadcrumb navigation for your product listing page. After you switch on the "Enable breadcrumb" toggle, customers can see their trail on the top when browsing product categories. You can set the breadcrumb aligned to the left/center/right.
- Example of breadcrumb:
To set a banner, you have to go to Admin > [Products & Categories] > [Categories] and select the category you want to edit. Click Go to Set Up to immediately proceed to the setting. For more details on setting banners, please refer to Set Up a Product Category.
C. Side Menu
- Category Menu
*Note: This feature only supports the desktop version and does not support the mobile version. To adjust the mobile side menu, please go to "Store Settings" for further settings.
Open the "Category Menu" drop-down list and you can see the "Enable category menu" toggle. After switching on the toggle, the category menu will be displayed on the storefront. Switch the toggle off and the category menu will not be displayed.
- Online Shop Filtering
To set up online shop filtering, you have to go to Admin > [Products & Categories] > [Categories] and click Online Shop Filter. Click Go to Set Up to immediately proceed to the setting. For more details on online shop filtering, please refer to Shop Category Advance Filtering.
Switch on the "Enable Title" toggle to display the title of the product category. Switch the toggle off and the title will not be displayed. You can also set the title text to align left/center/right.
You can adjust the language and style for the product sorting options.
For the style, you can choose between Text, Icon, or Icon & Text.
ii. Movable widgets
Movable widgets can be repositioned vertically. You can adjust the widget's content and add/remove new ones. Among them, the "Description" and "Product list" widgets can only be repositioned and adjusted, but cannot be added/removed.
You can insert a custom description in your product listing pages for marketing and SEO optimization.
- Add a description in a category page:
Please proceed to Admin > [Products & Categories] > [Categories], and click Edit on the right of the category you want to set.
- Add a description in the "Shop All" page:
Please proceed to Admin > [Online Store Design] > [Pages], and click Edit on the right of the "Shop All" page.
Enter the custom content in the "Category Description" box, then click Update to complete adding the description.
- Example of Description
B. Product list
You can adjust the text language, image proportion, and products per column (horizontal) of the product list.
- Language: You can choose a supported language.
- Product Image Proportion: You can choose rectangular (3:4) or square (1:1).
- Product Per Column (Desktop): You can choose from 1 to 5 products per column.
- Product Per Column (Mobile): You can choose 1 or 2 products per column.
C. Other movable widgets
Other movable widgets, which can be added and removed, are the same as those of SHOP Builder, as the following:
- Content: Text Widget, Gallery Widget, Slider Widget
- Product: Category Widget
- Extention: Subscription Widget
*Note: If you would like to know more about the widgets, you can click the above links to read the FAQs.
After adjusting the layout for the product listing page, you need to publish the layout for the settings to take effect. Click Publish in the upper right corner.
If this is the first time you edit the product listing page layout, the system will remind you that the layout will apply to All Products (Shop All) page, "Categories" page, and "Search results" page. Please note that your original settings on the product listing page will be replaced with the newly adjusted settings once you apply the layout. Click OK to publish the layout.
- Announcement Bar / Header Settings | SHOP Builder
- Footer Setting | SHOP Builder
- SEO Settings | SHOP Builder
- Store Settings | SHOP Builder