Solved

How can I shift text inside input boxes from left to right to right to left in Dawn Theme?

ChicBotique1
Excursionist
31 0 3

hello everyone,

 

i would like your assistance moving all the text inside my input text boxes from left to right :

 

Screenshot 2024-03-31 151430.png

 

to right to left.

 

link to website :

 

Https://ChicBotiqu

 

 

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2127 608 472

This is an accepted solution.

Hey @ChicBotique1,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
label.field__label {
    left: auto !important;
    right: 15px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711888927934.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Sweet_Savior_3
Shopify Partner
1190 96 115

This is an accepted solution.

Hello @ChicBotique1 

 

Welcome to Shopify Community,

 

Please use below CSS:

.field__input, .select__select, .customer .field input, .customer select {
    text-align: right !important;
}
.field__label, .customer .field label {
  left: auto !important;
  right: calc(var(--inputs-border-width) + 2rem);
}
.field__input:focus~.field__label, .field__input:not(:placeholder-shown)~.field__label, .field__input:-webkit-autofill~.field__label, .customer .field input:focus~label, .customer .field input:not(:placeholder-shown)~label, .customer .field input:-webkit-autofill~label {
    right: calc(var(--inputs-border-width) + 2rem);
    left: auto !important;
}

 

OUTPUT:

Sweet_Savior_3_0-1711889326756.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

View solution in original post

Replies 11 (11)

ThePrimeWeb
Shopify Partner
2127 608 472

This is an accepted solution.

Hey @ChicBotique1,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
label.field__label {
    left: auto !important;
    right: 15px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711888927934.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ChicBotique1
Excursionist
31 0 3

@ThePrimeWeb thank you very much brother,

 

you have any idea what it doesn't apply on the checkout page?

 

Screenshot 2024-03-31 155004.png

ThePrimeWeb
Shopify Partner
2127 608 472

Hey @ChicBotique1,

 

Because CSS is not allowed on checkout page. Unfortunately there's nothing you can do about that. Only Shopify Plus customers can change that.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Mamoon
Shopify Partner
1 0 0

What would be the proper solution for Multi Language store? For example, English LTR and Arabic RTL?

Sweet_Savior_3
Shopify Partner
1190 96 115

This is an accepted solution.

Hello @ChicBotique1 

 

Welcome to Shopify Community,

 

Please use below CSS:

.field__input, .select__select, .customer .field input, .customer select {
    text-align: right !important;
}
.field__label, .customer .field label {
  left: auto !important;
  right: calc(var(--inputs-border-width) + 2rem);
}
.field__input:focus~.field__label, .field__input:not(:placeholder-shown)~.field__label, .field__input:-webkit-autofill~.field__label, .customer .field input:focus~label, .customer .field input:not(:placeholder-shown)~label, .customer .field input:-webkit-autofill~label {
    right: calc(var(--inputs-border-width) + 2rem);
    left: auto !important;
}

 

OUTPUT:

Sweet_Savior_3_0-1711889326756.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
ChicBotique1
Excursionist
31 0 3

@Sweet_Savior_3 thank you, your solution affected all text boxes

the other code only affected my form. etc.

ChicBotique1
Excursionist
31 0 3

@ThePrimeWeb @Sweet_Savior_3 

Both solutions work

can you tell me what is a better way to implement the solution?

CSS ? or HTML ?

ThePrimeWeb
Shopify Partner
2127 608 472

HTML doesn't control positioning, CSS is the only option. There is no better way because CSS is the only way. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ChicBotique1
Excursionist
31 0 3

@ThePrimeWeb i have your code in liquid.theme

and @Sweet_Savior_3 on the bottom of base.css

not sure witch solution is more professional..

ThePrimeWeb
Shopify Partner
2127 608 472

What do you mean by professional? It's all upto preference. It's the same thing as driving a red car or a blue car. Nothing is more professional than the other, it's just your preference.

If you want my code in base.css then remove the style tags and paste it there. 

ThePrimeWeb_0-1711890391195.png

 

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Sweet_Savior_3
Shopify Partner
1190 96 115

Hello 

 

You can remove one code and check if everything if fine and do the same with the second code.

Whichever you find relevant you can use it.

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!