How do i make the ‘featured products’ section go full width on my shopify site (Sahara theme)?
Topic summary
Goal: Make the Featured Products section (Sahara theme) display full width across pages.
Key steps and updates:
- The requester shared a password-protected preview link for troubleshooting.
- Initial fix: Add Custom CSS in Online Store > Themes > Customize > Theme settings to set the specific section’s container max-width to 100%. This made the homepage Featured Products full width.
- Remaining issue: Other collection pages and the “Recommendations” and “Recently Viewed” sections were still not full width.
- Final solution: Update the Custom CSS to target broader selectors for Featured Products, Recently Viewed, and Product Recommendations containers, forcing max-width: 100% (with !important) so these sections become full width site-wide.
Outcome:
- The requester confirmed the updated CSS resolved the issue across all relevant sections and pages.
- Status: Resolved; no further actions requested.
Could you share your store URL?
Store is currently password protected but preview link below - does this help?
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings of that theme.
#shopify-section-template--21515208523810__1658994245757c7b20 .container {
max-width: 100%;
}
Thanks Dan - that worked for the main page but all of the other collection pages where i have ‘Featured Product’ sections is still not full width. Is there a solution for this?
Other sections Noted as ‘Recommendations’ and ‘Recently Viewed’ are also not full width. Do you have code to cover these too?
So please update the code
.section--featured-products .container,
.section--recently-viewed-products .container,
.section--product-recommendations .container {
max-width: 100% !important;
}
Legend! all sorted
1 Like
You are very welcome!