How can i text align to left

[Tranquilo]

Hey guys , i'm finish off the details for my shopify store.

However i'd like to move the title 'collectionts' and the subtitle 'autumn' to the left side (text-align).

Could you please help me how to do it? I tried a few things but none of them seem to work.

Tranquilo.store

[Made4uo-Ribe · Accepted solution]

Hi @Tranquilo 

check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

div#shopify-section-template--21527817126216__featured_collection_KfpVnr .product-grid--title, 
div#shopify-section-template--21527817126216__featured_collection_KfpVnr .product-grid--price {
    text-align: left;
}

And save. 

Result:

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

[Moeed · Accepted solution]

Hey @Tranquilo 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.section-title--wrapper .section-description {
    max-width: 100% !important;
    margin-left: 0 !important;
}
.section-title--wrapper {
    align-items: flex-start !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[dws_pvt_ltd]

Hello @Tranquilo, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open base.css" OR "theme.min.css".
6. Add the following code at the end of the file.

Find the CSS with class ".section-title--wrapper" and update css.

.section-title--wrapper {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    margin-bottom: 50px;
}

Find the CSS with class ".section-title--wrapper .section-description" and update css.

.section-title--wrapper .section-description {
    margin: 15px auto 0 0;
    max-width: 50%;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[Made4uo-Ribe · Accepted solution]

Hi @Tranquilo 

check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

div#shopify-section-template--21527817126216__featured_collection_KfpVnr .product-grid--title, 
div#shopify-section-template--21527817126216__featured_collection_KfpVnr .product-grid--price {
    text-align: left;
}

And save. 

Result:

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

[Moeed · Accepted solution]

Hey @Tranquilo 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.section-title--wrapper .section-description {
    max-width: 100% !important;
    margin-left: 0 !important;
}
.section-title--wrapper {
    align-items: flex-start !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[websensepro · Accepted solution]

Hi @Tranquilo ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.section-title--wrapper {
    align-items: flex-start !important;
}
.section-title--wrapper .section-description {
    max-width: 100% !important;
    margin-left: 0 !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[sterinoox]

"Thanks for sharing this code snippet! For those looking to customize product titles and prices on Shopify, this CSS tweak aligns them to the left. It's a great way to enhance your store's layout and improve the user experience."

https://sterinoxsystems.com/pure-steam-generator/

[sterinoox]

Thanks for sharing! If you're looking to optimize your Shopify store further, check out this guide on improving conversion rates and user experience. It has actionable tips that might help: https://sterinoxsystems.com/pure-steam-generator/ . Hope it helps!