want to add contact icons

Retail & Point of Sale

Topic summary

A user wants to add contact icons (like phone, email, social media) below a “Buy Now” button on their retail/POS store, as shown in their screenshot. They couldn’t find free apps to accomplish this.

Current Status:

  • A staff member confirmed this is achievable through custom coding
  • Some CSS code was initially shared showing styling for contact boxes with hover effects
  • However, the complete implementation code cannot be shared due to community rules

Resolution:

  • The discussion remains unresolved in the public thread
  • The staff member has directed the user to send a private message (PM) to discuss the full solution and implementation details
  • The user will need to pursue this through direct contact to obtain the working code
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2025-03-24 122846.png
Screenshot 2025-03-24 122846.png569×125 3.46 KB

i want to add these contact links bottom of the buy now button with link but i couldn’t find any app like this and some are premium app. Is it possible to do it via coding

2

Hello there

It’s easy to add by custom coding. It would be great if you contact a expert to add it on the footer. If you’d like to discuss this more, don’t hesitate to send me a PM.

Regards

Titu

3

then can you provide me the code?

4

Yes, If you want then I can share that code

5

yes please

6 
body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f8f6f1;
        }
        .contact-container {
            display: flex;
            gap: 20px;
        }
        .contact-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 100px;
            background: #f4f2ec;
            border: 1px solid #ddd;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: 0.3s ease-in-out;
            text-decoration: none;
        }
        .contact-box:hover {
            background: #eae7df;
            transform: translateY(-5px);
        }
        .contact-box i {
            font-size: 24px;
            color: #000;
            margin-bottom: 8px;
        }
        .contact-box p {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }
7

I can’t share that code because of community rules

8

then how to fix this issue

9

If you’d like to discuss this more, don’t hesitate to send me a PM.