Shopify themes, liquid, logos, and UX
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/
Solved! Go to the solution
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!
Hi @Tilde
Is this solve? This is on my end.
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!
Can you change it on the same image you posted so I can check out the cause? Thanks!
Ok, changed it to grid now!
Could you let me know if you've managed to have a look? Much appreciated!
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!
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?
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!
this has worked- thank you so much!!!
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!
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?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024