Make section slider on mobile or hide

Store Design
, , , , , , , ,

Topic summary

A user seeks to modify a section on their Shopify store (vazluxe.com) for mobile display, with two options: convert it to a slider or hide the bottom two elements.

Two solutions provided:

  1. Slider implementation - Add custom code to theme.liquid file above the </body> tag. The solution includes markup code and shows a visual result of the slider functionality.

  2. Hide elements - Use CSS media query targeting mobile screens (max-width: 767px) to hide specific elements using nth-child selectors. The code hides the 3rd and 4th box elements with display: none !important.

Both approaches require editing the theme code directly. The CSS solution is simpler but removes content, while the slider maintains all elements in a mobile-friendly format. No indication yet which solution the original poster chose or if either resolved their issue.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

im looking to make this section either a slider on mobile or hide the two bottom ones on mobile. My site is https://vazluxe.com

A774366D-78AB-4A40-9097-F6639DE1B89F.jpeg
A774366D-78AB-4A40-9097-F6639DE1B89F.jpeg1170×2532 161 KB

1 Like
2

Hey @Luxurymrkt

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-1742318014954.png
Moeed_0-1742318014954.png339×530 14.3 KB

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

Best Regards,
Moeed

3

@Luxurymrkt

In your css some css hide other elements where nth-child(3) inside the nth-child (1) means first elements nth-child(2)means second. This way you can hide which element you like. I have given the CSS for you to hide 3rd and 4th

@media screen and (max-width: 767px) {
    a.box:nth-child(3) {
        display: none !important;
    }
 a.box:nth-child(4) {
        display: none !important;
    }
}