not hide order summary on moblie phone

rublys_shop
New Member
3 0 0

Hi guys,

I would like to know how I can change the checkout page that the order summary will be shown directly on the checkout page on mobile phones!

Thanks for your help!

0 Likes
Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
398 0 76

Hi Rublys Shop,

Britton here with the Shopify support team.

The checkout pages can't be edited in a straghtforward manner for things like this, unlike the rest of the website pages. That means that we will need to use the magic of jQuery in order to make changes after the page has loaded. If you put this code into the "extra content and scripts" section of the admin then it should do what you are asking for:

<script src=";
<script>
$(document).ready( function() {
$('.order-summary-toggle').hide(); 
$('div.order-summary').removeClass('order-summary--is-collapsed');
} );
</script>

Just keep in mind that this will only work for visitors that have javascript enabled in their web browsers. If they don't though, there isn't much that can be done anyways. As always, make sure to test that the change works how it intends. In this case, I would put through a test order on mobile. There is nothing worse than making a change and only finding out it doesn't do what you want after a customer has issues!

I hope that helps!

-Britton

Britton Shopify Guru
Josh_Smallwood
New Member
1 0 0

Britton, 

I'm having the same issue as Rubly.  Where is the  "'extra content and scripts' section of the admin" that you referenced above?

 

Thanks in advance, 

Josh

0 Likes
Leo_Filhol
Shopify Partner
2 0 1

Hello Britton,

I've tried posting your code under the Additional content and scripts in Settings / Checkout, but when I reload and inspect my page ( Cart > Customer Information) the toggle is still there. I think it's because we're not actually in the checkout phase, but pre checkout phase, so the script is not being called yet.

Is there any places I can put this script so that it works or I don't have access to those files? (We're currently on the Professional Plan and not on the Plus Plan).

​​​​​​​Thanks in advance for your answers :)

Leo

paulotrs
New Member
1 0 0

Hello Rubly, can you please be more specific on where to add this code?

0 Likes