# Search form ### About Shopify Search Form Element Summary: [Shopify Search Form](https://help.pagefly.io/manual/shopify-elements-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: {% embed url="" %} ### 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. ![](/files/hvFr9vecriN5k3RTP1GZ) 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 | ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdTT6eOwDwJ58dUaQJMWb8W03-mpktHOZ0pQOx7GrmxpKN2g5415GzecqbD9rRHpCVlvlsbRSkZQ9lvkCnIzwSDjbTkZCLiU_HkWonmvQoJVeRppHDr7jx2R5Mxjt8nkgM1M1ImJOHeXryd808To_IR_R-U?key=A3ejN3Pgj_zU7wq14kYvBg) | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Field Input**: Set up the Field input for the placeholder | ![](/files/GwAo7KcyvnKGDiJ2CQMw) | | **Icon Type**: Select a type for the search icon | ![](/files/h0VRKu1xTcrRxJKajT3r) | | **Icon Size**: Resize the search icon (from 8px to 160px) | ![](/files/brnpLKVYrc7azfvhcGXr) | You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters [here](https://help.pagefly.io/manual/elements-general-settings/). **Gen 2 Editor** {% hint style="warning" %} **Important Note**: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ([slot plans](https://help.pagefly.io/manual/pricing-plans/)). {% endhint %} 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 ![](/files/kGVzYynSlP3PNFWirsV7) #### 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](https://help.pagefly.io/manual/elements-style-settings/) guide. ![](/files/y32rztMpcQWxZpdwepY0) **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](https://help.pagefly.io/manual/elements-style-settings/%23size-settings) guide for more details. ![](/files/JcoG8vqYDSL5iRzRvQdo) * 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](https://help.pagefly.io/manual/elements-style-settings/%23layout-settings) guide. ![](/files/87ThmIecFLBdoNYlayg2) ### 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 * [How to Use Shopify Customer Form](https://help.pagefly.io/manual/shopify-elements-customer-form/) * [How to Use Shopify Contact Form Field](https://help.pagefly.io/manual/shopify-elements-contact-form-field/) {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/page-structure-and-elements/shopify-elements/form/shopify-elements-search-form.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.