Multi column view on mobile

Shopify Partner
10 0 2

For my service I have three packages customer can choose from. On my product page, I have a multicolumn of the three packages to display the options to the customers.


Screenshot 2024-04-08 at 18.14.51.png


When on mobile the columns converge into one column per view horizontally, the user uses the arrows to swipe through. I fear the arrows will not be seen and the user wont understand to scroll through to read all packages.


I know there can be a way to display the columns vertically one after the other, but for user experience I need minimal scrolls.


Is there anyway to:

(1) display all three packages side by side vertically, so they can be viewed at once rather than scrolling through

(2) use current multi column but have the columns change auto after 3/5 seconds like


Dawn theme 13.0.1

Site is

Password to access is calleo


Reply 1 (1)

Shopify Partner
3805 962 1193

Hey @baileyymans 


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 </body> tag.

@media screen and (max-width: 767px) {
.slider.slider--tablet {
    display: flex !important;
    flex-flow: column !important;
    align-items: center;
    gap: 20px;
.slider.slider--tablet.contains-content-container .slider__slide {
    margin: 0 !important;




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


Best Regards,

Need a Shopify developer? Chat on WhatsApp

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️