FROM CACHE - en_header
Promotion image

Make Collection Hero Description Full Width

Solved

Make Collection Hero Description Full Width

webmasterxclus
Tourist
9 0 2
‎03-04-2024 09:19 PM

I'm trying to make the Collection Hero Description on the Collection pages full size so it's not offset to the left...i've centered the text but i need it to go across the full container, can someone help please....here is the screenshot of the issue

 

Screenshot 2024-03-04 at 5.44.28 PM.png

 

 

Labels:
737 Views
0 Likes
Report
Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
11288 2212 2381
‎03-04-2024 09:23 PM

This is an accepted solution.

Hi @webmasterxclus 

Dan here from Ryviu: Product Reviews & QA app. 

 

You can do that by adding this code to theme.liquid file after <head> 

<style>
.collection-hero__description { max-width: 100% !important; }
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

729 Views
1 Like
Report
In response to webmasterxclus

Dan-From-Ryviu
Shopify Partner
11288 2212 2381
‎03-05-2024 08:59 PM

This is an accepted solution.

I added incorrect code, please use this.

<style>
.collection-hero__description { max-width: 100% !important; }
.card__heading, 
.card-information {
text-align: center !important;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

656 Views
0 Likes
Report
Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
11288 2212 2381
‎03-04-2024 09:23 PM

This is an accepted solution.

Hi @webmasterxclus 

Dan here from Ryviu: Product Reviews & QA app. 

 

You can do that by adding this code to theme.liquid file after <head> 

<style>
.collection-hero__description { max-width: 100% !important; }
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

730 Views
1 Like
Report
In response to Dan-From-Ryviu

webmasterxclus
Tourist
9 0 2
‎03-04-2024 09:42 PM

Thank alot, that worked! Also can you tell me how to center the product name and price under the images on same page...here is screenshot

 

Screenshot 2024-03-04 at 8.40.57 PM.png

718 Views
0 Likes
Report
In response to webmasterxclus

Dan-From-Ryviu
Shopify Partner
11288 2212 2381
‎03-04-2024 10:01 PM

Hi @webmasterxclus 

You can do that by updating the previous code to this. 

<style>
.collection-hero__description { max-width: 100% !important; }
.card__heading, 
.card-information {
text-align: center;
}
</style>

 

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

704 Views
0 Likes
Report
In response to Dan-From-Ryviu

webmasterxclus
Tourist
9 0 2
‎03-04-2024 10:38 PM

That worked for the description but not the price 😕

Screenshot 2024-03-04 at 9.38.01 PM.png

691 Views
0 Likes
Report
In response to webmasterxclus

Dan-From-Ryviu
Shopify Partner
11288 2212 2381
‎03-04-2024 10:42 PM

Code updated 

<style>
.collection-hero__description { max-width: 100% !important; }
.card__heading, 
.card-information {
text-align: center;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

690 Views
0 Likes
Report
In response to Dan-From-Ryviu

webmasterxclus
Tourist
9 0 2
‎03-05-2024 12:09 AM

the updated code did not work to center price, it looks to be the same code as the first

682 Views
0 Likes
Report
In response to Dan-From-Ryviu

webmasterxclus
Tourist
9 0 2
‎03-05-2024 01:28 AM

can you send me correct code to center the price please

677 Views
0 Likes
Report
In response to webmasterxclus

Dan-From-Ryviu
Shopify Partner
11288 2212 2381
‎03-05-2024 08:59 PM

This is an accepted solution.

I added incorrect code, please use this.

<style>
.collection-hero__description { max-width: 100% !important; }
.card__heading, 
.card-information {
text-align: center !important;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

657 Views
0 Likes
Report
In response to Dan-From-Ryviu

webmasterxclus
Tourist
9 0 2
‎03-06-2024 04:28 PM

Thanks again! That worked great

594 Views
0 Likes
Report

Community Blog Articles

shopp-e-1741972742895593780274096851.png
Verification requirement deadline fast approaching for Shopify Payments Can...

In Canada, payment processors, like those that provide payment processing services t...

By Jacqui Mar 14, 2025
Shopify_0-1741780029041.png
New learning path from Shopify Academy: How to create a digital marketing s...

Unlock the potential of marketing on your business growth with Shopify Academy's late...

By Shopify Mar 12, 2025
CRO-Community-Promo.jpg
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...

Learn how to increase conversion rates in every stage of the customer journey by enroll...

By Shopify Mar 5, 2025
Terms of Service Privacy Policy