Since each Shopify theme and frontend setup is unique, we do not provide any styling guidance. However, you can set up the environment for creating your own custom UI by following these steps:
1. Navigate to your theme code files.
2. Create a CSS file under the Assets folder.
3. Click on the "Create a blank file" tab, select the css extension, and type the desired file name (e.g. "algolia_custom").
4. Ensure the file (e.g. "algolia_custom.css") is created in the Assets folder.
To instruct the theme.liquid
file to reference the algolia_custom.css
file, navigate to the theme.liquid
file, line 358, and copy & paste the following code:
{{ 'algolia_custom.css' | asset_url | stylesheet_tag }}
6. You can now modify the algolia_custom.css
file to test if changes are reflected in your theme preview. For example:
//Changing the search results background color
.ais-Hits {
background-color: #FFC0CB;
}