Product at top of page in grid list main collection- shopify debut theme

[Tilde]

Hi,

I'd like to have grid view instead of list view when people click the 'view all' button on the homepage but the grid view has one product at the top with misaligned text.

How can I make this so I have no single product at the top but that they are all part of the grid view?

Thanks!

website is https://www.theofficialmusicboxcompany.com/

[Made4uo-Ribe]

Hi @Tilde 

Is this solve? This is on my end. 

[Tilde]

Hi, noI have it as a list view temporarily until the issue with grid view is fixed. See my screenshot in the original post- I'd like to have my products as grid view but without the single product at the top-. Thanks!

[Made4uo-Ribe]

Can you change it on the same image you posted so I can check out the cause? Thanks!

[Tilde]

Ok, changed it to grid now!

[Tilde]

Could you let me know if you've managed to have a look? Much appreciated!

[Made4uo-Ribe]

HI, I just check it now. The first product is not included in the list of product the design is look like a banner first then the list. 

Check this one out. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 909px){
ul.grid.grid--uniform.grid--view-items\>.\<li.class\= {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

li.grid__item.grid__item--collection-template.small--one-half.medium-up--one-fifth {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.grid-view-item {
    margin: unset;
}
}
@media only screen and (max-width: 908px){
ul.grid.grid--uniform.grid--view-items\>.\<li.class\= {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

li.grid__item.grid__item--collection-template.small--one-half.medium-up--one-fifth {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.grid-view-item {
    margin: unset;
    padding-bottom: 30px;
}
.grid-view-item.grid-view-item--sold-out.product-card {
    padding-left: 30px;
}
}
@media only screen and (max-width: 749px){
ul.grid.grid--uniform.grid--view-items\>.\<li.class\= {
    display: grid;
    grid-template-columns: 1fr;
}
}

And save. 

Result:

If you don't mind me asking, what are you using? Is it Fireflies, a third-party Shopify theme?

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Tilde]

Hi, It's the Shopify Debut theme. I've copied and pasted the code into the theme.css file but it doesn't seem to have made a change?

[Made4uo-Ribe · Accepted solution]

Can you add on the other file. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (min-width: 909px){
ul.grid.grid--uniform.grid--view-items\>.\<li.class\= {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
li.grid__item.grid__item--collection-template.small--one-half.medium-up--one-fifth {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.grid-view-item {
    margin: unset;
}
}
@media only screen and (max-width: 908px){
ul.grid.grid--uniform.grid--view-items\>.\<li.class\= {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
li.grid__item.grid__item--collection-template.small--one-half.medium-up--one-fifth {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.grid-view-item {
    margin: unset;
    padding-bottom: 30px;
}
}
@media only screen and (max-width: 749px){
ul.grid.grid--uniform.grid--view-items\>.\<li.class\= {
    display: grid;
    grid-template-columns: 1fr;
}
}
.grid-view-item.grid-view-item--sold-out.product-card {
    padding-left: 30px !important;
}
#Collection > ul > div {
     margin-left: 30px !important;
}
</style>

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Tilde]

this has worked- thank you so much!!!

[Made4uo-Ribe]

Welcome! Would you mind hitting 'like' as well? Thanks! I hope I’m not late to your store launch today. Wishing you a successful and exciting launch!

[Tilde]

Hi, it doesn't seem to be working- we have a big launch tomorrow and I'm just concerned that the site looks a bit unprofessional like this. Would really appreciate your input.

It's the Shopify Debut theme. I've copied and pasted the code into the theme.css file but it doesn't seem to have made a change?