Dawn theme - change order of products on my shop page (desktop only)

Store Design
, , ,
1

Hi - I want to achieve the following on my shop tab (www.smara.co.uk). I want to change the positions of how it is displayed on shop tab and realign the 3rd product (Gift Card) so its in line with Small Hoop:

  1. Change order on Shop page so its small hoop, large hoop, smara gift card (desktop and double check it also works for mobile)

Ankita31_1-1724438481903.png
Ankita31_1-1724438481903.png1990Ă—1237 439 KB

  1. I want gift card to appear under the small scan and not in the middle (mobile only)

Ankita31_2-1724438523703.png
Ankita31_2-1724438523703.png1974Ă—1201 254 KB

Thanks,

Ankita

1 Like
2

Hi @Ankita31

Check thiso ne.

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.

.collection.page-width ul#product-grid {
    flex-direction: row !important;
}

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi,

Please try the following steps:

  1. Go to Online Store.
  2. Click Edit code.
  3. Navigate to the assets folder and open base.css
  4. Find the following code:
ul#product-grid {
    justify-content: center !important; 
    flex-direction: row-reverse !important;
}

ul#product-grid {
    justify-content: center !important;
}​

  • Remove this code.

  • justify-content: center is defined twice for ul#product-grid

4

Hi @Made4uo-Ribe - thanks so much!

I tried this and it worked on preview once, and now it will not work. Can you please try to help again.

I also am looking for a mobile only code as per the screenshot above. Thank you in advance :slightly_smiling_face:

5

Hi @DanCodes this code doesn’t seem to work - please can you try to help me again. I am also looking for mobile only code too as per my above screenshots, Thank you

6

Check this one, same instruction.

.collection ul#product-grid {
     flex-direction: row !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Hi @Made4uo-Ribe this still doesn’t work - not sure what is happening :disappointed_face: Really hope you are able to help fix this. Thanks - A

8 
@media (max-width: 991px) {
    .collection ul#product-grid {
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
    }
}

@media (min-width: 992px) {
    .collection ul#product-grid {
        flex-direction: row !important;
    }
}

Try this code

9

Still isn’t working unfortunately! Not sure what is blocking it from moving to the end?!

10

It could be due to the order of the collections. Try going into the Online Store, select “Customize,” then choose “Collection List,” and try changing the order of the displayed collections.

11

I don’t have a gift card coming up under collections. Shopify helped create another template for the gift card as I couldn’t have it read off my products page due to a coded form that is required for my products. Can you suggest anything else?

12

Without seeing the code, it’s difficult for me to come up with a solution at the moment. If you’d like, I can take a look at the code. My email: dansulk@gmail.com.

13

@BSSCommerce-B2B Hi! Are you please able to help me with this? No-one can seem to figure this out on Shopify either! Hopefully you can work your magic :slightly_smiling_face:

1 Like
14

@Ankita31 , Do you remember the code i sent you in the other post, please change it like this
1 Like
15

OMG! You are the best @BSSCommerce-B2B so so helpful and managed to get this sorted for me on the first go! Thank you so so much! :slightly_smiling_face:

1 Like
16

Hi @BSSCommerce-B2B I have sent you a message regarding a similar code for the same page please. Just need to switch the other two products around as the original code I had is not working anymore. Thank you so much in advance :slightly_smiling_face:

17

@Ankita31 , Put this code before in theme.liquid file
1 Like
18

And you’ve done it again! The most helpful and quickest replier - you are so kind and helpful, thank you :slightly_smiling_face: