How can I move social media icons to the right in Dawn theme?

Bocker503
Tourist
9 0 0

I need to move social media icons to the right on announcement bar. I’ve tried everything and all I managed to do is remove the social icons on desktop. I need social icons visible on mobile first and would like desktop too but on the RIGHT side of the announcement bar. 

Announcement Bar Code

 

 

 

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

 

<div
class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
{{ block.shopify_attributes }}
>
<div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
{%- if section.settings.show_social and social_icons -%}
{%- render 'social-icons' -%}
{%- endif -%}
{%- if section.blocks.size == 1 -%}
<div
class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
{%- if section.blocks.first.settings.text != blank -%}
{%- if section.blocks.first.settings.link != blank -%}
<a
href="{{ section.blocks.first.settings.link }}"
class="announcement-bar__link link link--text focus-inset animate-arrow"
>
{%- endif -%}
<p class="announcement-bar__message h5">
<span>{{ section.blocks.first.settings.text | escape }}</span>
{%- if section.blocks.first.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if section.blocks.first.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- elsif section.blocks.size > 1 -%}
<slideshow-component
class="announcement-bar"
role="region"
aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
>
<div class="announcement-bar-slider slider-buttons">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
<div
class="grid grid--1-col slider slider--everywhere"
id="Slider-{{ section.id }}"
aria-live="polite"
aria-atomic="true"
data-autoplay="{{ section.settings.auto_rotate }}"
data-speed="{{ section.settings.change_slides_speed }}"
>
{%- for block in section.blocks -%}
<div
class="slideshow__slide slider__slide grid__item grid--1-col"
id="Slide-{{ section.id }}-{{ forloop.index }}"
{{ block.shopify_attributes }}
role="group"
aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
tabindex="-1"
>
<div
class="announcement-bar__announcement"
role="region"
aria-label="{{ 'sections.header.announcement' | t }}"
{{ block.shopify_attributes }}
>
{%- if block.settings.text != blank -%}
{%- if block.settings.link != blank -%}
<a
href="{{ block.settings.link }}"
class="announcement-bar__link link link--text focus-inset animate-arrow"
>
{%- endif -%}
<p class="announcement-bar__message h5">
<span>{{ block.settings.text | escape }}</span>
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
{%- liquid
assign 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 social_icons = false
endif
if section.settings.enable_country_selector or section.settings.enable_language_selector
assign language_country_selector = true
endif
if section.blocks.size > 0
assign announcement_bar = true
endif
-%}

{% if social_icons %}
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %} </div>
</div>
{%- endfor -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.announcements.next_announcement' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
</div>
</slideshow-component>
{%- if request.design_mode -%}
<script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
<style>
/* theme editor power preview fix */
.announcement-bar-slider .slider__slide[aria-hidden='true'] {
visibility: hidden;
}
</style>
{%- endif -%}
{%- endif -%}
<div class="localization-wrapper">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<noscript class="small-hide medium-hide">
{%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
{{ 'localization.country_label' | t }}
</h2>
<select
class="localization-selector link"
name="country_code"
aria-labelledby="AnnouncementCountryMobileLabelNoScript"
>
{%- for country in localization.available_countries -%}
<option
value="{{ country.iso_code }}"
{%- if country.iso_code == localization.country.iso_code %}
selected
{% endif %}
>
{{ country.name }} ({{ country.currency.iso_code }}
{{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>

<localization-form class="small-hide medium-hide no-js-hidden">
{%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
{%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
</div>
{%- endform -%}
</localization-form>
{% endif %}
{%- if section.settings.show_social and social_icons -%}
{%- render 'social-icons' -%}
{%- endif -%}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<noscript class="small-hide medium-hide">
{%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
{{ 'localization.language_label' | t }}
</h2>
<select
class="localization-selector link"
name="locale_code"
aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
>
{%- for language in localization.available_languages -%}
<option
value="{{ language.iso_code }}"
lang="{{ language.iso_code }}"
{%- if language.iso_code == localization.language.iso_code %}
selected
{% endif %}
>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>

<localization-form class="small-hide medium-hide no-js-hidden">
{%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
{%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"class": "announcement-bar-section",
"enabled_on": {
"groups": ["header"]
},
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-4"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__1.content",
"info": "t:sections.announcement-bar.settings.header__1.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.announcement-bar.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__2.content"
},
{
"type": "checkbox",
"id": "auto_rotate",
"label": "t:sections.announcement-bar.settings.auto_rotate.label",
"default": false
},
{
"type": "range",
"id": "change_slides_speed",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"label": "t:sections.announcement-bar.settings.change_slides_speed.label",
"default": 5
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__3.content",
"info": "t:sections.announcement-bar.settings.header__3.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": false,
"label": "t:sections.announcement-bar.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__4.content",
"info": "t:sections.announcement-bar.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": false,
"label": "t:sections.announcement-bar.settings.enable_language_selector.label"
}
],
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.announcement-bar.presets.name",
"blocks": [
{
"type": "announcement"
}
]
}
]
}
{% endschema %}

Replies 4 (4)
Bocker503
Tourist
9 0 0

Moeed
Shopify Partner
3795 958 1190

Hey @Bocker503 

 

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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Bocker503
Tourist
9 0 0

Temp login 

 

64521-82253

 

Sneedabockerscents.com

Bocker503
Tourist
9 0 0

Hopefully that works and thank you 🙏🏽