How to insert social media buttons in Shopify

Hanh Dao
Hanh Dao March 26, 2019

Share:

That integrate social media with your online shop is a smart way to increase the traffics access to your store. There are a lot of actions you can take to do this effectively. In this tutorial, I’ve prepared for you one of the best customizations which is to insert social media buttons. You can complete this in two different ways. Take a view of them and decide to do the one that suits you the most.

To insert social media buttons

Insert social media buttons in an effortless way

Step 1: Access to the Shopify App Store

First of all, you need to access to the Shopify App Store. You can tap here to go to the website directly.

Step 2: Go to Marketing

In this step, look at the top field and find the Categories section. Then, press on it. A drop-down list will be shown. Make sure to click Marketing.

Insert social media buttons

Step 3: Select Social media marketing

Now, tap on the Social media marketing button to view all the social media buttons which the App Store has.

Insert social media buttons

Step 4: Add the app

Choose the ones you expect and click on the name of them. For example, I’ve chosen Instafeed in the following picture. Finally, tap on Add app to add the app. There’s nothing you have to do because the app will do all of the rest.

Insert social media buttons

Insert social media buttons in an advanced way

Step 1: Select Themes

In the first action, make sure that you’ve logged in your Shopify account. Then, tap on the Online Store section in the left-hand side menu. It will automatically go to the Themes field.

Insert social media buttons

Step 2: Tap on Edit code

There are lots of themes you have. Select the theme which you expect to edit. Afterward, click on the Actions button next to its name and tap on Edit code in the drop-down list.

Insert social media buttons

Step 3: Go to Assets

To get the social media button on your site, you need to upload its icon image to your theme. Make sure to go to the Assets directory to do the next step.

Insert social media buttons

Under the Assets heading, you will see a link called Add a new asset. Press on it.

Insert social media buttons

Step 5: Upload the icons file

In this step, you will upload the icons file as I said in the third step. To do this, tap on Choose File. Click the file on your computer and select Upload asset.

Insert social media buttons

Step 6: Open the theme.liquid file

To make the button icon really work, you have to add in the code. Make sure to open the theme.liquid file by tapping on it. Next, the online code editor will appear.

Step 7: Enter the code

The location that the buttons display depends on where you paste in the code. Take a view of the code carefully and decide to put it in the most suitable location. Below is an example code for Twitter but it also works for Pinterest, Facebook, etc.

{{ 'my-twitter-button.png' | asset_url | img_tag | link_to: 'https://twitter.com/iamawesome', 'follow me on twitter' }}

Alternate button code with HTML:

<a href="https://twitter.com"><img src="my-button.jpg" alt="Follow  on Twitter"/></a>

Step 8: Save

Finally, tap on Save to complete.

To insert social media buttons for iPhone/Android (Click here)

Step 1: Choose Store
From the admin page, choose the Store button.

Step 2: Tap on Online Store
Make sure to tap on Online Store in the Sales channels field.

Step 3: Go to Manage themes
In this step, go to the Manage themes section.

Step 4: Tap on Edit code
There are lots of themes you have. Select the theme which you expect to edit. Afterward, click on the Actions button next to its name and tap on Edit code in the drop-down list.

Step 5: Go to Assets
To get the social media button on your site, you need to upload its icon image to your theme. Make sure to go to the Assets directory to do the next step.

Step 6: Select Add a new asset link
Under the Assets heading, you will see a link called Add a new asset. Press on it.

Step 7: Upload the icons file
In this step, you will upload the icons file as I said in the third step. To do this, click the file on your computer and select Upload asset.

Step 8: Open the theme.liquid file
To make the button icon really work, you have to add in the code. Make sure to open the theme.liquid file by tapping on it. Next, the online code editor will appear.

Step 9: Enter the code
The location that the buttons display depends on where you paste in the code. Take a view of the code carefully and decide to put it in the most suitable location. Below is an example code for Twitter but it also works for Pinterest, Facebook, etc.

{{ 'my-twitter-button.png' | asset_url | img_tag | link_to: 'https://twitter.com/iamawesome', 'follow me on twitter' }} 

Alternate button code with HTML:

<a href="https://twitter.com"><img src="my-button.jpg" alt="Follow on Twitter"/></a> 

Step 10: Save
Finally, tap on Save to complete.

Summary

Above is a detailed guide for you to insert social media buttons. With the carefully worded text and illustrated images, hope that you find it easy and comfortable to take steps. By doing this, hope there will be more and more traffics to your online store. If you’re concern about how to insert a Pinterest button to your store, tap on it to visit the post.



Hanh Dao
Hanh Dao
I'm a detail-oriented, honest and hard-working of Shopify Expert, ready to work with you to find solutions to help you start your business or grow it. We offer fast deliveries without compromising quality. Fast and effective!

Comments for Insert social media buttons



Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up