Including Social Icons in your Email Template is a great way to drive your email subscribers to your social media pages. Given the popularity of these networks it can be really useful if you have a large number of followers on your social media accounts and let your subscribers extend their relationship with your brand on the various social media networks.
Using the Social Links Block Type
Klaviyo has a dedicated native block in the email template builder for adding social icons in your email. To add the social icons in your email, take the “Social Links” block and drop it in the email on a place where you want your social icons to appear, typically in the footer of the email.
After you place the “Social Links” block at the preferred location, the block will appear in your email.
From the “Block” options of the template builder you can start adding the social icons.
Klaviyo have built-in icons for the most popular social networks that you can use. You can select the social icon you want to use from the “Type” dropdown menu.
If you can’t find the social network icon you want from the dropdown menu or you want to upload a custom icon you can do that by selecting “Custom” from the dropdown menu and click on the “Browse for Image” link.
Click on “Add Button” to add more social icons in your block. And use the “Add Space” button to add space between the icons. Although you can use any image, typically you want to use an icon image that is in a square dimension.
Pro Tip: If you want a more customized icon set of the popular social media networks, you can find lots of free and commercially licensed icons from various icon sites such as Flaticon.com.
In the “Link URL” field for each social icon place the URL of the social page you want people to be redirected after they click on the icon. The “Text” field is alternative text that will be shown in case the image of the social network can’t be rendered from the recipients email client or provider. Although this almost never happens, it’s a good practice to have alternative text for all images in your email. This helps email provider’s algorithm to understand what is the content of your image. Lot of images in your email without alternative text can look suspicious to the email providers and increase the chances of your email ending up in the Spam folder.
Styling and Customizing your Social Icons
After setting up the social icons, you can start applying design from the “Block Styles” section.
The first option in the “Block Styles” section is the look of the social icons. In the “Default” option, the icons are squared and full colored. There are two more options that you can use that will give the icons entirely different look.
The second one is the “Inverse” option. Gray icons with minimalistic design that is subtle and fits very well with emails that have more text than graphics.
The third option is the “White”. As the name says, the icons are white version of the “Inverse” option. This option is useful if you’re using darker color as your email or block background color.
Another important part of the “Block Style” settings is the “Layout”. The “Auto-Space” option will automatically adjust the space between the icons based on the screen size of the device in which this email will be opened. This especially goes for smaller devices like tablets and smartphones. To see and design how your Social Icons block will look on smaller device, click on the mobile icon from the top right corner.
The other option is “Stack on Mobile”. Turning ON this option will make the icons stack vertically when the email is opened on a mobile device.
In the “Block Styles” section you can see the “Show on” settings where you can choose for each block separately if you want the block to appear only on Desktop, only on Mobile, or the same block to appear both in Desktop and Mobile.
Understanding the “Show on: Desktop vs Mobile” Settings
In the “Block Styles” section you can see the “Show on” option where you can choose from “Desktop & Mobile”, “Desktop” and “Mobile”.
Every block in Klaviyo’s template builder have this option. The default option “Desktop & Mobile”, will show the same block regardless of the device type and it’s screen size.
If you select the “Desktop” option, that block will be shown only when people open your email from Desktop (larger screens). If they open the same email from mobile device, the block won’t be visible.
The “Mobile” option does the opposite. It will show the block only on mobile devices but it hides it from devices that have larger screen size.
This can be very helpful if you want to put different content for desktop and mobile. For example, let’s say that you want to use 6 social icons in the footer. Since desktops have a larger screen size, you can fit the 6 icons in one row without any issues. Fitting 6 or more icons on a mobile device will cause the items to align in two rows as seen below.
Using the “Show on Desktop & Mobile” options, you can create two different blocks. One for “Desktop” that will contain all the social icons you want to use, and one for “Mobile” that will contain only the few most important.
Note that to edit each of these blocks, you need to be in the right “View” settings. If you are on mobile view, you’ll be editing the block for mobile and if you switch to desktop view from the top right corner, you can edit the desktop version.
After you finish creating your “Social Icons” block, we strongly recommend to save the block so you can have a backup for yourself in case you accidentally delete it. Also, saved blocks can be reused in any email template, so saving the block can save you a lot of time and effort in the future and to maintain consistency. If you’re not sure how saved blocks work, you can find out more in our tutorial “How to Use Saved Blocks in Klaviyo”.
