Last week, the amount of abandoned carts shot up by 75% (ads I guess), and I am looking into optimizing my cart.
We use the Galleria theme, feel welcome to check out aroonasurf.shop for reference.
How do I remove the following from the cart page, while keeping it intact on the rest of the website, please?
My goal is to have the least amount of exits possible once people are in the cart.
A guess followed by a prescription is a good way to gamble away time.
You can just use CSS to not display elements on certain pages.
Keep in mind this is the type of thing that that should be a/b split tested.
Use a custom css setting
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
#shopify-section-announcement-bar,
#shopify-section-main-footer,
#cart-items-shopping-link,
#main-header-toolbar-link
{ display: none; }
When looking at the site there was no navigation in the header anyways beside the logo.
#cart-items-shopping-link is for the continue-shopping link.
#main-header-toolbar-link is for the cart count, removing another distraction.
Watch out for layout shifts when hiding substantial portions of a website.
Choosing to trap customers on a page can be a good way to decrease conversions, to increase bounces AND future bounces once someone remembers that last time they visited this site that trapped them.
Alternative is to just deemphasize those elements through other stylistic means like lowering opacity when not focused/hovered, scrolling activated sticky/fade-in-fade-out, or ensuring the carts main area is tall enough to fill the page and then use anchors to get to the right part of the view i.e /cart#main-footer-bottom ,etc.
(for some reason id anchors not working for me on that site /shrug)
Good Hunting.
Hi @PaulNewton
You’re on the money and I like your thinking. The site is showing menu and footer again, but the code you supplied won’t save, and didn’t remove the main menu:
Any ideas on how to save the mod, AND get rid of the main menu too?
Note: Your observations (A/B testing, opaque, etc) are all good, and I have taken notes.
Thanks again - looking forward to hearing from you!
Sacha
Error, Online Store editor session can’t be published
Be nice if the message just said what the catch was as there’s a lot of confusion on this:.
In this case it should just be useable by removing/replacing the selectors #shopify-section-announcement-bar and #shopify-section-main-footer with different selectors for the internal elements of those sections.
announcement-bar,
#main-footer,
#cart-items-shopping-link,
#main-header-toolbar-link {
display: none;
}
The error is from a limitation in the custom-css feature against using shopify-section in ID or class selectors for section-level custom-css rules.
Because a #shopify-section selector will get prefix to rules in a section custom-css setting and you’ll end up with selectors that wont work i.e. section-announcement-bar #shopify-section-announcement-bar :
So at least that’s documented but it’s wrong in that it’s not just section level now, you also can’t use them in a global custom-css for some bonkers reason.
If there’s a reason the shopify-section itself does need to be targeted such as removing padding or extra space, either use a custom-liquid section/block and put the rules in a tag inside a custom-liquid, or alternatively in only a global custom-css setting use a attribute selector of the suffix type [attr$=value] to get around the limitation.
[id$="-section-announcement-bar"],
[id$="-section-main-footer"],
#cart-items-shopping-link,
#main-header-toolbar-link {
display: none;
}
Hi @PaulNewton
Thank you! That worked a solid 70%. The code was allowed to be saved and the notification bar & footer are gone.
How can I get rid of the main menu bar and the “search” field on the top left as well please?
All the best,
Sacha
Add #main-header-mainNav and .#main-header-toolbar.@start
The second one is a dot(.) class selector, for some foolish reason the designers of that theme decided to put hashmarks in class names.
Beyond that find a browser extensions to help find selectors.
Good Hunting.
Hi @PaulNewton ,
That didn’t work, and neither did the previous code where I said it helped 70% - it actually removed the footer from the entire page; I just didn’t check.
I got incredibly frustrated because my limited skills do not allow me to interpret your answer correctly, and I am unable to identify the class or ID associated with the cart.
If finding a browser extension to help find a selector means the same thing, I obviously did not succeed.
I did succeed in removing just the footer by editing the theme.liquid file and replacing…
{% section 'main-header' %}
and
{% section 'main-footer' %}
With…
{% unless template.name == 'cart' %}
{% section 'main-header' %}
{% endunless %}
and
{% unless template.name == 'cart' %}
{% section 'main-footer' %}
{% endunless %}
That worked for the entire section holding the menu, search field and logo, and the footer as well. It’s not elegant, but it works, and it only does it in the cart - which is what I need.
The hunt was good.
That means you put the css in a GLOBAL custom-css apply the css in the cart template, or it’s main section in the cart template https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Editing files directly will break automatic theme updates when available.
The error is from a limitation in the custom-css feature against using shopify-section in ID or class selectors for section-level custom-css rules. […]> > > - For section-level CSS, you can’t target the ID or classes of the wrapping Shopify Section element rendered by the theme with the shopify-section class ~shopify.dev
For future reference, it appears that the Shopify documentation is actually wrong about this! There is a way to target the top section element. Simply include a CSS rule with no selector, and it will be “prefixed” with the section selector.
Thus, the following code:
{
background: red;
}
will be expanded to something like:
#shopify-section-template--15972390371482__rich-text {
background: red;
}