Change placement of items on product grid

Solved

Change placement of items on product grid

jeffreym
Trailblazer
166 3 42

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
1972 564 568

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

wo
Shopify Partner
200 43 42

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
1972 564 568

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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now