Social icons – Shopify UI Elements Generator

1. Set your links 2. Customize the look

All links, except the email one, must begin with http://, https:// or //. The email link must begin with mailto:. Leave the text box blank if you don't want to use the corresponding icon. If you don't need Facebook or Twitter icons, remove the URLs that were put in by default.

Style of icon

Monochrome

Brand color for each icon

Color if monochrome Ex: teal, or #39CCCC. See this for nice color ideas.

Size 22px

Open links in a new browser tab

Customize
Set your social links and customize the look of your buttons.

Preview
Your buttons will appear just like this, wherever you place your code.

Grab your code
Copy and paste the code below into your theme.liquid file between the <body> and </body> tags. The buttons will appear wherever you place your code.

Customize Set your social links and customize the look of your buttons.

Preview Your buttons will appear just like this, wherever you place your code.

Grab your code Copy and paste the code below into your theme.liquid file between the <body> and </body> tags. The buttons will appear wherever you place your code.

Customize
Set your social links and customize the look of your buttons.

Preview
Your buttons will appear just like this, wherever you place your code.

Grab your code
Copy and paste the code below into your theme.liquid file between the <body> and </body> tags. The buttons will appear wherever you place your code.