Re: Beyond theme changing positioning of a form

Solved

Beyond theme changing positioning of a form

HIEa
Excursionist
39 1 6

Does anyone know how I can switch the positioning of a form? E.g I need the username/password login details at the top of the page

 

wsale login.png

Accepted Solution (1)
TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Actually, we could do a lot more sorting, but under the current circumstances, the code below should suffice. It is also possible to sort individually with a special effort or easily solve other issues. The best approach is to test it and let me know if there are any problems.

 

note:The domain name is very nice. I hope I get the chance to visit it someday 🙂

 

Terence..

 

The following code will do what you want. .

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

<style>

.template--page.page--wholesale .template-page--wrapper [data-item="rte-content"] {
    display: flex;
    flex-direction: column;
}



.template--page.page--wholesale .template-page--wrapper [data-item="rte-content"] div:nth-child(4) {
    order: 2;
}

.template--page.page--wholesale .template-page--wrapper [data-item="rte-content"] div:nth-child(5) {
    order: 1;
}

  
</style>

 

shopify.head.jpg

 

 

TerenceKEANE_0-1716991782302.png

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 9 (9)

saim007
Shopify Partner
550 70 93

You have to put or call the code on top side then it will show on the top side.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

TerenceKEANE
Shopify Partner
511 86 78

Hi,

 

What you want can be done. What's the link to your website?

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
HIEa
Excursionist
39 1 6

https://heaveninearth.com.au/

 I am just unsure what code I am moving to put it at the top

saim007
Shopify Partner
550 70 93

@HIEa You have to first check where the code is coming i mean from the page template or inside page see screenshot below - 

 

saim007_0-1716958316656.png

From inside the page then click on the code icon and search for the <div class="_LoginContainer"> and cut the whole code till </div> and move to the top of the code, and if code is coming from the template then go to edit code > find for the template and move the code <div class="_LoginContainer"> to top of the code below <div data-item="rte-content"> this code, so you code will look like below - 

 

<div data-item="rte-content">
    <div class="_LoginContainer"> 
<span class="_LoginLabel UserName">User Name</span> 
<input id="JobSync_UserName"
            type="text" class="_LoginTextBox UserName" onkeypress="enterClicks(event);" value=""> 
<span class="_LoginLabel Password">Password</span> 
<input id="JobSync_Password" type="password" class="_LoginTextBox Password" onkeypress="enterClicks(event);"> 
<span class="_LoginCheckBox"> 
<input id="JobSync_Remember" type="checkbox"> <label for="JobSync_Remember">Remember Me</label> </span> <br>
        <input id="JobSync_LoginButton" type="button" class="_LoginButton" value="Sign In" onclick="ajaxLogin(&quot;https://web.salesin.com/&quot;, &quot;https://b2b.salesin.com/&quot;, &quot;https://auth.salesin.com/&quot;, &quot;HUl4BSCJj+N/DNa0HFMRvw==&quot;); return false;">
        <span id="JobSync_LoginErrorMessage" class="_LoginInvalidCredentials" style="display: none;"> <br></span>
        <div id="JobSync_LoadingFakeButton" class="_LoginButton Loading" style="display: none;"></div> <a
            class="_LoginLink" href="#" onclick="showForgotPassword();">I forgot my password</a>
        <div id="JobSync_ForgotPasswordPanel" class="forgotPasswordPopup" style="display: none;">
            <div> <span class="_ForgotPasswordInstruction">Please enter your email address, and a link will be sent to
                    you to reset your password.</span>
                <div class="emailContainer"> <span class="_ForgotPasswordEmailLabel">Email:</span> <input
                        id="JobSync_ForgotPasswordEmail" type="text" class="_LoginTextBox ForgotPassword"> </div> <span
                    id="JobSync_ForgotPasswordMessageDone" class="_ForgotPasswordEmailMessage" style="display: none;">If
                    we have found a valid email account, a link to reset your password has been sent to this email
                    address.</span>
            </div>
            <div class="resetPasswordButtons"> <input id="JobSync_ForgotPasswordSend" type="button" class="_LoginButton"
                    value="Send Password"
                    onclick="sendForgotPassword(&quot;https://web.salesin.com/&quot;, &quot;https://b2b.salesin.com/&quot;, &quot;https://auth.salesin.com/&quot;, &quot;HUl4BSCJj+N/DNa0HFMRvw==&quot;);">
            </div>
        </div>
    </div>
Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
HIEa
Excursionist
39 1 6

Would it be this one, as I can't find the code you are relating to

<div class="account--button-container">
<button
class="account--sign-in"
data-item="button"
data-text="{{- sign_in_t -}}"
value="{{ sign_in_t }}"
type="submit"
{% unless settings.transitions--buttons %}
data-transition-button
{% endunless %}

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

Actually, we could do a lot more sorting, but under the current circumstances, the code below should suffice. It is also possible to sort individually with a special effort or easily solve other issues. The best approach is to test it and let me know if there are any problems.

 

note:The domain name is very nice. I hope I get the chance to visit it someday 🙂

 

Terence..

 

The following code will do what you want. .

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

<style>

.template--page.page--wholesale .template-page--wrapper [data-item="rte-content"] {
    display: flex;
    flex-direction: column;
}



.template--page.page--wholesale .template-page--wrapper [data-item="rte-content"] div:nth-child(4) {
    order: 2;
}

.template--page.page--wholesale .template-page--wrapper [data-item="rte-content"] div:nth-child(5) {
    order: 1;
}

  
</style>

 

shopify.head.jpg

 

 

TerenceKEANE_0-1716991782302.png

 

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
HIEa
Excursionist
39 1 6

Thank you Terence, very helpful.

Any idea why there is an arrow?

arow.png

TerenceKEANE
Shopify Partner
511 86 78

You are welcome.. It was just a small thing for me. 🙂

 

I'm not sure what level of assistance you're looking for here, but if you're seeking affordable, monthly, or long-term advanced help, we can also offer you the 'Shopify Premium Support' service that we provide to many others here. Our service is not hourly or per project, it's monthly. You can request as much assistance as you need.

 

There is no limit as a support request!

 

Generally, we provide superficial assistance here. The detailed help is provided to our clients through 'Premium Support.' 

 

If you have an e-commerce store or website, working with someone who can provide continuous assistance will always be better for you.

 

In addition to quick solutions, we provide:

  • Fast Turnaround
  • Dedicated Advanced Front-End Coding Assistance with CSS and Javascript
  • Animated Coding Support
  • Free Advanced Apps
  • Comprehensive On-Site and Off-Site SEO Reports
  • Expert Consulting
  • Unique Mobile Premium Features
  • Design and Frontend Management

and much more...

 

Maybe you're tired of constantly seeking help here, so I wanted to write this. Assistance on the Shopify community is usually quite superficial.

 

If you're interested, you can check out the link in my signature. Feel free to reach out via private message, email, or WtApp if you have any questions. 🙏

 

Terence...

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
HIEa
Excursionist
39 1 6

Oh no I seem to have lost my form builder now??