How to Add a Search Box to the Mobile Responsive Screen

In current themes, when you're viewing the site on a mobile device, the search box isn't available. This is because the responsive CSS causes it to disappear. This article explains how you can add it.

Applies to Version(s): 3.8.1 - 3.8.2r3 (or Current)

Complexity Level: Medium

Estimated Time for Completion: 15 minutes

Inserting the HTML.

Now, you can place the HTML for your search box where you'd like it to be placed. However, I do recommend placing it in home.html because this will insert it right about the home page image, which is a good spot on mobile. Keep in mind, with what we're doing here, it will only show up there on mobile devices. Full screen monitors will not display the box we're adding here, but will retain whatever search box you have in place.

Go to Design > Cart Designer.

Right-click on your home page image and select Edit Source.

Place your cursor at the end of line 1 and hit enter. On line 2, paste in the following HTML:

<div class="search-main {class file=$smarty.template editable=true}">
        <form action="{$url_http}" method="get">
            <input type="hidden" name="p" value="catalog"/>
            <input type="hidden" name="mode" value="search"/>
            <input type="hidden" name="search_in" value="all"/>
            <input id="search-field-inner"  maxlength="256" type="text" name="search_str" value="{$search_str|htmlspecialchars}" placeholder="Search Store"/>
             {button class="button-start-search" text=$msg.buttons.buttonStartSearch file=$smarty.template}
        </form>
</div>

Click Save. When the page refreshes, you will see an un-stylized search box.

Inserting the CSS.

Next, you will want to add the CSS to make it disappear at bigger screen widths, and also CSS to make it look nice. In Cart Designer, go to Advanced Settings > Edit custom CSS and paste in the following:

.search-main form input#search-field-inner {
   border: medium none;
   box-shadow: none;
   float: left;
   font-size: 12px;
   font-style: italic;
   height: 38px;
   outline: medium none;
   padding-left: 10px;
   width: 180px;
}

This CSS provides the same styling that is used on the default search box in the Dress Code theme. You can modify it as you need to match your overall website styling. Now copy and paste in the following:

@media screen and (min-width: 480px) {
    .search-main {
        display: none;
    }
}

This CSS will cause the search box to not appear on screens wider than 480px, making it responsive.

Click Save and refresh the page. To test if this works, shrink down you browser size until you see the search box appear.

Links to Related Articles.

None at this time.

If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support

Was this article helpful?
0 out of 0 found this helpful