Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

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! 

Link to comment

7 answers to this question

Recommended Posts

  • 0

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.

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
Posted (edited)

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! 

 

 

Edited by wildbayseafoods
Link to comment
  • 0
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.

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
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! 

Link to comment
  • 0

@wildbayseafoods Do you need help to fix these?

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

1. (Mobile-Homepage) Shop now overlap text

wildbayseafoodco.com-01-min.png

2. (Tablet-Footer) Change footer layout?

wildbayseafoodco.com-02-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...