How to align text in tabs to left?

[TaraBNL]

Hi! Using Impact Theme and want to align all text in tabs left. Can someone tell me how to do this? Thank you so much!

[niraj_patel]

Hello @TaraBNL
Can you share store URL?

[oscprofessional]

Hello @TaraBNL ,
Could You Please Share Your Store URl , If Your Store is Password Protected then Please Share Password as Well.

[oscprofessional]

HEllo @TaraBNL ,

There are two ways to align the text left in tabs on the Impact Theme:

1. Using the Theme Editor:

   • Log in to your Shopify admin.
   • Click on Online Store > Themes.
   • Find the Impact theme and click Actions > Customize.
   • In the theme editor, navigate to the section that contains the tabs you want to modify. This will typically be the product page section.
   • Once you’ve located the tab section, click on it to open the settings.
   • Look for a setting labeled Text Alignment or something similar. This setting will allow you to choose how the text in the tabs is aligned.
   • Select Left from the dropdown menu.
   • Click Save to apply your changes.

2. Using CSS:

   • If you’re comfortable with CSS, you can also use it to align the text left in your tabs. Here’s the CSS code you would need to add to your theme.css file:

   CSS

   .tabs {
       text-align: left;
   }
   

[dreamtechzone_5]

Hello Oscprofessional!

This is the Shopify Testament theme. I haven’t live the theme yet. I want to add text to the marked place on the cart page and pop-up page, Is it possible? Text Here (We prioritize small batches for fresh products every time. Don’t forget to explore retail stores in the menu) Thank you.

https://themes.shopify.com/themes/testament/styles/genesis/preview

Pop Up Page

Cart Page

[TaraBNL]

The first option is not working, there is no setting that matches your answer.
The second option: I tried, but nothing is changing. I feel like a dumb one today

The store url is https://nofancylabel.com/

[TaraBNL]

https://nofancylabel.com/

[niraj_patel]

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 on theme.liquid

@media screen and (min-width: 700px) { .tabs-nav__button[aria-selected=true] { text-align: left !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[TaraBNL]

It’s not working…

[niraj_patel]

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 on theme.liquid

@media screen and (min-width: 700px) { .tabs-nav__button.text-center { text-align: left !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[TaraBNL]

Also not working… I am very grateful for your help, hopefully there is another CSS-code of solution.

[oscprofessional]

Hello @dreamtechzone_5 ,

Yes, it is possible to add text to the cart page and pop-up page on the Shopify Testament theme. Here’s how to do it:

Editing the Cart Page

1. From your Shopify admin, navigate to Online Store > Themes.
2. Find the Testament theme and click Actions > Edit code.
3. In the Assets folder, navigate to the snippets folder and open the cart.liquid file.
4. Find the place where you want to add your text. This is typically below the list of items in your cart.
5. Add the following code snippet, replacing Your desired text here with your actual text:

  

Your desired text here

6. You can also add CSS styles to the .cart-text class in the theme.scss or theme.css file to style your text according to your preferences.

Editing the Pop-up Page

The pop-up page you’re referring to is likely the “Cart Drawer” which appears when you click on the cart icon.

1. In the theme code editor, navigate to the Snippets folder and open the cart-drawer.liquid file.
2. Find the place where you want to add your text. This is typically below the product summary in the cart drawer.
3. Add the same code snippet you used for the cart page, replacing Your desired text here with your actual text:

  

Your desired text here

4.Similar to the cart page, you can style the text using CSS.

Saving the Changes

Once you’ve added your text and made any styling changes, be sure to save your changes to the cart.liquid and cart-drawer.liquid files. Then, you can preview your theme to see the changes reflected on the cart page and cart drawer pop-up.

Caution

It’s important to note that editing your theme code can potentially break your store’s functionality if not done correctly. If you’re not comfortable making these edits yourself, it is recommended that you consider hiring a Shopify expert to make the changes for you. We are Here to help You.

[TaraBNL]

Hi! My question was about aligning text in tabs left. Do you have a solution?

[oscprofessional]

Hello @TaraBNL ,
For Your Query Please Provide me the Store Password.

[TaraBNL]

lenohb

[oscprofessional]

Hello @TaraBNL ,
Could you please specify the section or part where you’d like to make changes?

[TaraBNL]

On the productpages, below the product details are tabs: https://nofancylabel.com/products/cleanse-like-a-boss-micellar-makeup-remover

[BSSCommerce-HDL]

Hi @TaraBNL

Please follow these steps:

• Navigate to Online store → Themes → Edit code

• Search for the file theme.css in the theme code

• Add this CSS code at the end of the file and save the change

@media screen and (min-width: 700px) {
    .tabs-nav__button {
        text-align: left !important;
    }
}

The final result should look like this

Really hope this helps

[oscprofessional]

Hello @TaraBNL ,
Here is the code you can try. I hope it useful- Go to the Online Store-> Theme-> Edit code-> Assets>theme.css → Add code at the bottom.

.tabs-container .text-center {
	text-align: left;
}

[TaraBNL]

Hi, thanks for the feedback, but I don’t want the headings aligned left, I want the content in the tabs to align left