Is there a way to add a link to customer login on a page that has a hidden header?
Thanks - Iām using Horizon.
In a similar fashion, is it also possible to add the cart icon/link, and maybe even the cart product count, at the top of a page without a header? Thanks again!
Thank for the info.
Iāve added an image banner at the top of the page template that does not have a header or footer. Under that I added a multicolumn section, with three cells/blocks, and place a text link āCartā in the right cell, and a login link in the middle cell. In mobile view, these cells are stacked, and take a lot of space, while the banner adjusts to fit the page width. Is there a way to have the cart link always appear, just under the banner image, on the top right of the page, and the login link always at the top centre?
First time on here, and just in the initial Shopify trial period. I believe you are requesting my email to provide additional assistance. Is there a way for me to share an email without posting here?
is that accomplished here? (clicking on the arrow under your post)?
Hi @newcm
Welcome to the community.
And first thing, do not share your email with anyone, especially with new accounts. There are a lot of scammers around who create multiple accounts. It is also againt the rules to move the subject outside of tipic if not completely necessary. Also, if you givving an access to your stoe with a collaborator account, be careful what permissions the developer asks. For example, if you need a theme change and theyask app install permission, also, also think about it. And search the documentation and the forum.
For your question, first, you are duplicating some functionality but I guess you have to. And if you know a bit of code, you could use
{% render 'header-actions' %}
Maybe inside a div with a custom id or class that you can target and style. Or just do the same, but add a Custom liquid section. You will have to do some styling for sure.
Test it out on non live theme.
Thanks for the info. On what page do you recommend I place that code, if I want it on some product pages, some collection pages, and some custom pages? Do I place it in the json template pages, or in the liquid pages?
{% render 'header-actions' %}
Does this seem like the correct approach?
Step-by-Step: Add Cart Link via header-actions on Product Page (No Header)
-
Open the product section file
Online Store ā Themes ā Edit code ā Sections ā main-product.liquid -
Insert the render snippet in a positioned wrapper
Place this code near the top of the file (e.g., right after the openingor inside your main product grid/container, but outside any conditional hidden blocks):liquid
<div class="product-page-cart-access" style="position: fixed; top: 1rem; right: 1rem; z-index: 1000;"> {% render 'header-actions' %} </div>-
position: fixed keeps it visible in the top-right corner even when scrolling.
-
z-index: 1000 ensures it stays above other elements (adjust if needed).
-
This re-uses Horizonās exact cart component: icon + bubble (updates live via cart events) + click opens the drawer.
-
You did not explain why you had to hide the header in the first place, and now, what is the condition on which pages you want to show the second one and if I understood correctly, in the header?
I am attempting to see if it is possible to make a few pages that are isolated from the rest of the website. So my plan is to make a product template, and a collection template, both with the header and footer hidden (already accomplished), as I want to prevent the shopper from navigating to the main site categories and products, but I still want them to be able to log in/join and checkout function so they can purchase the specific products in these isolated categories and product pages. So I need to replace the login and cart to the top of these specific pages.
What Iāve tried so far: I added a multi-column block, just under an image banner, at the top of the product template, and placed liquid code in one column that added the login feature, and I was simply going to add a text link to the cart page in the other column. I believe this will function well enough, but it does not look as clean as Iād like, especially in mobile view, as the login and cart link end up stacked, rather than staying just below the image banner. I am hoping to find a way to position the login and cart link on the pages basically in the same location theyād be if I still had the standard header on these pages.
I found a couple of suggestions online. One is to add a liquid code section where I want the cart to appear. (see code A below). I tried this but it did not work. I suspect I need to edit something in the code, to make it specific to my site, but Iām not sure what. I am also concerned this approach will still stack in mobile view.
I also found the suggestion I pasted above in a previous comment on this post. I attempted it but got an error. Again, I feel this may stack.
I like what you suggested, to duplicate the functionality with a bit of code; {% render āheader-actionsā %}. Iām just not sure if I have enough skills to implement it successfully. 
Code A:
{{ cart.item_count }} .standalone-cart-link { position: fixed; top: 20px; right: 20px; z-index: 9999; background: #fff; /* Match your brand */ padding: 12px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; color: #000; } .cart-count-bubble { position: absolute; top: 0; right: 0; background: #ff4d4d; /* High contrast color */ color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; }Iām not sure how to paste the code so it appears in the correct format. Here is an image of āCode Aā. Iāll try again here:
{{ cart.item_count }} .standalone-cart-link { position: fixed; top: 20px; right: 20px; z-index: 9999; background: #fff; /* Match your brand */ padding: 12px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; color: #000; } .cart-count-bubble { position: absolute; top: 0; right: 0; background: #ff4d4d; /* High contrast color */ color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; }Iād also be fine with the login and cart text link as I currently have it, if I could get them to remain at the top of the page, scale to the page, and ideally not stack. Maybe they could be centred just under the banner so I donāt really need to worry about scaling.
Well, I think you could have hidden just a menu from header. For example add a condition, something like
{% unless template.suffix == 'your_custom_product_template' %}
{% endunless %}
That way you get same design for all pages, do not make duplicate code. Do not worry about placement and styling, mobile viewā¦
For code use </> icon in editor where you post your message and code, but that does not mean much if we do not see your site, really.
Just hiding the menu sounds like a good solution. I didnāt know that was an option. I thought it had to be the entire header. Iāll try that. Thanks for the suggestion.
Just a reminder that hiding things like menus and headers to hide other parts of your site wonāt prevent browser navigation. This is not isolating, this is just making things not visible on the page.
Thanks for your comments. So do you mean, with the header hidden, a shopper canāt use the menu links to navigate, but if they typed, for example āsitename.com/aboutusā they could navigate that way? Would using an app like LockSmith help, or would it be more of the same?
Yes thatās exactly what is going to happen. Iām not sure if Locksmith is able to provide the kind of lockout youāre looking for, but itās worth a try.
It is not a big issue if someone was to navigate around my efforts to isolate, as I am mostly doing these things to avoid shopper confusion. Iām just trying to figure out the best way to do it.
Do all methods of removing the header and footer, such as using conditional logic, simply hide them rather than remove them?