Solved

Product Grids for Parallax Theme

eufories
Shopify Partner
16 0 0

How do I add a grid around my products like shown below. I'm using the Parallax theme  

 

 

Screenshot (258).png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1127 294 223

This is an accepted solution.

Hey @eufories,

 

Delete the old code and replace it with this

<style>
@media only screen and (min-width: 990px) {
  .shopify-section--featured-collection > section > div {
    justify-content: center;
  }

  .shopify-section--featured-collection > section > div > .thumbnail {
    margin-right: 0;
    margin-left: -1px;
    margin-top: 0;
    margin-bottom: -1px;
    width: 20%
  }

  .shopify-section--featured-collection > section > div > .thumbnail a {
      min-height: 53vh;
  }
}

@media only screen and (max-width: 989px) {
   .shopify-section--featured-collection > section > div > .thumbnail a {
      min-height: 47vh
   }
}  
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 16 (16)

techlyser_web
Shopify Partner
1096 210 223

Hello @eufories 
can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
eufories
Shopify Partner
16 0 0

ThePrimeWeb
Shopify Partner
1127 294 223

Hey @eufories,

You can try this and see 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
#shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div {
  justify-content: center;
}
#shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail {
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}


#shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail a {
    min-height: 53vh;
}


@media only screen and (max-width: 768px) {
  #shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail a {
    min-height: 47vh
  }
  
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706865298931.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
eufories
Shopify Partner
16 0 0

It worked! But there are a few problems

The side gaps and the product card bottom padding/margin are too wide apart. 
The border between product cards need to be at least 1px closer in order to prevent the double border showingUntitled design.png

ThePrimeWeb
Shopify Partner
1127 294 223

Hey @eufories,

 

Remove the code I gave earlier and replace with this. Same file, same section. 😊

 

<style>

#shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div {
  justify-content: center;
}

#shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail {
  margin-right: 0;
  margin-left: -1px;
  margin-top: 0;
  margin-bottom: -1px;
  width: 20%
}

#shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail a {
    min-height: 53vh;
}

@media only screen and (max-width: 768px) {
  #shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail a {
    min-height: 47vh
  }
  
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
eufories
Shopify Partner
16 0 0

I tried that and it solved the border issue
But the 6 products per row ended up turning into 5 products per row as you can see in the image below
The gap between the product card and the page width is still there :/I tried to do some tinkering as well but tbh i dont know how to improve it

On mobile the collection list is no longer responsive since it give me this 😕photo_2024-02-02_02-19-37.jpgUntitled design (1).png

ThePrimeWeb
Shopify Partner
1127 294 223

Hey @eufories,

 

There's actually no fixed gap there that I can remove with a single line of code because the space is filled by the number of product cards that can fit per row. To reduce the gap of the sides, I need to increase the image size. What happens when you increase the image size, that increases the card size, which means less cards can fit in a row. If you want 6 products per row, then I have to reduce the image size so that 6 cards can fit per row. Then the gap on the sides will increase. For me to completely remove the gap on the side, I have to increase the image sizes even further, which means it might reduce the products per row even further. If I reduce the image size to remove the gap then you might end up with more than 6 products per row. But ideally there's no way to guarantee that there will no be a gap on every screen size that everybody is using. Maybe it will look good for you, but somebody else will see gaps.

 

To make it mobile responsive, you can replace the code with the following (Please delete the previous one):

<style>
@media only screen and (min-width: 990px) {
  #shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div {
    justify-content: center;
  }

  #shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail {
    margin-right: 0;
    margin-left: -1px;
    margin-top: 0;
    margin-bottom: -1px;
    width: 20%
  }

  #shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail a {
      min-height: 53vh;
  }
}

@media only screen and (max-width: 989px) {
   #shopify-section-template--22032183755062__featured_collection_DTgWDG > section > div > .thumbnail a {
      min-height: 47vh
    }

}  
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
eufories
Shopify Partner
16 0 0

oh okay, beside all this. is there anyway to implement the same changes to another featured collection? because when i tried adding the featured collection to another page, all the setting above did not apply to it

ThePrimeWeb
Shopify Partner
1127 294 223

This is an accepted solution.

Hey @eufories,

 

Delete the old code and replace it with this

<style>
@media only screen and (min-width: 990px) {
  .shopify-section--featured-collection > section > div {
    justify-content: center;
  }

  .shopify-section--featured-collection > section > div > .thumbnail {
    margin-right: 0;
    margin-left: -1px;
    margin-top: 0;
    margin-bottom: -1px;
    width: 20%
  }

  .shopify-section--featured-collection > section > div > .thumbnail a {
      min-height: 53vh;
  }
}

@media only screen and (max-width: 989px) {
   .shopify-section--featured-collection > section > div > .thumbnail a {
      min-height: 47vh
   }
}  
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
eufories
Shopify Partner
16 0 0

Amazing, that worked perfectly 😄

If I need to assign this same code for other section like collection-list.liquid and product-recommendation.liquid.
I just need to change this?

 

.shopify-section--featured-collection > section > div >

ThePrimeWeb
Shopify Partner
1127 294 223

Hey @eufories,

That is not guaranteed. Their class structure could be different.  You can try and see.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
eufories
Shopify Partner
16 0 0

I tried it and it worked for collection-list but it did not work for product-recommendation 

 

ThePrimeWeb
Shopify Partner
1127 294 223

It's .shopify-section--recommended-products > section > div >

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
eufories
Shopify Partner
16 0 0

hm that did not work either.

it stayed the same

 

ThePrimeWeb
Shopify Partner
1127 294 223

Yeah I noticed. Small detail, but the structure is different

This should work

<style>
@media only screen and (min-width: 990px) {
  .shopify-section--recommended-products > section > div > div {
        justify-content: center;
  }

  .shopify-section--recommended-products > section > div > div > .thumbnail {
    margin-right: 0;
    margin-left: -1px;
    margin-top: 0;
    margin-bottom: -1px;
    width: 20%
  }

  .shopify-section--recommended-products > section > div > div > .thumbnail a {
      min-height: 53vh;
  }
}

@media only screen and (max-width: 989px) {
   .shopify-section--recommended-products > section > div > div > .thumbnail a {
      min-height: 47vh
   }
}  
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
eufories
Shopify Partner
16 0 0

Yeah wow, such a small detail and it worked wonderfully. Thank you so much, you have helped me tremendously with this! 😊