Knowledge Base

Search

  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

Adding Social Plugins

Social media sites provide a variety of plugins that you can use to add their official icons and badges to your store. All you have to do is find the code you want to use, copy it to a static block, and place the block in your store. To make sure that all your social media badges are available from every page of your store, group them in a single block and place the block in either the header or footer of your store.

Social Media Badges in Header
Social Media Badges in Header

Step 1: Find the Code You Want to Use

Most social media sites offer a selection of icons, badges, and buttons in different styles and sizes. The first step is to find the find the one that you want to add to your store.

Some plugins have two different sets of code. One that is placed either just before, or after the HTML body tag. The second set of code is placed whereever you want the badge to appear. To learn more, see: Adding Third-Party Scripts.

  1. Follow the instructions on the site to copy the code, and paste it into a text editor.
  2. If the plugin includes a section of code that is to be placed either before or after the HTML body tag, do the following:
    1. On the Admin menu, select System > Configuration. In the Configuration panel on the left, under General, select Design.
    2. Do one of the following:
      • If the code goes before the opening <body> tag, click to expand the HTML Head section.
      • If the code goes before the closing <body> tag, click to expand the Footer section.
    3. Paste the code into the Miscellaneous Scripts box.
  3. When complete, click the Save Config button.

Step 2: Create a Block for the Badges

  1. On the Admin menu, select CMS > Static Blocks. Then, in the upper-right corner, click the Add New Block button.
  2. Complete the following required fields:
    • Block Title
    • Identifier
    • Store View
    • Status
  3. Click the Show / Hide Editor button to work with the HTML code. Then in the Content section, paste the code that you copied from the social media site.
  4. When complete, click the Save Block button.

Step 3: Use the Frontend App Tool to Place the Block

Use the Frontend App tool to place the block that you created at a specific location in your store. You can experiment with different block references to find the location that works best.

Step 4: Adjust the Positioning with CSS

For more precise positioning, you can make adjustments to the CSS style sheet used by your theme. To learn more, see: Using the CSS Editor.