How to change collection grid on desktop to 1 row (carrousel) on Dawn?

Topic summary

Request to display 7 collections in a single-row carousel on desktop in Dawn, matching mobile.

  • A preview link was shared so custom code could be tailored. Instructions: paste code in theme.liquid below the tag. (Note: code snippets are referenced but not visible here; screenshots/images are central to the thread.)
  • Result: desktop carousel achieved; user confirmed it worked.

Follow-up adjustments:

  • Mobile image banner button background height was too large; an updated code replacement fixed the spacing. User confirmed.
  • Styling enhancements added: rounded corners and customizable background color for product cards; color set via hex (example: #fff9e0). Developer noted price/height alignment differences due to some products showing reviews and others not, and this can’t be fully balanced.

Additional request:

  • Change product box color on a different site (shopdanycfratfscreations.com). Developer advised keeping the old code and adding new code with the same insertion location. Confirmation from the user is not yet recorded.

Status: primary goal resolved; styling refinements implemented; last cross-site color change pending user confirmation.

Summarized with AI on January 4. AI used: gpt-5.

Hi everyone,

Right now I have 7 collections and I would like to display them in a row (carrousel) on desktop not as a grid, just as it show on mobile.

Do you guys can help me?

Hey @glendagiordani ,

Can you share the link to your store please?

Hi @ThePrimeWeb

I don’t have the store on yet, I am still designing.

You can share a preview link to the draft theme

Sure, I just thought the image that I attach would be enough.

https://28t08v4x4khtupdk-78118420763.shopifypreview.com

It won’t be, because I will have to go to your store and write code and test it based on how your store is built. All the code we provide here is written specifically for your store.

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.


Screenshot is for reference only, the correct code to paste is the one shown above.

Oh I see, sorry I did not know that.

Amazing, worked perfectly. Thank you very much

I am trying to change the size of the background of the image banner button, on desktop is great but on mobile the height is too big. Do you know how I can solve this?

As you can see in the image it has a lot of white background,

Just replace the earlier code with this


OMG, you are a life saver.

One more last thing.

Can I do something like that ? Like rounding corners and color background?

Yeah you can replace the old code with this one


You can change the color where it says “#fff9e0” at the last portion in the code.

The price arrangement is all different because of the one that has reviews and the others don’t. Can’t really balance that.

Thank you so much!!

Hi there,

Can you help me changing the color of the product box for this link as well?
https://shopdanycfratfscreations.com/

Hey @glendagiordani ,

I see the old code is still there, leave it as it is and add this on as well. Instructions are the same as earlier