Top

Stop Upsell in a Mobile Theme

Warning!

This is an unsupported theme customization. If you need help setting it up, Email our Support Wizards.

If you would like to disable Product Upsell in a mobile theme, follow these steps:

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Assets", select your theme's CSS file.

    Note: This will vary by theme and could be something like theme.scss.liquid.

  5. Add this code to the bottom of the file:
    @media (max-width: 768px) {
    #facebox .content, #facebox .close {
    display: none !important;
     }
     }
  6. Select Save.
  7. Under "Templates", select product.liquid.

    Note: If your theme contains sections, you will need to look under "Sections" and select product-template.liquid instead.

  8. Add this code to the bottom of the file:
    <script>
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // Mobile Browser
    $(document).ready( function(){
    $('#add-to-cart').click( function(){
    setTimeout(function(){ $('#facebox').find('#giveacceptbtn').click();}, 100);
    });
    });
    } else {
    // Not mobile browser
    } </script> 
  9. Select Save.
  10. Under "Templates", select cart.liquid.

    Note: If your theme contains sections, you will need to look under "Sections" and select cart-template.liquid instead.

  11. Add this code to the bottom of the file:
    <script>
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // Mobile Browser
    $(document).ready( function(){
    $('#checkout').click( function(){
    setTimeout(function(){ $('#faceboxform').find('#faceboxsubmit').click();}, 100);
    });
    });
    } else {
    // Not mobile browser
    }
    </script> 
  12. Select Save.

That's it!

Have more questions? Submit a request