Concept Theme - Adding additional search bar

Store Design

Topic summary

A store owner wants to add a functional search bar to a landing page containing shipping date information for products. The goal is to allow customers to search and filter content within that specific page section.

Current Status:

  • Successfully added the search bar HTML/CSS to the page
  • The search bar appears visually but lacks functionality
  • Cannot link the search input to filter/search the content below it

Technical Details:

  • Working with a Concept theme store
  • Custom code includes styled search input with responsive design
  • Landing page URL and current code provided for reference

Recommended Solution:

  • Implementing search functionality requires modifications to the theme’s liquid files
  • Suggestion to hire a developer to properly customize the feature and avoid errors in the theme’s JavaScript files

The issue remains unresolved and requires developer expertise to implement the search logic.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi, I was looking to adding an additional search bar in the body of a landing page where I have a lot of information about shipping dates about my products & would like my customers be able to search for the items in this section. I was able to input the search bar above it, but I’m having trouble linking it to search up the results below in that section. Can someone assist with this?

haleysubk_0-1739903681423.png
haleysubk_0-1739903681423.png2168×990 171 KB

Landing Page: https://www.subkshop.com/pages/shipping

My current code:


Want to find the latest updates?

.topnav { overflow: hidden; background-color: #FFFFFF; }

/* Style the links inside the navigation bar */
.topnav a {
float: center;
display: block;
color: black;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Style the “active” element to highlight the current page */
.topnav a.active {
background-color: #2196F3;
color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
float: center;
padding: 6px;
border: none;
margin-top: 8px;
margin-bottom: 16px;
margin-right: 16px;
font-size: 17px;
border: 2px solid #ccc
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 2px solid #ccc;
}

Any help or suggestions would be greatly appreciated!

2

Hi @haleysubk

Regarding the issue of adding functions to the store, the functionality needs to be directly implemented into the theme’s liquid file. You should hire a developer to customize the functions for the store and avoid errors in the theme’s JS file.

Best

Daisy