Change placement of items on product grid

Solved

Change placement of items on product grid

jeffreym
Explorer
73 2 12

I would like my dental pod to be in the centre with the case on the left, I have done this on my main page though cant do it with the shop product grid page.

 

url: hygiadental.com

pw: melek 

Screenshot 2024-08-06 at 12.39.06 PM.png

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
1335 357 415

This is an accepted solution.

Hi @jeffreym ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

BSSCommerceB2B_0-1722915931423.png

 

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

li.grid__item.scroll-trigger.animate--slide-in:nth-child(1) {
    order: 1 !important;
}
li.grid__item.scroll-trigger.animate--slide-in:nth-child(2) {
    order: 2 !important;
}

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_1-1722916051412.png

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


BSS: B2B Wholesale Solution |BSS: B2B Portal, Quote, Net 30 | B: B2B Lock Password Protect


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

wo
Shopify Partner
169 37 35

Manually adjust the order of products in a collection named all. If there is no ''all'', create one.

wo_0-1722913348644.png

 

BSSCommerce-B2B
Shopify Partner
1335 357 415

This is an accepted solution.

Hi @jeffreym ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

BSSCommerceB2B_0-1722915931423.png

 

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

li.grid__item.scroll-trigger.animate--slide-in:nth-child(1) {
    order: 1 !important;
}
li.grid__item.scroll-trigger.animate--slide-in:nth-child(2) {
    order: 2 !important;
}

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_1-1722916051412.png

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


BSS: B2B Wholesale Solution |BSS: B2B Portal, Quote, Net 30 | B: B2B Lock Password Protect


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency