Make collection preview full width / larger

[JordiP]

Hello,I want to make my page minimalistic and use a lot of photos instead of text. I want to make a collection preview on my landing page span the whole page width and have a larger, more signifcant height to create a better user experience. Any help is appreciated, thank you.

(^ Here is how the collection preview looks on my store)

(^ this is what im inspired by, larger size and spans whole width of the page with photo that links to collection)

Store: https://artisimo.es/

Pass: pongia

[Moeed]

Hey @JordiP

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:

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

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @JordiP

Please add this code to theme.liquid file, after in Custom CSS in Online store > Themes > Edit code

[Tech_Coding]

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

.collection-list-wrapper.page-width.isolate.page-width-desktop { max-width: 100%; padding: 0 !important; } .collection-list-wrapper .card__content { position: absolute; bottom: 0; } .collection-list-wrapper .card__media { position: relative; } .collection-list-wrapper .collection-list { column-gap: 0 !important; justify-content: center; }

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

[Rahul_dhiman]

Hello @JordiP
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.section-template--23481715917133__collection_list_Fcec78-padding {
max-width: 100%;
padding: 0px;
}
}

result

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

[JordiP]

Thank you! However it seems that the collection image gets cut in half for some reason? How do I fix this? Also is it possible to remove the arrows, so there is only the text? Thanks!

(^ Photo seems to be cut in half)

[Tech_Coding]

Please replace the above code with this

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

.collection-list-wrapper.page-width.isolate.page-width-desktop { max-width: 100%; padding: 0 !important; } .collection-list-wrapper .card__content { position: relative; bottom: 56px !important; } .collection-list-wrapper .collection-list { column-gap: 0; justify-content: center; } .collection-list-wrapper span.icon-wrap { display: none !important; }

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

[JordiP]

Thank you, Is it possible to optimize for mobile view aswell? Right now the first option from collection doesnt even appear on mobile view and I would like to simply have a 2x2 like in the example below

( ^ How it looks now for mobile, first image is cut off for some reason, its fine on desktop though)

(^ How I want it to look for mobile, nice 2x2 spanning the screen )