The mobile version of the page is unstable

RebeccaCC · ‎07-18-2024

I've encountered some issues on mobile pages. Please refer to the attached pictures. Here are the specific problems:

Both slideshows always appear simultaneously on the same page.
The search button in the top right corner and the menu button in the top left corner are always unresponsive.

Thank you so much

Sweans · ‎07-18-2024

Hi @RebeccaCC ,

The "Uncaught ReferenceError: jQuery is not defined" error occurs when the jQuery library isn't properly loaded before it's used in your Shopify theme.

To ensure jQuery is loaded correctly, please follow the steps below:

1.Go to your Shopify Admin.

2.Navigate to Online Store > Themes.

3.Find the theme you're using and click Actions > Edit code.

4.In the left sidebar, under the layout directory, click theme.liquid.

5.Add the following script tag within the <head> section to ensure jQuery is loaded:

<head>
/*other codes will be here*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head>

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

View solution in original post

Sweans · ‎07-18-2024

Hi @RebeccaCC ,

The "Uncaught ReferenceError: jQuery is not defined" error occurs when the jQuery library isn't properly loaded before it's used in your Shopify theme.

To ensure jQuery is loaded correctly, please follow the steps below:

1.Go to your Shopify Admin.

2.Navigate to Online Store > Themes.

3.Find the theme you're using and click Actions > Edit code.

4.In the left sidebar, under the layout directory, click theme.liquid.

5.Add the following script tag within the <head> section to ensure jQuery is loaded:

<head>
/*other codes will be here*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head>

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

RebeccaCC · ‎07-19-2024

Hi Sweans ,
If the picture of the product cannot be displayed on the mobile version of the page,
how can I make the product image appear when clicked?

Sweans · ‎07-19-2024

Hi @RebeccaCC ,

The image file is missing in your Shopify file directory.
Please double-check the image and ensure the correct one is used for the popup display.

If you need further assistance, feel free to reach out!
I hope this helps!

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

The mobile version of the page is unstable

The mobile version of the page is unstable

Community Blog Articles