This article explains the Icon Element in GemPages. By the end of this guide, you’ll know how to use the Icon Element effectively to enhance your Shopify store’s design and functionality.
What is the Icon Element?
The Icon Element in GemPages allows you to add icons to pages, enhancing visual appeal, and delivering key information effectively.
You can use this element to improve user experience, emphasize important details, and strengthen trust with visitors.
Here are some common use cases for the Icon Element:
- Trust Badges and Security Indicators: Icons such as secure payment, fast shipping, or money-back guarantees can reassure customers and build trust.
- Highlighting Product Features: Use icons to draw attention to product benefits, such as “eco-friendly,” “handmade,” or “easy to use.” Pair these icons with short descriptions to make your page more engaging and visually clear.
Icon Element Settings
1. Choose Icon
You can select icons from the GemPages system library or upload your own custom icons.
Note: Only SVG files are supported for custom uploads.
For more details of how to upload a custom icon, refer to this article.
2. Insert Link
Add a link to make the icon clickable, directing customers to relevant pages (e.g., product details, FAQ, or external resources).
3. Size
- Width: Adjust the icon’s width to fit your design.
- Padding: Modify the spacing around the icon for proper alignment and spacing.
4. Color and Border
- Icon Color: Change the icon’s color to match your branding.
- Background Color: Add a background color to the icon for better visibility or design consistency.
- Border: Customize the border’s thickness and style (e.g., solid, dashed).
- Corner: Adjust the border radius for rounded edges or sharp corners.
5. Align
5. AlignAlign the icon to the left, center, or right to fit into your layout.
