Jump to content
Join us live on Dec. 11 as we discuss the most-anticipated designs of 2025 with three brand design experts. ×

Mobile shop layout order

By TomMesquitta, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

TomMesquitta Level 4

TomMesquitta

Posted
Posted

Site URL: https://disc-snail-sk6j.squarespace.com

Site URL:
https://disc-snail-sk6j.squarespace.com

Password:
Fevroniapass

Hi,

When selecting a product from my shop and viewing the information in desktop view it works perfectly.

However when I switch the view to mobile then the order is completely wrong with the main body copy appearing after the 'add to cart' button?!

Is there a way to reorder the information for the mobile view?

I would like the mobile view to be ordered like so:

Product title
Body copy
Images
Drop down menus
Add to cart

I'd also like this to be a site wide change across the current x24 products and any future products added to the site.

Thanks,

Tom.

Screenshot 2022-09-21 at 15.47.09.png

Screenshot 2022-09-21 at 15.47.20.png

Screenshot 2022-09-21 at 15.47.31.png

  • Replies 6
  • Views 443
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

Add to Settings > Advanced > Code Injection > Footer 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
if (jQuery(window).width() < 767) {
$('.ProductItem-gallery-slides').insertAfter('.ProductItem-details-excerpt');
}
});
</script>
<style>
  @media screen and (max-width:767px) {
  .ProductItem-details-excerpt {
    order: 2 !important;
}

.ProductItem-details-checkout {
    order: 2 !important;
}

.ProductItem-gallery-slides {
    order: 3;
}

.ProductItem-details .product-variants {
    order: 4;
}

.product-quantity-input {
    order: 5 !important;
}

.sqs-add-to-cart-button-wrapper {
    order: 6 !important;
}
  }
</style>

Then check it again on real mobile

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

TomMesquitta Level 4

TomMesquitta

Posted
  • Author
Posted

Hi Tuanphan, 

Sorry, I missed your comment outside the code box.

Whilst the above solved the problem on the desktop browser in mobile mode... the images seem to disappear now when viewed on a real mobile.

The site is now linked to the primary domain:

Site:
https://www.fevronia.net

Password:
Fevroniapass

 

 

tuanphan Level 18

tuanphan

Posted
Posted
20 hours ago, TomMesquitta said:

Hi Tuanphan, 

Sorry, I missed your comment outside the code box.

Whilst the above solved the problem on the desktop browser in mobile mode... the images seem to disappear now when viewed on a real mobile.

The site is now linked to the primary domain:

Site:
https://www.fevronia.net

Password:
Fevroniapass

 

 

Can you take a screenshot on real mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources