Collection list in one row

Store Design
, , ,
1

I hope everyone is doing well. I’m using the Be Yours theme, and the collections list image on the desktop view is currently showing 2 per row. I would like to change it to display 4 collections per row. Screenshot attached.

Can anyone help me? Any assistance would be greatly appreciated.

Thank you!

Store Preview Link: https://ladyhyphae.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=144129720545

screenshot.png
screenshot.png427×491 195 KB

2

Hello! @Digital_Imran Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
@media screen and (min-width: 750px) {
    .collection-list-wrapper .collection-list--4-items .grid__item, .collection-list--7-items .grid__item:nth-child(n+4), .collection-list--10-items .grid__item:nth-child(n+7) {
        width: calc(24% - var(--grid-horizontal-spacing) / 2) !important;
    }
}

Rishihuptech_0-1722855820470.png
Rishihuptech_0-1722855820470.png1865×913 332 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

1 Like
3

Hi @Digital_Imran

In your theme there must be an option to select per row option first try to find that option it will work

if you don’t have any option then add this CSS to your base.css

.collection-list-wrapper slider-component>ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.collection-list-wrapper slider-component>ul li { 
    width: 100% !important; 
    max-width: 100% !important; 
}
1 Like
4

Thank you so much @Huptech-Web . It Works :grinning_face_with_smiling_eyes:

1 Like
5

Hello @Digital_Imran

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px) { #shopify-section-template--18259782893793__collection_list_4BCAeX .collection-list--4-items .grid__item{ width: calc(24% - var(--grid-horizontal-spacing) / 2) !important; }

niraj_patel_0-1722856069539.png
niraj_patel_0-1722856069539.png1276×371 416 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

Thank you @Mehran_Ali . It works. I just need to change it to only for desktop

7

Hello @Digital_Imran
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-column-list.css ----> line number 82
search this code

@media screen and (min-width: 750px) {
.collection-list--4-items .grid__item, {
width: calc(50% - var(--grid-horizontal-spacing) / 2);
}
}

and replace with this code

@media screen and (min-width: 750px) {
.collection-list--4-items .grid__item, {
width: calc(24% - var(--grid-horizontal-spacing) / 2);
}
}

result

5.png
5.png1920×836 254 KB

If this was helpful, hit the like button and accept the solution.
Thanks