Concept Theme - Adding additional search bar

Store Design
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