Adding payment icons to your footer can help display logos for different payment methods on your website. This enhances customer trust and shows that your store supports multiple payment options, which can encourage purchases. To display these icons, you’ll need to install the Custom Code app from the Shoplazza App Store and follow the steps outlined below.
Adding code to display payment icons
This section guides you through adding the code to display payment icons at the bottom of your website.
1. Install the app: Log in to your Shoplazza admin, then go to Apps > Visit App Store and search for the Custom Code app. Install it for your store.
2. Insert code: After installing the app, click New Code.
3. Add the code for your theme: Depending on your theme, use the appropriate code snippet provided below. Ensure you give it a title that represents the code.
- For newer themes such as Wind, Geek, Flash, Nova2023, Hero, Boost, Bamboo, Morning, Onepage, Farida, Modern, Elegant, Impress, Night, Sweet, Moon, Christmas, and Halloween, use the following code:
<script>
try {
const logoSnippets = document.createElement("div");
logoSnippets.id = "shoplaza-section-footer-logo";
document.getElementById("shoplaza-section-footer").appendChild(logoSnippets);
document.getElementById('shoplaza-section-footer-logo').innerHTML = '<div style="white-space:normal;text-align:center;" class="footer bg-footer footer_container tw-bg-footer-bg tw-bg-footer"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/0244f114b3afad4d9b0fe22f54dbb837_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/431cf474360ec26f50e453910d747622_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/ea127d2967d52ee7106f1d862a4be2aa_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/9042ff8fe121c2fe80df22b3a4e38c67_180x.png"><img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/2d9a48ae30ea532451ce4c54825d5dfe_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/7377e6a76458a88ffe91e7b28cc9417c_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/8c7d570994064c8066658bc0edba5366_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/47c5b22ec39fb82d220efef0c301e8cd_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/7b913163091dc227b0d4b946be32b704_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/1b2b030090fdac882511e286a570ba0e_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/a0a058baaeef16e88f6bd2ee36c03f6f_180x.png"> </div>';
} catch(e){
}</script>
- For other themes like Life Style, Venus, Hyde, and Mars, use the following code:
<script type = "text/javascript">
try {
$(function() {
$('.footer-plus__payment,.footer__payment,.payment-icons,.footer-payment').remove();
$(".footer-plus__center,.footer-copyright__inner,.footer-plus__copyright,.site-footer,.footer__content").append('<div style="white-space:normal;text-align:center;" class="payment-icons"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/0244f114b3afad4d9b0fe22f54dbb837_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/431cf474360ec26f50e453910d747622_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/ea127d2967d52ee7106f1d862a4be2aa_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/9042ff8fe121c2fe80df22b3a4e38c67_180x.png"><img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/2d9a48ae30ea532451ce4c54825d5dfe_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/7377e6a76458a88ffe91e7b28cc9417c_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/8c7d570994064c8066658bc0edba5366_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/47c5b22ec39fb82d220efef0c301e8cd_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/7b913163091dc227b0d4b946be32b704_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/1b2b030090fdac882511e286a570ba0e_180x.png"> <img style="height:24px;margin:4px;" src="https://img.shoplazza.com/oss/operation/a0a058baaeef16e88f6bd2ee36c03f6f_180x.png"> </div>');
});
} catch(e) {}
</script>
4. Set code preferences: After adding the code, set the following options:
- Select user terminal: PC and mobile.
- Trigger page: All.
- Code location: Bottom.
5. Save the changes: Once saved, the payment icons will appear at the bottom of your store's footer.
Replacing or removing payment icons
Follow these steps to update the existing icons or remove certain ones.
Replacing an icon
1. Upload a new icon: Search and download the payment icon you want to use, then upload it to Settings > Material Center. Choose from either Upload from URL or Upload local file from your desktop.
2. Copy the image link: After uploading, find the icon in the Material Center and click Copy Link.
3. Replace the link in the code: Replace the image link (the part inside quotation marks in the src field) with the new link.
4. Save the changes: Once saved, the new icon will replace the previous one.
5. Review changes: Reload your store and find the new icons added in your footer.
Removing an icon
1. Identify the icon in the code: Each src field in the code represents a payment icon. To remove an icon, delete its entire src field.
2. Save the changes: After saving, the selected icon will be removed from your footer.
Additional options
1. Manage embedded codes: To modify the code later, click the Edit button in the Custom Code Embed app. To delete, select the Trash icon.
2. Disabling custom code: If you no longer want to display the icons, simply turn off the code’s status, making it easy to reuse later.
Adding payment icons to your footer is a simple but effective way to increase customer confidence and improve conversion rates. The Custom Code Embed app makes it easy to manage which payment methods are displayed. Adjusting or removing icons is also straightforward, giving you control over your website’s appearance.
Comments
Please sign in to leave a comment.