Customise blocks in Footer Trade Theme

[letsgetwasted]

Hi!

I’d like to customise some of my footer elements in Trade Theme - see screenshot of how it is currently and how I’d like it to sit ideally

• Newsletter text to be flushed to the left, sign up box goes to the right, box doesn’t have curved edges
• Footer - padding to be fixed instead of everything right to the edges
• Brand description flushed to the left
• Quick links to the right

Thank you so much in advance!!!

Shopify URL: https://65a186-44.myshopify.com/

Password: meerew

[dhaval_dev]

Hello @letsgetwasted ,
You can check in theme customize for create this type of design.
and If the theme does not provide this type of customization then you need to contact a shopify developer.
I am a shopify developer with 5+ years of experience and this is my contact email(dhavalgadhiya36@gmail.com).

[GTLOfficial]

Hii @letsgetwasted
this is not a theme design you need a Shopify expert so he can custom code and make a design similar to this.

Please let me know if you need any assistance we will help you.

Thanks
GTL official

[Made4uo-Ribe]

Hi @letsgetwasted

Do you mean like this?

check this one out.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 749px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
}
.footer-block.grid__item.scroll-trigger.animate--slide-in {
    grid-column: 1;
    width: 100%;
}
div.footer__content-top.page-width > div.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in > div:nth-child(3) {
    grid-column: 3 / span 1;
    grid-row: 1;
}
div.footer__content-top.page-width > div.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in > div:nth-child(4) {
    grid-column: 4;
    grid-row: 1;
}
.footer-block--newsletter {
    justify-content: left;
    margin-top: 0px;
}
.newsletter__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 120rem;
    margin: auto;
    padding: 40px 0px;
}
.newsletter.center {
    background: #1a1a1a;
}
#shopify-section-sections--15251939426359__newsletter_dqh7pw > div > div > div:nth-child(3) {
    grid-column: 2;
}
.newsletter__subheading.rte.scroll-trigger.animate--slide-in {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    width: 100%;
    justify-content: left;
}
h2.inline-richtext.h2.scroll-trigger.animate--slide-in {
    text-align: left;
    width: 60%;
}
form#contact_form {
    margin-left: 0px;
}
}

And Save.

[letsgetwasted]

Hi @Made4uo-Ribe ,

oh wow, yes very close! Just a few minor alignment things, how can I tweak them?

• Sign up for newsletter text to be aligned with the sign up form as well as logo + text below
• Text under logo to be directly under, without a gap
• How can I remove the instagram icon in the middle?

Thank you so much!!

[Made4uo-Ribe]

Add this one.

@media screen and (min-width: 750px) {
    .newsletter__wrapper {
        padding-left: 0rem;
        column-gap: 9%;
    }
.footer-block:nth-child(2) {
    grid-row: 1;
    align-self: center;
}
.footer-block:last-child:not(.footer-block-image) {
    align-self: flex-end;
}
.footer__list-social.list-social:only-child {
    display: none;
}
.newsletter__wrapper>*+* {
    margin-top: 0px;
}
.footer-block.grid__item.scroll-trigger.animate--slide-in {
    grid-row: 1;
}
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[letsgetwasted]

@Made4uo-Ribe I’ve added that in, the Instagram icon is now gone (thank you!) but the text is still not aligned, am i doing something wrong? ?

[Made4uo-Ribe]

Add margin with important. Like the same code below.

.newsletter__wrapper>*+* {
    margin-top: 0px !important;
}

And Save.