Footer customization dawn theme

[Aliaaaa32]

This is my footer code can anyone help me please to transfer the email sign up next to the footer menu so they could be on the same column so it could look like the attached design instead of the second screenshot

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ ‘section-footer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-newsletter.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-payment.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-social.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.footer {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
}

.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.footer {
margin-top: {{ section.settings.margin_top }}px;
}

.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- liquid assign has_social_icons = true if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank assign has_social_icons = false endif

if settings.brand_image == blank and settings.brand_headline == blank and settings.brand_description == blank
assign brand_empty = true
endif

if section.blocks.size == 1 and section.blocks[0].type == ‘brand_information’ and brand_empty and has_social_icons == false and section.settings.newsletter_enable == false and section.settings.enable_follow_on_shop == false
assign only_empty_brand = true
endif
-%}
{%- if section.blocks.size > 0
or section.settings.newsletter_enable
or section.settings.show_social
and has_social_icons == true
or section.settings.enable_follow_on_shop
-%}
{%- unless only_empty_brand -%}

{%- if section.blocks.size > 0 -%} {%- liquid if section.blocks.size == 9 assign footer_grid_class = 'grid--3-col-tablet' elsif section.blocks.size > 6 assign footer_grid_class = 'grid--4-col-desktop' elsif section.blocks.size > 4 assign footer_grid_class = 'grid--3-col-tablet' endif -%}

{%- for block in section.blocks -%}

{%- if block.settings.heading != blank -%}

{{- block.settings.heading -}}

{%- endif -%}

{%- case block.type -%}
{%- when ‘@app’ -%}
{% render block %}
{%- when ‘text’ -%}

{{ block.settings.subtext }}

{%- when 'link_list' -%} {%- if block.settings.menu != blank -%}

{%- for link in block.settings.menu.links -%}
• {{ link.title }}
{%- endfor -%}

{%- endif -%} {%- when 'brand_information' -%}

{%- if settings.brand_image != blank -%} {%- assign brand_image_height = settings.brand_image_width | divided_by: settings.brand_image.aspect_ratio -%}

{{ settings.brand_image | image_url: width: 1100 | image_tag: loading: 'lazy', widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100', height: brand_image_height, width: settings.brand_image_width }}

{%- endif -%} {%- if settings.brand_headline != blank -%}

{{ settings.brand_headline }}

{%- endif -%} {%- if settings.brand_description != blank -%}

{{ settings.brand_description }}

{%- endif -%} {%- if block.settings.show_social and has_social_icons -%} {%- render 'social-icons', class: 'footer__list-social' -%} {%- endif -%}

{%- when 'image' -%}

{%- if block.settings.image != blank -%} {%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%}

{%- else -%} {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%}

{%- endcase -%}

{%- endfor -%}

{%- endif -%}

{%- if section.settings.newsletter_enable -%}

{%- if section.settings.newsletter_heading != blank -%}

{{ section.settings.newsletter_heading }}

{%- endif -%} {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}

{{ 'newsletter.label' | t }} {% render 'icon-arrow' %}

{%- if form.errors -%} {%- render 'icon-error' -%} {{- form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email -}} {%- endif -%}

{%- if form.posted_successfully? -%}

{% render 'icon-success' -%} {{- 'newsletter.success' | t }}

{%- endif -%} {%- endform -%}

{%- endif -%}

{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}

{% comment %} TODO: enable theme-check once `login_button` is accepted as valid filter {% endcomment %} {% # theme-check-disable %} {{ shop | login_button: action: 'follow' }} {% # theme-check-enable %}

{%- endif -%}

{%- if section.settings.show_social and has_social_icons -%}
{%- render ‘social-icons’, class: ‘footer__list-social’ -%}
{%- endif -%}

{%- endunless -%} {%- endif -%}

{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{%- render 'country-localization', localPosition: 'FooterCountry' -%}

{%- endform -%} {%- endif -%}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘FooterLanguageForm’, class: ‘localization-form’ -%}

{{ 'localization.language_label' | t }}

{%- render 'language-localization', localPosition: 'FooterLanguage' -%}

{%- endform -%} {%- endif -%}

{%- if section.settings.payment_enable -%}

{{ 'sections.footer.payment' | t }}

{%- for type in shop.enabled_payment_types -%}
• {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{%- endfor -%}

{%- endif -%}

© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url -}} {{ powered_by_link }} {%- if section.settings.show_policy -%}

{%- for policy in shop.policies -%} {%- if policy != blank -%}
• {{ policy.title }}
{%- endif -%} {%- endfor -%}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.footer.name”,
“blocks”: [
{
“type”: “@app”
},
{
“type”: “link_list”,
“name”: “t:sections.footer.blocks.link_list.name”,
“settings”: [
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “Quick links”,
“label”: “t:sections.footer.blocks.link_list.settings.heading.label”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “footer”,
“label”: “t:sections.footer.blocks.link_list.settings.menu.label”,
“info”: “t:sections.footer.blocks.link_list.settings.menu.info”
}
]
},
{
“type”: “brand_information”,
“name”: “t:sections.footer.blocks.brand_information.name”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.footer.blocks.brand_information.settings.paragraph.content”
},
{
“type”: “header”,
“content”: “t:sections.footer.blocks.brand_information.settings.header__1.content”
},
{
“type”: “checkbox”,
“id”: “show_social”,
“default”: true,
“label”: “t:sections.footer.blocks.brand_information.settings.show_social.label”,
“info”: “t:sections.footer.blocks.brand_information.settings.show_social.info”
}
]
},
{
“type”: “text”,
“name”: “t:sections.footer.blocks.text.name”,
“settings”: [
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “Heading”,
“label”: “t:sections.footer.blocks.text.settings.heading.label”
},
{
“type”: “richtext”,
“id”: “subtext”,
“default”: “

Share contact information, store details, and brand content with your customers.

”,
“label”: “t:sections.footer.blocks.text.settings.subtext.label”
}
]
},
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “range”,
“id”: “image_width”,
“min”: 50,
“max”: 550,
“step”: 5,
“unit”: “px”,
“label”: “Image width”,
“default”: 100
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Image alignment on large screen”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “center”
}
]
}
],
“settings”: [
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__1.content”,
“info”: “t:sections.footer.settings.header__1.info”
},
{
“type”: “checkbox”,
“id”: “newsletter_enable”,
“default”: true,
“label”: “t:sections.footer.settings.newsletter_enable.label”
},
{
“type”: “inline_richtext”,
“id”: “newsletter_heading”,
“default”: “Subscribe to our emails”,
“label”: “t:sections.footer.settings.newsletter_heading.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__9.content”,
“info”: “t:sections.footer.settings.header__9.info”
},
{
“type”: “checkbox”,
“id”: “enable_follow_on_shop”,
“default”: true,
“label”: “t:sections.footer.settings.enable_follow_on_shop.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__2.content”,
“info”: “t:sections.footer.settings.header__2.info”
},
{
“type”: “checkbox”,
“id”: “show_social”,
“default”: true,
“label”: “t:sections.footer.settings.show_social.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__3.content”,
“info”: “t:sections.footer.settings.header__4.info”
},
{
“type”: “checkbox”,
“id”: “enable_country_selector”,
“default”: true,
“label”: “t:sections.footer.settings.enable_country_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__5.content”,
“info”: “t:sections.footer.settings.header__6.info”
},
{
“type”: “checkbox”,
“id”: “enable_language_selector”,
“default”: true,
“label”: “t:sections.footer.settings.enable_language_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__7.content”
},
{
“type”: “checkbox”,
“id”: “payment_enable”,
“default”: true,
“label”: “t:sections.footer.settings.payment_enable.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__8.content”,
“info”: “t:sections.footer.settings.header__8.info”
},
{
“type”: “checkbox”,
“id”: “show_policy”,
“default”: false,
“label”: “t:sections.footer.settings.show_policy.label”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.footer.settings.margin_top.label”,
“default”: 0
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“default”: {
“blocks”: [
{
“type”: “link_list”
},
{
“type”: “text”
}
]
}
}
{% endschema %}

[Made4uo-Ribe]

Hi @Aliaaaa32

It’s a lot too scroll , You can add new section on the footer. Like this.

It will automatically show up on the menu. Then we can hide the other newsletter using css code. I would need your store URL for that.

[BSSCommerce-B2B]

Dear @Aliaaaa32 ,

I have reviewed your requirement, you just need to e customize theme and the issue will be resolved. You can follow my instructions!

In my example, I used Refresh theme, and Dawn theme is similar.

Step 1: Go to Admin → Online store → Theme > Customize:

Step 2: Add Section (Email Signup) in footer:

Go to Footer > Add Section > Email Signup:

And the result displayed Email signup on Footer

Step 3: Save and reload home page.

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

Have a nice day sir!

[Aliaaaa32]

I want to customize it so the email sign up appears in the footer next to the footer menu on the same row not above each other like the screen shot i attached

[BSSCommerce-B2B]

Hi @Aliaaaa32 ,

Sorry for misunderstanding your requirement.

To adjust the footer so that the email signup form appears next to the footer menu, you’ll need to modify the HTML structure and potentially the CSS to ensure proper alignment. Here is how you can achieve that:

1. Update HTML Structure: Combine the newsletter form and the footer menu into a single parent div to ensure they are placed side by side.

Move the newsletter form inside the footer blocks wrapper where the footer menu is located:

    {%- for block in section.blocks -%}
    

        {%- if block.settings.heading != blank -%}
        ## {{-
            block.settings.heading -}}
        {%- endif -%}

        {%- case block.type -%}
        {%- when '@app' -%}
        {% render block %}
        {%- when 'text' -%}
        
            {{ block.settings.subtext }}
        

        {%- when 'link_list' -%}
        {%- if block.settings.menu != blank -%}
        
            {%- for link in block.settings.menu.links -%}
            - {{ link.title }}
                
            
            {%- endfor -%}
        

        {%- endif -%}
        {%- when 'brand_information' -%}
        
            {%- if settings.brand_image != blank -%}
            {%- assign brand_image_height = settings.brand_image_width
            | divided_by: settings.brand_image.aspect_ratio
            -%}
            

                {{
                settings.brand_image
                | image_url: width: 1100
                | image_tag:
                loading: 'lazy',
                widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100',
                height: brand_image_height,
                width: settings.brand_image_width
                }}
            

            {%- endif -%}
            {%- if settings.brand_headline != blank -%}
            ## {{ settings.brand_headline
                }}
            {%- endif -%}
            {%- if settings.brand_description != blank -%}
            {{ settings.brand_description }}

            {%- endif -%}
            {%- if block.settings.show_social and has_social_icons -%}
            {%- render 'social-icons', class: 'footer__list-social' -%}
            {%- endif -%}
        

        {%- when 'image' -%}
        
            {%- if block.settings.image != blank -%}
            {%- assign image_size_2x = block.settings.image_width | times: 2 |
            at_most: 5760 -%}
            

                
            

            {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
            {%- endif -%}
        

        {%- endcase -%}
    

    {%- endfor -%}
    {%- if section.settings.newsletter_enable -%}
    
        

            {%- if section.settings.newsletter_heading != blank -%}
            ## {{
                section.settings.newsletter_heading }}
            {%- endif -%}
            {%- form 'customer', id: 'ContactFooter', class:
            'footer__newsletter newsletter-form' -%}
            
            

                

                    
                    
                    
                

                {%- if form.errors -%}
                <small>
                    {%- render 'icon-error' -%}
                    {{- form.errors.translated_fields.email | capitalize }}
                    {{ form.errors.messages.email -}}
                </small>
                {%- endif -%}
            

            {%- if form.posted_successfully? -%}
            ### 
                {% render 'icon-success' -%}
                {{- 'newsletter.success' | t }}
            
            {%- endif -%}
            {%- endform -%}
        

    

    {%- endif -%}

2. CSS Adjustments:

Add CSS to ensure that the newsletter and footer menu are side by side using flexbox:

.footer__blocks-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.footer-block--menu,
.footer-block--newsletter {
    flex: 1 1 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 20px;
}

@media screen and (max-width: 750px) {

    .footer-block--menu,
    .footer-block--newsletter {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

The code above is what I can logically edit based on the code you provided.

To make it work more accurately, can you kindly share your store link (with the password, if any) or share access to edit code in your theme with us?

We will check it and suggest you a solution if possible.

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

Thank in advance!