How can I move news letter sign up to footer navigation and have the social media displayed under it

[C-O-J]

Hello, I am attempting to move the email sign-up section to the footer as a column on the right side. I have read several posts from others experiencing similar issues and have tried the recommended solutions, but unfortunately, they haven't worked for me. Any suggestions? Thank you,

[Moeed]

Hey @C-O-J 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[C-O-J]

Hi Moeed,

Here is my store URl chaptersofjoy.com and this is the collaborator request code 7501. 

I am not sure if this is what you were looking for. If not please guide me how to get the code. My shop is not pulish yet. 

Thank you, M

[Moeed]

Your front-end is password protected, can you tell me the front-end password as well?

Best Regards,

Moeed

[C-O-J]

How do i get the password?

[Moeed]

Online Store > Preferences > Scroll down till you see "Password Protection" > Copy the "Password" and paste here.

Best Regards,

Moeed

[C-O-J]

chaptersofjoy.com and the password is 'rewclo'

thank you,

[C-O-J]

Hello Moeed, could you take a look at my issue. Is anything that you can recommend for me to do?

Thank you

[AnneLuo]

Hello, @C-O-J 

Please share the store URL so that I can assist you.

[Vinsinfo]

@C-O-J Please share your store password to check and provide solution for this.

[C-O-J]

chaptersofjoy.com and the password is 'rewclo'

Thank you,

Mahsan

[C-O-J]

chaptersofjoy.com and the password is 'rewclo'

Thank you,

Mahsan

[Vinsinfo]

@C-O-J Please follow below steps to move footer newsletter as a column on right side. Let me know whether it is helpful for you.

1. From admin, go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "footer.liquid" file and search {{ section.settings.newsletter_heading }} and paste the below code at the next line of {%- endif -%}.

{% if section.settings.newsletter_text != blank %}
  <div class="newsletter__subheading rte" >
    {{ section.settings.newsletter_text }}
  </div>
{% endif %}

4. Then, search t:sections.footer.settings.newsletter_heading.label and paste the below code at the next line of }, and save changes.

{
  "type": "richtext",
  "id": "newsletter_heading",
  "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
  "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
},

5. Then go to "section-footer.css" file and paste the below code at the bottom of the file and save changes.

.footer-block__newsletter .newsletter__subheading {
  margin-bottom: 20px;
}
.footer__blocks-wrapper , .footer-block--newsletter {
  display: inline-flex !important;
}
.footer__blocks-wrapper {
  width: 70%;
}
.footer-block--newsletter {
  width: 30%;
}

6. Click "Exit" icon and Then click "Customize" mode on your current theme.

7. Click "Footer" section and enable "Show email signup" checkbox.

NOTE: Change the "Heading" and "Description" as per your need.

8. Now, delete the "Email signup" section displaying at the bottom.

Now, the newsletter will display on right side like below,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[C-O-J]

Hello, Thank you for your response. I get this error after pasting the second code which is step #4 in your email.

 What should I do now?

Thanking you in advance for your help,

Mahsan

[Vinsinfo · Accepted solution]

@C-O-J Sorry! Given newsletter_heading by mistake instead of newsletter_text on step #4. Please use below code like in the screenshot attached in previous comment. Continue the other steps as provided.

{
  "type": "richtext",
  "id": "newsletter_text",
  "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
  "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
},

[C-O-J]

Thank you for the solution you provided. It worked. 

[C-O-J]

How can I add my social media accounts logo also under the news letter?

[Eliuk]

Hello @Vinsinfo Thank you so muh for this. It helped a lot. I have messaged you, Will you please have a look? Thanks

[Vinsinfo]

@Eliuk Please follow the below steps to show the social media logo under the newsletter. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "base.css" file and paste below code at the bottom of the file and save changes.

.footer-block--newsletter {
    flex-direction: column;
    align-items: center;
}
.footer-block__newsletter {
    margin-right: 0;
    width: 100%;
}

@media only screen and (max-width: 750px) {
    .footer-block--newsletter {
        width: 100%;
    }
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Eliuk]

Thank you so much. All done now. You are a star.