How to move shopping cart to bottom of screen on mobile.

Site URL: https://www.wildbayseafoodco.com/shop/sockeye-salmon-copy-1

Hi! 

The shopping cart icon is cut off when viewing my site on a mobile device, so I want to move it to where it is obvious/accessible to customers. Somewhere near the bottom (like on the brine template) would be great. I am currently using the Tremont template and do not want to have to switch everything over to a new template in order to do so. Any help is greatly appreciated. Thank you! 

You can use the following CSS to hide it in the mobile/tablet view: 

@media screen and (min-width:100px) and (max-width: 799px){
.Cart-inner {
	display:none !important;
    }
}

You can paste the following code anywhere in page using code block to display it for mobile/tablet:

    <a href="/cart" class="Cart Cart--icon sqs-custom-cart" data-nc-element="cart">
    <span class="Cart-inner" id="mobile-view">
      <svg class="Icon Icon--bag" viewBox="0 0 34 38">
        <g class="svg-icon bag-icon--even">
          <path id="XMLID_2_" fill="none" stroke-miterlimit="10" d="M29,36H5c-1.7,0-3-1.6-3-3.5L4,15h26
            l2,17.5C32,34.4,30.7,36,29,36z"/>
          <path id="XMLID_1_" fill="none" stroke-miterlimit="10" d="M11.8,11c0-1.4,0.6-9,5.2-9s5,8.6,5,9
            "/>
        </g>

        <g class="svg-icon bag-icon--odd">
          <path fill="none" stroke-miterlimit="10" d="M29.4,36.5H4.6
            c-1.7,0-3.1-1.6-3.1-3.6l2.1-18.4h26.9l2.1,18.4C32.5,34.9,31.1,36.5,29.4,36.5z"/>
          <path fill="none" stroke-miterlimit="10" d="M11.5,11c0-1.4,0.6-9.5,5.6-9.5
            s5.4,9.1,5.4,9.5"/>
        </g>
      </svg>
      <svg class="Icon Icon--cart" viewBox="0 0 31 26">
        <g class="svg-icon cart-icon--even">
          <circle stroke-miterlimit="10" cx="23" cy="23" r="1"/>
          <circle stroke-miterlimit="10" cx="9" cy="23" r="1"/>
          <path fill="none" stroke-linejoin="round" stroke-miterlimit="10" d="M0,2h5
              c0.6,0,1.1,0.4,1.1,1l1.7,13c0.1,0.5,0.6,1,1.1,1h15c0.5,0,1.2-0.4,1.4-0.9l3.3-8.1C28.8,7.4,28.5,7,28,7H12"/>
        </g>

        <g class="svg-icon cart-icon--odd">
          <circle stroke-miterlimit="10" cx="22.5" cy="21.5" r="1"/>
          <circle stroke-miterlimit="10" cx="9.5" cy="21.5" r="1"/>
          <path fill="none" stroke-miterlimit="10" d="M0,1.5h5c0.6,0,1.1,0.4,1.1,1l1.7,13
            c0.1,0.5,0.6,1,1.1,1h15c0.5,0,1.2-0.4,1.4-0.9l3.3-8.1c0.2-0.5-0.1-0.9-0.6-0.9H12"/>
        </g>
      </svg>

      <span class="sqs-cart-quantity">0</span>
    </span>
  </a>


<style>

@media screen and (min-width:100px) and (max-width: 799px) {

#mobile-view {

display:block !important;
margin-left:auto;
margin-right:auto;

}
</style>

I just took the original code for the shopping cart icon and gave the class a new ID. An ID supersede class in CSS. So I used class to hide the original cart icon on top. Then I used the ID to forcefully display it on phone. You can paste the above code anywhere in the page and it will display a centered cart-icon in a new line.

Alternatively: you can combine the CSS of both codes and put them in custom CSS. Hope that helps.

Thank you! That worked great. Is there a way to move the sopping bag to the bottom of the screen rather than the top on mobile? The current position is interfering with the page title when I go to click it. Thank you! 

Also, is there a way to turn off the shopping bag in the top left in desktop mode? Right now I have two shopping bag icons in desktop (one on the top left that does not click through, and one on the top right that does) and I would prefer to just have one on the top right that does click through in desktop.

Thank you in advance for all of your help! 

7 hours ago, wildbayseafoods said:

Is there a way to move the sopping bag to the bottom of the screen rather than the top on mobile?

All you have to do is to paste the code on the bottom portion of the site. The icon will appear wherever the code is pasted.

7 hours ago, wildbayseafoods said:

Also, is there a way to turn off the shopping bag in the top left in desktop mode?

Have you solved this? There is no shopping bag icon in the top-left right now.

15 hours ago, aravsanj said:

All you have to do is to paste the code on the bottom portion of the site. The icon will appear wherever the code is pasted.

Have you solved this? There is no shopping bag icon in the top-left right now.

Thank you for all of your help! Once I pasted the code in the footer, the bag was all of the way at the bottom of the screen and I could not figure out how to move it to the top of the footer. I ended up just putting a "continue shopping" and "go to checkout" button in the additional info of each product and that seems to be working ok. Thanks again! 

@wildbayseafoods Do you need help to fix these?

Site URL – https://www.wildbayseafoodco.com/

1. (Mobile-Homepage) Shop now overlap text

2. (Tablet-Footer) Change footer layout?

Sure! Thank you. 

13 hours ago, wildbayseafoods said:

Sure! Thank you. 

Add to Design > Custom CSS

/* mobile text overlap */
@media screen and (max-width:640px) {
body.homepage h1.page-title {
    margin-top: 30px !important;
}
}
/* table footer */
@media screen and (max-width:991px) and (min-width:641px) {
div#footer-blocks .span-3 {
    width: 50%;
}
}

Hi wildbayseafoods, I was wondering how this did do to get the cart floating window?

On 12/9/2021 at 4:08 PM, Jeremyn said:

Hi wildbayseafoods, I was wondering how this did do to get the cart floating window?

It is a Shopify site, not Squarespace.

However, if you are looking for something like that, please get in touch (via DM) with details of the site. 🙂