Delete arrows on mobile lorenza theme

Store Design
, , ,

Topic summary

A user seeks to remove navigation arrows from the product carousel and “You May Also Like” section on mobile devices for the Lorenza theme.

Three solutions were provided:

  1. JavaScript approach: Add custom script to theme.liquid file (above </body> tag) to hide arrows on mobile

  2. CSS in theme.css: Insert media query targeting max-width 769px to hide .flickity-prev-next-button and .carousel__next-button/.carousel__previous-button elements with display: none

  3. Alternative CSS: Similar approach using min-width media queries (38em and 38-60em ranges) to target the same carousel navigation elements

All solutions use CSS/media queries to hide the arrow buttons specifically on mobile viewports. Contributors requested the user mark helpful responses as solutions and provide feedback on which approach worked.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

How do I delete arrows on this page for mobile? (Both on product carousel and You May Also Like)

https://myhaveli.com/collections/tops/products/zaia-raw-silk-overcoat

2

Hey @Nadine10

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1721127983965.png
Moeed_0-1721127983965.png358×773 97.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @Nadine10 ,

You can follow these steps

Step 1: Go to Online store > Themes > Edit code and find theme.css file

Step 2: Insert below code at the end file and Save them

@media (max-width: 769px){
   .flickity-prev-next-button.next,
   .flickity-prev-next-button.previous,
   .carousel__next-button,
   .carousel__previous-button {
     display: none;
    }
}

If our suggestions are useful, please let us know by giving it a like and marking it as a solution. Thank you very much

4

Hello @Nadine10

Go to online store ---------> themes --------------> actions ------> edit code------->Theme.css
at the end of the file.

@media (min-width: 38em) {
.carousel__previous-button {
display: none;
}
}

@media (min-width: 38em) {
.carousel__next-button {
display: none;
}
}
@media (min-width: 38em) and (max-width: 60em) {
.product__media .flickity-prev-next-button.previous {
display: none;
}
}
@media (min-width: 38em) and (max-width: 60em) {
.product__media .flickity-prev-next-button.next {
display: none;
}
}

and the result will be

17.png
17.png324×670 59.5 KB

16.png
16.png324×670 150 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks