Jump to content

Making Cart Icon Visible on Mobile (Foster)

Recommended Posts

There are separate settings in Design > Site Styles for desktop and mobile.

Whilst previewing the mobile version of the site, open the Site Styles panel and choose a position for the mobile cart icon (instead of hidden).

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 year later...

@paul2009Hi Paul, I'm using a York template (Shibori specifically) and the cart icon is not showing in mobile, although the number of items is. A customer recently reached out because she couldn't find the cart on her phone. I did know there is a separate setting for mobile, so I checked it and saw I had the color of the icon set to the same color as the background, and I thought, easy fix! However, even after changing it (and saving), it's still not appearing. Any ideas? (https://www.flat-wear.com/) Note if I choose either text or bag instead, those *do* appear.

Screen Shot 2021-08-30 at 9.56.49 PM.png

Link to comment
On 8/31/2021 at 3:16 AM, jjnj said:

The cart icon is not showing in mobile, although the number of items is.

The cart icon has been hidden with some custom CSS. If you remove this, the cart will appear on the navigation overlay as normal, like this:

2012794028_Screenshot2021-09-01at12_56_07.thumb.png.455cf47336f62f578ed06074557576c8.png

That said, I recommend that you review your custom code as there is a lot of it, and I found parts of the site that didn't work properly. For example, clicking X to close the mobile navigation overlay didn't work for me.

On the subject of the cart icon, it is notoriously difficult for potential customers to find on this template family as it can only be accessed via the hamburger menu on mobile. Personally I recommend that anyone building a store using the York template family should add some code to show the mobile cart icon in the header, like this:

2041894170_Screenshot2021-09-01at13_33_09.thumb.png.e7369dd228c3104bf59b56da1fb4c68f.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.