How to Customise your Shopify Store - Search Input

How to Customise your Shopify Store - Search Input

Customising the search input on your Shopify store can enhance the user experience by making it easier for customers to find what they're looking for while ensuring the search bar aligns with your brand's style. Here’s a step-by-step guide on how to do it:

How to Customise Your Shopify Store's Search Input

Step 1: Access Your Shopify Admin

  1. Log in to your Shopify account.
  2. Once logged in, you’ll be directed to your Shopify admin dashboard.

Step 2: Navigate to the Theme Customiser

  1. From the Shopify admin dashboard, go to "Online Store" and click on "Themes."
  2. Locate your current theme and click the "Customise" button to open the theme customiser.

Step 3: Locate the Search Input Section

  1. In the theme customiser, find the section related to the search input. This may be under "Header," "Navigation," or a specific "Search" section depending on your theme.
  2. Click on this section to open its settings.

Step 4: Customise the Search Input

  1. Placeholder Text: Adjust the placeholder text to make it clear and inviting. For example, you might use "Search for products..."
    • Look for an option labelled "Search placeholder text" or similar.
  2. Input Field Style: Customise the style of the input field to match your brand. This includes:
    • Font: Choose a font that aligns with your store's typography.
    • Size: Ensure the input field is large enough to be easily used but fits well within your design.
    • Colour: Set the background and text colour of the input field. Ensure there is enough contrast for readability.
  3. Border and Radius: Adjust the border style and radius to fit your theme's aesthetic.
    • Add a border if you want the input field to stand out.
    • Adjust the radius for rounded corners if that suits your design.

Step 5: Customise the Search Button

  1. If your search input includes a search button, customise its appearance as well.
    • Icon or Text: Decide whether you want an icon (like a magnifying glass) or text (like "Search") for the button.
    • Colour: Choose a button colour that stands out but complements your theme.
    • Size: Ensure the button is appropriately sized for easy clicking.
  2. Adjust the padding and margin around the button to ensure it fits well with the input field.

Step 6: Add Custom CSS (Optional)

  1. If you need more advanced customisation, you can add custom CSS.
  2. In the theme editor (accessible through "Online Store" > "Themes" > "Actions" > "Edit code"), open the CSS file (often named theme.scss.liquid or similar).
  3. Add your custom CSS at the bottom of the file. For example:
    css
    .site-header__search-input { background-color: #ffffff; border: 1px solid #cccccc; border-radius: 5px; padding: 10px; } .site-header__search-button { background-color: #007bff; color: #ffffff; padding: 10px 15px; border: none; border-radius: 5px; }
  4. Save your changes.

Step 7: Preview and Test

  1. After making your customisations, click the "Save" button in the theme customiser to apply the changes to your store.
  2. Preview your store to ensure the search input looks as expected across different devices (desktop, tablet, and mobile).
  3. Test the search functionality to make sure it works correctly and is user-friendly.

Conclusion

Customising the search input on your Shopify store can significantly enhance the user experience and ensure your store’s design is cohesive and aligned with your brand. By following these steps, you can create a search input that is both functional and visually appealing, making it easier for customers to navigate and find products on your site.

Back to blog