The Logic
Occasionally the client may have multiple social media accounts, for example
https://d-b-nation.myshopify.com had 2 instagram accounts and 2 facebook accounts.
- Add settings to settings_schema.json
- Add social media link to theme > customize theme > social
- social media name to the variable social_links within social-links.liquid - Make sure “-2” is added to value.
- Write logic that checks if the social_links value contains “2” in the name, if it does then remove “-2” from the value. This is important to show the favicon icon.
EG:
{% if icon contains '2' %}fa-{{ icon | remove: "-2" }} {% else %} fa-{{ icon }}{% endif %}
==========================================================================================================================
The Detailed Code
Add Admin Field
Open settings_schema.json and locate the social media section. Add another field and make sure the id contains a suffix of “-2”
EG:
{
"type": "text",
"id": "social-links-instagram-2",
"label": "Instagram 2"
},
Set the Link in the customize theme setting
- Add the link through Theme > Customize theme > Social > add link.
Change code in social-links.liquid
- open social-links.liquid
- Add the name of the social media type inside {% assign social_links = ‘’ %}
EG:
{% assign social_links = 'instagram' | split: ' ' %}
Locate the section that starts with “{% if link_href != blank %}” and replace that entire if statement with the following code.
{% if link_href != blank %}
<a href="{{ link_href }}" title="{{ link }}" target="_blank">
<i class="fa {% if icon contains '2' %}fa-{{ icon | remove: "-2" }} {% else %} fa-{{ icon }}{% endif %} fa-fw {% if social-links %}fa-{{ social-links }}{% endif %}"></i>
</a>
{% endif %}
Use left/right arrows to navigate the slideshow or swipe left/right if using a mobile device