adding social media icons to a section on a page

[TBS2023]

Hello

I am creating a landing page for an event and would like to add 2 icons for social media in a "Follow Us' section

Please advise how to proceed with the DAWN theme

Thanks

[Rahul_dhiman]

Hello @TBS2023 
Check the screeenshot and follow.

If this was helpful, hit the like button and mark the job as completed.
Thanks

[TBS2023]

Thanks but my page is a json not liquid

how do i add the snippet

[Sweans]

Hi @TBS2023 ,

Step-1: Open the Edit Code section from the “customize” section.

Step-2: In the “edit code” section, search for the section you need to edit or choose from the “sections” directory.

Step-3: In the code of the section, go to the {% schema %} section and add URL fields in the settings. So, you can add links to the social media links dynamically from the “customize” section.

{
"type": "URL",
"id": "facebook_link",
"label": "Facebook link"
},
{
"type": "URL",
"id": "instagram_link",
"label": "Instagram link"
},

Step-4: Dawn Theme has icons for Facebook, Twitter(X) and Instagram. If you require any other social media icons, you can provide SVG codes directly or can create a new icon snippet in the snippet directory and paste the SVG code for the icon in the snippet (As shown in the screenshot).

Step-5: Then add the HTML code for displaying the links in your desired part of the section code, as shown in the screenshot:
<div class="social-media-links">

<h3>Follow Us:</h3>
<div class="facebook-link">
<a href="{{ section.settings.facebook_link }}">{% render 'icon-facebook' %}</a>
</div>
<div class="instagram-link">
<a href="{{ section.settings.instagram_link }}">{% render 'icon-instagram' %}</a>
</div>
</div>

Call the links added from the customize section as:

{{ section.settings.your_field_id }}

Call the snippet files to render as:

{% render 'icon-facebook'

Style your elements following your desired design.

Note: You can also directly add social media link in "href", if you do not prefer setting up a field to dynamically add URLs
Step-6: Once you set the HTML code, go to the “customize” section add your social media URLs in the corresponding fields as shown in the screenshot and save.

Note: If you can provide a preview link or access to the page, it will make it easier for us to diagnose and provide an accurate solution.

I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[oscprofessional · Accepted solution]

Hello @TBS2023 ,

Go to your Shopify admin panel.

Just Easy installation, Follow given steps
Click on "Online Store" and then "Themes."
Find the theme you want to edit, click on "Actions," and then select "Edit Code."

Add File in section folder (section/social-section.liquid) file:
- Just Add (Copy or Paste) this code

Here is the code:

<div class="socialContainer">
  <h2 style="font-size:{{ section.settings.size }}px;">{{ section.settings.sectionTitle }}</h2>
  <div class="socialIcons">
  {% for block in section.blocks %}
      <div class="socialIcons">
          <a class="socialButton" href="{{ block.settings.social_url }}">
            <img src="{{ block.settings.social_image | img_url: 'Master' }}" alt="{{ block.settings.social_image.alt }}" loading="lazy" height="{{ block.settings.social_image.height }}" width="{{ block.settings.social_image.width }}">  
          </a>
      </div>
  {% endfor %}
  </div>
</div>

<style>
.socialContainer{text-align:center;margin:40px 0}.socialContainer h2{margin-bottom:20px}.socialIcons{display:flex;justify-content:center;gap:20px}.socialIcons a img{width:40px;height:40px;transition:transform .3s}
</style>

{% schema %}
    {
        "name": "Social Icons Section",
        "settings": [
          {
            "type": "text",
            "id": "sectionTitle",
            "label": "Section Heading",
            "default": "Follow Us on social media"
          },
          {
            "type": "text",
            "id": "size",
            "label": "title size",
            "default": "16"
          }
        ],
        "blocks": [{
            "name": "Icons",
            "type": "Text",
            "settings": [
                {
                    "type": "url",
                    "id": "social_url",
                    "label": "Add Your PDF's"
                },
                {
                    "type": "image_picker",
                    "id": "social_image",
                    "label": "Add Social Icon"
                }
            ]
        }
            
        ],
    "presets": [
            {
                "name": "Add Social Icons"
            }
        ]
    }
{% endschema %}

Features:

- Add Icons as per choice

- Add Urls of social media

Additional

- Added a feature for change section title font size

Here is the screen shot below for configuration:

I hope this solution meets our needs.
Thank you 🙂 !!