Search form
About Shopify Search Form Element
Summary: Shopify Search Form element is designed to facilitate customer searches on your online store. It provides a user-friendly interface for customers to easily locate specific products or content.
It's especially beneficial when customers frequently engage in searching activities while exploring your store, as it simplifies the navigation process and contributes to a smoother shopping experience.
For more information, please refer to this video tutorial:
How To Access Search Form Element
To access the Search Form element on your Shopify store, follow these steps:
Step 1: Click on the Element icon on the left menu
Step 2: Switch to Shopify tab
Step 3: Click on the Search Form element in the dropdown menu
Step 4: Drag and drop the element into the page editor and then start using it.
The Search Form element comes with 4 variations.
Note that you can search for this element by using the search function instead of finding it in the sidebar.
The parameters in the General and Styling tabs are specific for this element.
How To Configure For Search Form Element
Search Form Element comes with a couple of parameters allowing you to fine-tune content appearance to reach the best possible conversion rate.
Select the element in the layout to see its parameters.
The parameters in the General and Styling tabs are specific for this element.
General Settings
Legacy Editor
Search In Product only: Enable / Disable the scope of the search in the product only
Field Input: Set up the Field input for the placeholder
Icon Type: Select a type for the search icon
Icon Size: Resize the search icon (from 8px to 160px)
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here.
Gen 2 Editor
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).
In addition to the settings available in the Basic section, when using the Search Form Button in a Flex section, you can choose the "Align Self" option with three styles to align the content:
Top
Center
Bottom
Styling Settings
Legacy Editor
Using the Styling tab, you can customize the appearance of your Blog post meta element to fit your brand's visual identity. This tab provides tools to modify various design aspects such as typefaces, hues, dimensions, and layout spacing. These options allow you to create a professional and visually appealing presentation of your blog post information.
For more detailed information on styling elements, consult the PageFly Element Styling guide.
Gen 2 Editor
When using the Search Form Button in a Flex section, you can adjust two main settings: Size and Layout.
Size: You can change the Width and Height of the button. Each can be set to one of three options: Fill container, Hug Content, or Fixed Width/Height. For more options, like setting minimum and maximum sizes, click "More Settings". Check the PageFly Element Styling guide for more details.
Layout: You can adjust how the content inside the button is arranged, including the direction, order, spacing, and alignment. For full details, see the PageFly Element Styling guide.
Common Cases
When integrating a Shopify search form element, one common issue that can arise is the search form not being easily accessible to users. This problem often occurs when the search form is hidden or not prominently displayed on the store's website. To address this, it's essential to ensure that the search form is placed in a visible location, such as the header or navigation menu, where users can easily find it.
Frequently Asked Questions
What is Shopify Search Form?
Shopify Search Form, or Shopify Search Bar element is designed to help your customer look for something in your store with ease, which helps shoppers to navigate better.
Why should sellers add Search Form to Shopify page?
The Shopify Search helps to deliver results for every search, which could help to increase average order value, as the recommendations would appear to suggest any product page.
Additional Resources
Last updated
Was this helpful?