Increase width of related product Section & Center title - DAWN Theme

ManuelH
Explorer
70 3 11

Hey id like to increase the width of the related product section on the product page. Also id want to put the title "You may also like" in the center and change the color of it. 

Anybody know how to do all that?

 

ManuelH_0-1716889493517.png

 

Replies 5 (5)

techlyser_web
Shopify Partner
1606 299 322

Hello @ManuelH 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
ManuelH
Explorer
70 3 11

arent the selectors the same for all in DAWN theme 14.0?

 

techlyser_web
Shopify Partner
1606 299 322

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  product-recommendations.related-products.page-width {
     padding: unset !important;
     margin: unset !important;
     max-width: 100% !important;
  }
  .related-products h2.related-products__heading.inline-richtext.h2 {
      text-align: center !important;

      color: #d5290d !important; /*change according to you*/
   }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Anshul_arora
Navigator
407 115 80

Hello @ManuelH ,


I understand you are looking to increase the 'You may also like' section size and change the heading text placement.

You can implement this change with the help of the CSS code.

Please add the below-mentioned code at the bottom of theme.liquid file before </body> tag and save.

<style>

product-recommendations.related-products.page-width.section-template--21651094733124__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
max-width: 100% !important;
}

h2.related-products__heading.inline-richtext.h2 {
text-align: center !important;
color: blue;
}

</style>

[Please feel free to change the max-width- px size and color of the font.]

After applying code output will be like this -: https://prnt.sc/uxKRPieZ80jP

Anshul_arora_0-1716892272582.png

 

I hope the solution helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

Made4uo-Ribe
Shopify Partner
6361 1525 1895

Hi @ManuelH 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

product-recommendations.related-products.page-width.section-template--21651094733124__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
    max-width: 100%;
}

 

And Save. 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.