Center related products cards

Solved

Center related products cards

sonia-limone
Tourist
5 0 1

Hello!
I created my website that has only 3 products. I added a related products section inside my product template and I set it to 3 columns on desktop but the product cards align to the left and I would like to center the cards and the title. See screenshots below.

sharkbike_related-products_setup.png

 

sharkbike_related-products.png

 

Thank you very much in advance!

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

Hi @sonia-limone 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

ul.grid.product-grid {

    display: flex !important;

    justify-content: center;

}

Additionally, on the home page, you can add a featured collection so users can quickly access your products from the home page.

PageFlyHenry_0-1718810511726.png

 

 

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
4304 1105 1353

Hey @sonia-limone 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
sonia-limone
Tourist
5 0 1

suyash1
Shopify Partner
9529 1190 1528

@sonia-limone - can you please share this page link?

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
sonia-limone
Tourist
5 0 1
suyash1
Shopify Partner
9529 1190 1528

@sonia-limone - it is in the center already

 

suyash1_0-1718810313899.png

 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

Hi @sonia-limone 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

ul.grid.product-grid {

    display: flex !important;

    justify-content: center;

}

Additionally, on the home page, you can add a featured collection so users can quickly access your products from the home page.

PageFlyHenry_0-1718810511726.png

 

 

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

sonia-limone
Tourist
5 0 1

Thank you very much! It worked!😍

 

"Additionally, on the home page, you can add a featured collection so users can quickly access your products from the home page."

Those two product cards under the title are a featured collection section with the main two products, but thank you for the advice!

PageFly-Henry
Shopify Partner
1184 335 283

You are welcome @sonia-limone 😊

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.