How to add social media icons on product page dawn

Store Design

Topic summary

Goal: add social media share icons to each product page in the Dawn theme (icons currently only in footer).

What was tried:

  • A helper provided Liquid code to insert into main-product.liquid that renders social icons (Twitter, Facebook, Pinterest, Instagram, TikTok, Tumblr, Snapchat, YouTube, Vimeo) when the corresponding theme settings links are not blank. Screenshots were shared.

Issues encountered:

  • After adding the code, unwanted “lines” appeared over/around the icons (images attached). The helper asked the user to duplicate the theme so they could provide CSS to fix the styling.
  • Another member suggested restoring main-product.liquid and pasting an alternative snippet at line 462; the user reported it showed nothing.

Next steps offered:

  • Install the PageFly app and grant access for assistance; the user installed it and was directed to contact PageFly support (agent “Hope”).
  • A YouTube tutorial link was shared to guide implementation.

Status:

  • No confirmed fix yet. Pending CSS adjustments or hands-on assistance via PageFly support/tutorial. Images and the linked video are central to understanding the styling problem and implementation steps.
Summarized with AI on January 3. AI used: gpt-5.
1

I would like to add social media icons on each product to make it easier to share for customers. I have it in the footer on the website but not by the product details.

My website is www.laurlylou.com

2

Hi @Laurlylou

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

you can add the code to the main-product.liquid file with the following instructions

PageFly_0-1664369969098.png
PageFly_0-1664369969098.png1269×594 57.3 KB

Code:

Result:

PageFly_1-1664369990547.png
PageFly_1-1664369990547.png1366×768 186 KB

Best Regards;

PageFly

3

Thankyou. It’s got lines on it though like this…

4

B843FD4C-D17A-4A0D-8583-780A87D6F2D3.jpeg
B843FD4C-D17A-4A0D-8583-780A87D6F2D3.jpeg2120×1329 46.8 KB

5

can you re-add on 1 theme duplicate so I can check and give you the CSS codes to fix

6

Sorry I’m trying to look at how I do that

7

if you want a quick fix I think you can download PageFly then give me permission and I will fix it for you

8

Sorry I’m not sure what I’m doing. Ive duplicated the theme now. I cant find a page fly app to download

9

you can install PageFly by link https://apps.shopify.com/pagefly

10

Hi @Laurlylou ,

Please restore your main-product.liquid if you are unable the find the change and paste the code provided by @PageFly-Victor that is provided below.


            {%- if settings.social_twitter_link != blank -%}
              - {%- render 'icon-twitter' -%}
                    {{ 'general.social.links.twitter' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_facebook_link != blank -%}
              - {%- render 'icon-facebook' -%}
                    {{ 'general.social.links.facebook' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_pinterest_link != blank -%}
              - {%- render 'icon-pinterest' -%}
                    {{ 'general.social.links.pinterest' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_instagram_link != blank -%}
              - {%- render 'icon-instagram' -%}
                    {{ 'general.social.links.instagram' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_tiktok_link != blank -%}
              - {%- render 'icon-tiktok' -%}
                    {{ 'general.social.links.tiktok' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_tumblr_link != blank -%}
              - {%- render 'icon-tumblr' -%}
                    {{ 'general.social.links.tumblr' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_snapchat_link != blank -%}
              - {%- render 'icon-snapchat' -%}
                    {{ 'general.social.links.snapchat' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_youtube_link != blank -%}
              - {%- render 'icon-youtube' -%}
                    {{ 'general.social.links.youtube' | t }}
                
              

            {%- endif -%}
            {%- if settings.social_vimeo_link != blank -%}
              - {%- render 'icon-vimeo' -%}
                    {{ 'general.social.links.vimeo' | t }}
                
              
            {%- endif -%}

at line number 462.

11

That doesn’t show anything

12

Have installed

13

Hi I’ve installed the pagefly app

14

you can message PageFly support and ask to see Hope they will take note of the information and I will check it for you. My name is Hope

15

Hi @Laurlylou ,

Please refer to the below video to implement the same.