Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Tilde
Excursionist
27 0 10

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/

 

Screenshot 2024-10-02 at 10.30.31.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
9034 2160 2664

This is an 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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 11 (11)

Made4uo-Ribe
Shopify Partner
9034 2160 2664

Hi @Tilde 

Is this solve? This is on my end. 

Made4uoRibe_0-1727863728089.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Tilde
Excursionist
27 0 10

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
Shopify Partner
9034 2160 2664

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Tilde
Excursionist
27 0 10

Ok, changed it to grid now!

Tilde
Excursionist
27 0 10

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

Made4uo-Ribe
Shopify Partner
9034 2160 2664

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:

Made4uoRibe_0-1727952945256.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Tilde
Excursionist
27 0 10

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
Shopify Partner
9034 2160 2664

This is an 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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Tilde
Excursionist
27 0 10

this has worked- thank you so much!!!

 

Made4uo-Ribe
Shopify Partner
9034 2160 2664

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Tilde
Excursionist
27 0 10

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?