"RuffRuff 予約販売" supports the reduction of opportunity losses that occur when products are out of stock, new products are not on sale, or are on backorder.
It's incredibly easy to create pre-orders on your Shopify store, allowing you to register an unlimited number of pre-order products and accept unlimited pre-orders. You can also restrict people from ordering pre-order items and regular items at the same time, or send notifications when the item will be back in stock if it is not yet determined.
There are many unique features that are not found in other pre-order sales apps, such as the "Pay Later" feature that allows you to collect payment before the product is shipped.
Shopify collection pages play an important role in effectively displaying your products and improving your customers' shopping experience. However, sometimes too many or unnecessary sort options are displayed, which can impair the user experience.
This article provides step-by-step instructions on how to hide specific sort options on your Shopify collection page. This allows you to create collection pages that are simpler and easier to use.
Prerequisites
Target theme
The content of this article is based on Dawn 8.0.0.
Target page
Collection page
Goal
Hide unnecessary items from the sort options
This time, I would like to hide the sort options "Alphabetically, A-Z" and "Alphabetically, Z-A".
Output
By using the method introduced in this article, you will get the following output.
Before hiding
After hiding
How to hide sort options
There are two steps to hide them.
- Identify the value of the sort option you want to hide
- Customize the source code
I will explain each step
1 Identify the value of the sort option you want to hide
Here are the values for each Shopify sort option.
- Featured → manual
- Best selling → best-selling
- Alphabetically, A-Z → title-ascending
- Alphabetically, Z-A → title-descending
- Price, low to high → price-ascending
- Price, high to low → price-descending
- Date, old to new → created-ascending
- Date, new to old → created-descending
The sort options I want to hide this time are "Alphabetically, A-Z" and "Alphabetically, Z-A", so the values are title-ascending and title-descending.
2 Customize the source code
2-0. Sample code
Sample code 1 (when there is one sort option you want to hide)
Sample code 2 (when there are multiple sort options you want to hide)
2-1. Open the code editing screen
Shopify admin > Online Store > Click “Edit code” for the target theme
2-2. Edit the main-collection-product-grid.liquid file
- Search for “collection” from the search window at the top left of the code editing screen and open “main-collection-product-grid.liquid”
- Search for “sort_options” in “main-collection-product-grid.liquid” and identify the part to edit.
-
Edit the source code as shown in the attached image
*This time, we want to hide two items, so we will use sample code 2.
2-4. Edit the facets.liquid file
- Search for “facets” from the search window at the top left of the code editing screen and open “facets.liquid”
-
Search for “sort_options” in “facets.liquid” and identify the part to edit.
*There are multiple applicable locations in "facets.liquid", so please change them all. -
Edit the source code as shown in the attached image
*This time, we want to hide two items, so we will use sample code 2.
Finally
By customizing the sort options on the collection page, you can achieve the optimal display that matches the characteristics of your store. Using the method introduced in this article, you can hide unnecessary sort options and display only the options that are important to your customers.
However, depending on the theme version and customization status, the location and writing style of the code may differ slightly. Please carefully review your theme's source code and make edits where appropriate.
The blog article below introduces several ways to customize collections in addition to hiding sort options. Please use it as a reference.
