Icon Custom

How to Add a Custom Icon in AppSections Block Button Settings

The "Custom Icon" setting in the AppSections Style settings allows you to add a custom icon by providing an SVG path. This setting provides flexibility in customizing the visual appeal of your buttons with unique icons. Here is how you can add a custom icon using an SVG path:

Custom Icon

• Purpose: This setting allows you to add a custom icon to your button using an SVG path.

• Usage: Copy the SVG path from a preferred icon library and paste it into the custom icon setting.

Recommended Icon Libraries

We recommend using the following icon libraries for high-quality SVG icons:

• Font Awesome : https://fontawesome.com/search?o=r&m=free

• Bootstrap Icons : https://icons.getbootstrap.com/

• Remix : https://remixicon.com/

• Phosphor : https://phosphoricons.com/

• Boxicons : https://boxicons.com/

• Iconoir : https://iconoir.com/

Steps to Add a Custom Icon

1. Select the Block Button:

   • Open your Shopify theme editor.

   • Navigate to the specific block button where you want to add a custom icon.

2. Locate the Custom Icon Setting:

   • In the block button settings, find the Custom Icon option.

3. Choose an Icon from a Library:

   • Visit one of the recommended icon libraries.

   • Select an icon that fits your design and functionality needs.

   • Copy the SVG of the selected icon.

   

   

   

   

   

   
4. Add the Custom Icon:

   • Paste the copied SVG path into the Custom Icon setting in the block button settings.

   

Ensuring the Right Custom Icon

1. Preview Changes:

   • After adding the custom icon, preview your store to see how the changes look.

   • Check the button to ensure the icon is applied correctly and enhances the visual appeal and functionality.

2. Check Consistency:

   • Ensure that the custom icon aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices.

3. Test Across Devices:

   • Verify the custom icon on different devices to ensure it looks good and maintains functionality on all screen sizes.

Summary

By using the "Custom Icon" setting in the block button settings, you can customize the appearance of your buttons with unique icons using SVG paths. This flexibility allows you to enhance the visual appeal and interactivity of your buttons, ensuring a dynamic and engaging user experience across all devices.

If you have any questions or need further assistance, please contact our customer support team.