How can i text align to left

Store Design
, ,
1

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

Tranquilo_0-1727094599716.png
Tranquilo_0-1727094599716.png1914×752 106 KB

1 Like
2

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%;
}

dws_pvt_ltd_0-1727094937324.png
dws_pvt_ltd_0-1727094937324.png1828×577 78.7 KB

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

3

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:

Made4uoRibe_0-1727095070743.png
Made4uoRibe_0-1727095070743.png1472×727 96.3 KB

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

4

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 tag

RESULT:

Moeed_0-1727095111255.png
Moeed_0-1727095111255.png1888×668 88 KB

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

Best Regards,
Moeed

5

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

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

Thanks!

6

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!

7

“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/