How to edit the featured collection layout in Debut Theme?

Store Design
,
1

Hello,

I am currently using the Debut Theme to build a store, I have decent experience with web builders but this is my first time trying shopify and I’m having a hard time figuring out how to edit layouts.

I am trying to make my “featured” section laid out like on this site: https://nvgtn.com/

I dont need the option tables on the products, but if someone could help with the layout I would greatly appreciate it!

Thank You in advance!!

2

Hi @SP3C

Could you share your store link?

3

Hi @SP3C

Can you please share store link?

Thanks

4

https://c2eb2c-2.myshopify.com/

here you go, thank you!

5

https://c2eb2c-2.myshopify.com/

Thank you for your help!

6

Please change the image resolution of your products.

Screenshot_7.jpg
Screenshot_7.jpg735×753 26.7 KB

And change the setting of your Featured collection, Products per row is 5

Screenshot_8.jpg
Screenshot_8.jpg1912×910 131 KB

Then add this code to your theme.scss.liquid file

#shopify-section-template--16292752326850__collection .page-width {
    max-width: 100%!important;
    width: 100%!important;
    padding-left: 2rem;
    padding-right: 2rem;
}
#shopify-section-template--16292752326850__collection .page-width .grid__item {
   padding-left: 10px;
}

So it will look like this

Screenshot_9.jpg
Screenshot_9.jpg1905×851 72.9 KB

7

Thank you so much for the help. I have made my grid 5 wide and added the code however i am not sure what to change my image resolution to. my images are 1k x 1k, the images usen on NVGTN are smaller, do you want me to size them down? They seem to look good on their site, maybe because they scaled their product boxes vertically as well to fit the aspect ratio of the photos better?

Again I greatly appreciate your help!

8

SP3C_0-1700583234100.png
SP3C_0-1700583234100.png2560×1392 234 KB

SP3C_1-1700583267257.png
SP3C_1-1700583267257.png2560×1392 510 KB

Note the difference in the vertical scaling of the product boxes

9

You can compare your product image and their

Here is their image size:

Screenshot_1.jpg
Screenshot_1.jpg769×865 36 KB

And here is your product image

Screenshot_2.jpg
Screenshot_2.jpg591×809 18.4 KB

10

Ok I understand what you are saying. Another question: I am uploading my pictures at 1000px by 1000px, is there a way to prevent them from being scaled down so small? I am assuming if I go edit my entire catalogue to 2000px by 2000px it will just scale them all down like it is currently doing. If i inspect element it says my intrinsic size is 390x390

11

Thank you for your assistance but i may have solved the issue. in my collection.liquid file i changed the max height when 5 grid to 500 and it is now allowing my photos to display without downscaling them to fit the height constraints of the section. Thank you again for your help!

12

You are very welcome