Adding Social Media Icons to Product Page

Store Design
1

Hi,

I’d like to add social media icons to my product pages, does anyone know how I do this. Do you also know how to then connect them to your actual social media pages? Thanks

2

To add social media icons to your product pages on Shopify and connect them to your actual social media pages, you can follow these steps:

  1. Access your Shopify admin dashboard.
  2. Go to “Online Store” and then click on “Themes.”
  3. In the “Actions” dropdown menu, select “Edit code” for the theme you want to modify.
  4. Look for the “Sections” folder and click on it.
  5. Locate the section file that controls the product page. It is usually named “product-template.liquid” or similar.
  6. Open the file and find the area where you want to insert the social media icons.
  7. Add the HTML code for the social media icons. Depending on your preference, You can use font, image, or SVG icons.
  8. Replace the placeholder links with the URLs of your actual social media pages. For example, for Facebook, use “https://www.facebook.com/YourPage.”
  9. Save the changes to the file.
  10. Preview your product page to see the social media icons in action.
  11. Repeat the process for other product templates or sections if needed.

Following these steps, you can add social media icons to your product pages and connect them to your social media profiles. Visitors can easily navigate your social media pages and engage with your brand on different platforms.

3

Hello @SuzQ85 ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actios → Edit code
  • Go to Sections → Choose the file the you want to add icons (such as: header.liquid)
  • Add the HTML code for the social media icons. Here’s an example of how you can add icons for Facebook, Twitter, and Instagram:

  [](https://www.facebook.com/your-facebook-page)
  [](https://twitter.com/your-twitter-page)
  [](https://www.instagram.com/your-instagram-page)

Save changes and go back to Assets folder → base.css file → add this following code

.social-media-icons {
  margin-top: 10px;
}

.social-media-icons a {
  display: inline-block;
  margin-right: 10px;
  color: #000;
  font-size: 18px;
}
  • Save and preview

Hope this can help. Let us know if you need any further support

Ali Reviews team.

4

Hi @SuzQ85 ,

Request you to refer to the below video to implement the same.