We have /search and /cart views as I can see while editing the online store. But I can’t figure out how do I link those views on the website. On the header, I see the search icon but it just open a modal for search, i want it to redirect to /search view. Also when we tap on the cart icon, we see the modal from right, instead I want user to give them the option to go to /cart view. right now we don’t have any way yo access /cart view
Hi @shubham04 
I understand exactly what you want — instead of the search and cart modals, you want the icons in your header to redirect to the full /search and /cart pages. This is doable with a small change to your theme.
Here’s how:
Link Search Icon to /search
-
Go to Online Store → Themes → Actions → Edit Code.
-
Open header.liquid (or the section that contains your navigation/header icons).
-
Locate the search icon link, it usually looks something like:
<button class="search-toggle" type="button">
<svg>...</svg>
</button>
- Replace the button/modal trigger with a link to the search page:
<a href="/search" class="search-link">
<svg>...</svg>
</a>
- This will redirect users to
/searchinstead of opening a modal.
Link Cart Icon to /cart
- In the same header.liquid file, find the cart icon/button, which may look like:
<button class="cart-toggle">
<svg>...</svg>
</button>
- Replace it with a direct link to the cart page:
<a href="/cart" class="cart-link">
<svg>...</svg>
</a>
This disables the slide-in cart modal and takes users straight to
/cart.
Optional: Keep Mobile/Desktop UX
-
Some themes show the modal on mobile and a page link on desktop.
-
You can wrap the
<a href="/cart">in media queries if you want different behavior per device.
Tip: Always duplicate your theme before editing, and test both icons after making the changes to make sure navigation works properly.
Hi there,
By default most Shopify themes open a search modal and a cart drawer instead of linking to the full pages. That’s why you can’t reach /search or /cart directly from the icons.
If you’d like them to go straight to those views, you’ll need to adjust your theme’s header code:
-
In
header.liquid, replace the search button with a link like:<a href="/search">Search</a> -
Do the same for the cart icon, linking it to
/cart.<a href="/cart">Cart</a>
That way, clicking the icons will take users directly to the /search and /cart pages instead of opening the modals.
Hi @shubham04,
1: For search page: Please go to Actions > Edit code > snippets > search.liquid file and change code here:
Code:
<a
href="{{ routes.search_url }}"
class="button button-unstyled search-modal__button header-actions__action"
aria-label="{{ 'accessibility.open_search_modal' | t }}"
>
<span
aria-hidden="true"
class="svg-wrapper"
>
{{ 'icon-search.svg' | inline_asset_content }}
</span>
</a>
2: For cart page: Please go to Customize > Theme settings > Cart > Type ‘Page‘. You just need to change this option.
Thanks for the guidance! I also wanted to ask how can I implement both the option means on the cart drawer, i get two options like “proceed to checkout“ which redirect to /checkout page, and “view cart“ which redirected to /cart view.
Hi @shubham04,
I don’t understand, are you trying to add a ‘view cart’ button, or what?
Hi, thanks for replying. So if we tap on bag icon on the top right which keeps showing us number of items added. What I want is it should open the dialog only, but there we get 2 options, one is to go to cart view and another to go directly to the checkout view.
Please checkout the reference in the image below
Hi @shubham04,
You want to click on the cart icon, it will show the drawer and 2 buttons ‘proceed to checkout’, ‘view cart’
Hi @namphan
yes , that’s what I want
Hi @shubham04,
Can I send you a collaborator invite? I will check and add it.
Hi @namphan Sure, please send the invite
Hi @shubham04,
Please send your collaboration code and store link in private message, I will send you invitation and check it soon
I have sent you the code. Please check.
Thank you