Making multicolumn scroll right functionality

Shopify Discussion
1

Hi,

I am using Dawn theme. I would like to make columns in the same row instead of going to the next row. The highlighted columns below should be in the same row. How can I do it?

FaizH_0-1731200123355.png
FaizH_0-1731200123355.png1259×805 69.4 KB

2

Hey

For the Dawn theme, the maximum number of columns you can have in one row with that section is 6.

3

I want to scroll right to see the next value instead of having a new row. Any app that I can use to do this?

4

Two quick solutions:

1- If you’re comfortable with code;

In the online store editor, add your (multi column) section then in the section settings, select Custom Css (Found just below Theme settings at the bottom) and add the following code to it to override the default multi column layout.

Just copy and paste the following:

/* Adjusts the grid for the multi-column section */
.multicolumn__item {
    flex: 1 1 auto; /* Allows more flexible widths */
    max-width: none; /* Removes the maximum width */
}

/* Customizes the number of items in the row */
.multicolumn__inner {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Adjust this number as needed */
    gap: 10px; /* Adjust spacing between columns */
}

Ps: Adjust the grid-template-columns value (in the second code block) to control how many columns appear in each row (e.g., repeat(6, 1fr) for six items in a row).

After that, save your changes and preview you page.

2- Apps you can install to perform what you want

You can install page builders like Shogun or Gempages to further customize the look of your store.

5

If you have many items to show and only want to scroll right to show other ones, you can instead do this

In the online store editor, add your (multi column) section then in the section settings, select Custom Css (Found just below Theme settings at the bottom) and add the following code to it to override the default multi column layout.

Just copy and paste the following:

/* Enable horizontal scroll for the multi-column section */
.multicolumn__inner {
    display: flex; /* Changes layout to flexbox for horizontal alignment */
    overflow-x: auto; /* Allows horizontal scrolling */
    white-space: nowrap; /* Prevents items from wrapping to a new line */
    gap: 10px; /* Adjusts spacing between items */
}

/* Optional: Styling for individual items */
.multicolumn__item {
    flex: 0 0 auto; /* Ensures items don’t shrink and stay in a row */
    max-width: 200px; /* Adjust width to your preference */
}

/* Optional: Hide horizontal scrollbar for a cleaner look (applies on WebKit browsers) */
.multicolumn__inner::-webkit-scrollbar {
    display: none;
}

After that, save and preview. Don’t forget to make sure scrolling is smooth on mobile.

6

I tried it but it didn’t work.