Move section up page JUST on DESKTOP

Jferguson1
Explorer
80 3 6

HI there,

 

I need help moving the email sign up form up the page *just for desktop*. 

 

This is what the page looks like currently: 

Screenshot 2024-03-17 at 13.42.40.png

This is what id like it to look like:

Jferguson1_0-1710682984791.png

 

Many thanks, 

Joe

 

Replies 6 (6)

devcoders
Shopify Partner
63 6 21

Hi @Jferguson1 
If you share your store URL and password with me, I will check and provide you with the solution.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Jferguson1
Explorer
80 3 6

apologies for not adding a url.

 

https://www.tryy.co.uk 

password - help

 

many thanks

devcoders
Shopify Partner
63 6 21

Hi @Jferguson1 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file."

 

div#shopify-section-template--21073429922132__image_with_text_LDm6UV {
margin-top: 0;
}
main#MainContent {
position: relative;
}
section#shopify-section-template--21073429922132__newsletter_UYq3RX {
position: absolute;
top: 43%;
left: 37%;
}

devcoders_0-1710863853490.png

 


 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Jferguson1
Explorer
80 3 6

Hi - the code has seemed to interact with the mobile display - 

 

Screenshot 2024-03-19 at 16.06.42.png

how do i make it not effect the mobile - many thanks

devcoders
Shopify Partner
63 6 21

Hi @Jferguson1 


Remove old css and add this one.

 

@media only screen and (min-width: 749px) {
div#shopify-section-template--21073429922132__image_with_text_LDm6UV {
margin-top: 0;
}
main#MainContent {
position: relative;
}
section#shopify-section-template--21073429922132__newsletter_UYq3RX {
position: absolute;
top: 43%;
left: 37%;
}
}
Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

BSS-Commerce
Shopify Expert
3477 460 516

Hi @Jferguson1 ,

* You can try out the Subscribe email view pages module of our BSS: B2B Lock & Hide Price app.
- Our application will allow you to flexibly edit the content on the page, as well as display it on any page you want... and many more features.

view - 2024-03-25T095011.849.png

I will try to help you fix it manually

Result:

view - 2024-03-25T095046.308.png

Step 1: Go to admin -> Themes -> Edit code
Step 2: Find the theme.liquid file

Step 3: Add the code below before the closing tag of the body tag near the end of the theme.liquid file (see image)

view - 2024-03-25T095159.775.png

  {% if true %}
      <style>
        .newsletter-form__field-wrapper input[name='contact[email]'] {
            border: 1px solid black;
            color: black !important;
        }
        
        .newsletter-form__field-wrapper input[name='contact[email]']:focus {
            outlineL none !important;
        }
        
        .newsletter-form__field-wrapper label.field__label {
            color: black;
        }
        
        .newsletter-form__field-wrapper button#Subscribe {
            color: black;
        }
      </style>
  
      <script>
      
      setTimeout(function() {
          const bannerMedia = document.querySelector('.banner__media.media.scroll-trigger.animate--fade-in');
          const formClone = document.querySelector('#contact_form').cloneNode(true);
          document.querySelector('#contact_form').remove();
          bannerMedia.parentNode.insertBefore(formClone, bannerMedia.nextSibling);
          
          formClone.style.position = 'fixed';
          formClone.style.top = '42%';
          formClone.style.left = '50%';
          formClone.style.transform = 'translate(-50%, -50%)';
          formClone.style.zIndex = '9999';
      }, 1000); 
      
      </script>
    {%- endif -%}

Hope it helps @Jferguson1  

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development