Add custom social media (WeChat) to footer in Dawn theme

Store Design
, ,
1

Hello,

As the title says, I’m working on adding a custom social media icon (WeChat) to the footer of my website, which uses the Dawn theme. I’ve edited the social media section of the en.default.scema.json file, adding

"social_wechat_link": {
  "label": "WeChat",
  "info": "Put QR Code link here."
}

to it. However, this doesn’t seem to edit the “Customize” settings when I load them, which still only displays the default Facebook, Twitter, etc. Does anyone have any idea what I’m doing wrong?

Beyond this, I’m assuming that, once I have the option to add my WeChat link, it should be a matter of adding the appropriate .svg file so that it shows up in the footer. If I’m mistaken, please feel free to correct me.

Thanks in advance.

2

@ShardHaven
Hello,
Please Check This

To add a custom social media icon for WeChat to the footer in the Dawn theme on Shopify, you’ll need to make some modifications to your theme’s code. Here’s a step-by-step guide to help you achieve this:

  1. Prepare the WeChat icon image:

    • Design or find the WeChat icon image you want to use. Save it as a PNG or SVG file, preferably with a transparent background.

  2. Upload the WeChat icon image to your Shopify assets:

    • In your Shopify admin, go to “Settings” and then “Files.”
    • Upload the WeChat icon image file to the list of files in your Shopify assets.

  3. Edit the theme code:

    • From your Shopify admin, go to “Online Store” and then “Themes.”
    • Find the “Dawn” theme and click on “Actions” > “Edit code.”

  4. Locate the footer. liquid file:

    • In the left sidebar, navigate to “Sections” and look for the “footer. liquid” file.

  5. Add the WeChat social media icon code:

    • Open the “footer. liquid” file and find the section that handles the social media icons.

    Example code to add:


  
  [
    
  ](https://example.com/wechat)

Replace https://example.com/wechat with the actual URL of your WeChat account or page. Also, replace ‘WeChat-icon.png’ with the file name of the WeChat icon image you uploaded to Shopify assets.

  • Save the changes:

    • Click on the “Save” button to save the modifications you made to the “footer. liquid” file.

  • Check the appearance:

    • Preview your store to ensure that the WeChat icon appears in the footer as expected.
    • If necessary, adjust the styles of the icon using CSS to make it match the theme’s design.

  • Publish the changes:

    • Once you’re satisfied with the changes and have thoroughly tested them, click on “Actions” > “Publish” to make the modifications live on your store.
1 Like