How do I add a icon the existing ones in my sidebar menu with a Prestige Theme

[FifthEden]

In my prestige theme the field shows other social media platforms except Tiktok so I would like to be able to add my tiktok linke and the logo display at the bottom of the sidebar menu just like the Instagram and facebook logo

[Ahmad31]

Please share your store url 

[FifthEden]

https://dfbzvw-60.myshopify.com/?_ab=0&_fd=0&_sc=1

[FifthEden]

I believe beacuse it's unpublished you cant view it 

[Ahmad31 · Accepted solution]

Step 1: Upload the TikTok Logo

1. Go to your Shopify Admin > Settings > Files.
2. Click on Upload Files and upload a TikTok logo (preferably in SVG or PNG format).
3. Copy the URL of the uploaded logo after the upload is complete.

---

Step 2: Edit the Theme Code

1. In your Shopify Admin, go to Online Store > Themes.
2. Find the Prestige Theme and click Actions > Edit code.

Add TikTok to the Social Media Section

1. Open the file config/settings_schema.json.

2. Look for the section where other social media platforms like Instagram or Facebook are listed (search for "social").

3. Add the following JSON snippet for TikTok:

{
    "type": "text",
    "id": "social_tiktok",
    "label": "TikTok URL"
},

Save the file.

• Update Footer or Sidebar Menu Code

  1. Open the file Sections/footer.liquid or the specific file for your sidebar menu, e.g., Sections/sidebar.liquid.

  2. Look for the code where other social media icons are displayed (search for "social icons" or check for the existing social links like Instagram or Facebook).

  3. Add the following snippet for TikTok:

{% if settings.social_tiktok != blank %}
  <a href="{{ settings.social_tiktok }}" target="_blank" rel="noopener noreferrer">
    <img src="{{ 'YOUR_TIKTOK_LOGO_URL' | file_url }}" alt="TikTok" class="social-icon" />
  </a>
{% endif %}

• Replace YOUR_TIKTOK_LOGO_URL with the URL you copied earlier from the Files section.

• Save the file.

  Step 3: Customize Your Theme

  1. Go to Online Store > Customize.
  2. Navigate to the Footer or Sidebar section (where you edited the code).
  3. Add your TikTok URL in the TikTok field under the social media section.

  ---

  Step 4: Test and Verify

  1. Preview your store and check if the TikTok icon appears with the link in the footer or sidebar menu.
  2. Test the link to ensure it redirects correctly to your TikTok profile.

[FifthEden]

Thank you so much this solution really helped me and I would recommend Ahmad for any website design work you need ! 

[Ahmad31]

@FifthEden You're Welcome, if this solution helps you mark it as accepted