There are a few ways you can reorganize the products. First, you can go to Settings -> Store. In here, you can choose how the products are displayed (list of all products vs. categories; precedence vs. alphabetical). In the center, there are three options, List Layout, Category Grid Layout, and Product List Layout. List Layout will display all products in the order that is determined on the right-hand side (Precedence will display based on the product ID, while Alphabetical will display the products alphabetically). Also note: products are grouped up with other products in their category. The category order can be changed in Store -> Categories (you can drag & drop the categories into desired precedence here).
The second option (Category Grid Layout) will only display the product categories, and to see the products within, you have to click on the category. The categories are arranged based on Precedence or Alphabetical, depending on which option you chose. The products displayed once you click on the category will also be displayed in the same format.
The third option (Product List Layout) will display each category ordered by precedence as a list (no pictures) with a bulleted list underneath them of all the products in their respective categories. The products will be displayed in an order determined by precedence or alphabetical (depending on which you choose).
The second way you can organize is by putting all the products that you want displayed higher on the list in their own category. Then, you can put that specific category at the highest categorical precedence (Store -> Categories).
The last way to reorganize your products is to use CSS code while selecting the "List Layout" option. With this code, you can directly determine the order of the products. First, add this css to your page:
Code: Select all
flex-flow: row wrap;
This will open the option for you to determine the order of your products on all major browsers. Now to order your products, you will have to target the products by using "product-list-<PRODUCT ID>". For example:
This will set the product with ID 1011 to the first postition. NOTE: If a product is not given an order number, it will be pushed up on the list. The ordered items will come AFTER the unordered items.