Hello, I would like to know how to center the description on my collection page, I’m with theme Origin. I’ve figured out the title already but am confused on the description. I’d also like to know how to change product amount per page to 48 and products per row to 3 (mobile) on the collection page if anyone can help at all! Thank you!
Topic summary
Goal: center the collection description in the Origin theme and increase product grid density (mobile 3 per row; 50 per page).
Centering description: A CSS fix was provided and confirmed working: add .collection-hero__description { margin: 0 auto !important; } to base.css. “Margin: 0 auto” is a CSS rule that horizontally centers block elements.
Adjusting product grid: Guidance to change these via Theme Editor (Online Store > Themes > Customize > Collections > Default collection > Product grid) was shared. “Product grid” controls items per row and items per page.
Theme limitations: The Origin theme’s editor only allows up to 2 per row on mobile and 24 per page, which does not meet the request for 3 per row and 50 per page.
Other suggestions: One reply suggested adding code in theme.liquid before , but no specific code was provided. Another advised contacting Shopify support or an expert for changes beyond the theme’s defaults.
Outcome: Description centering resolved. Product grid targets (3 per row mobile, 50 per page) remain unresolved due to theme constraints. Discussion open; no final solution for exceeding limits. Screenshots were provided to illustrate editor navigation.
Hi @Cathy_Oughton , This is Richard from PageFly - Landing page builder.
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best Regards,
PageFly
Hi there,
You can center description by adding this CSS code at the bottom of your base.css file
.collection-hero__description { margin: 0 auto !important; }
And change product amount and product per row on collection page from store admin > Sale channels > Online store > Themes > Customize > click dropdown menu at the top > Collections > Default collection > Product grid
This worked, thank you!
The description code worked, but on the theme editor the only options are for up to 2 per row on mobile, and 24 per page. I’d like 3 per row on mobile, and 50 per page.
@Cathy_Oughton , I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.