# Payment Icons

The Payment Icons display a row of your store’s accepted payment methods such as credit cards or digital wallets to any product page that your customer can pay the way they prefer.

<figure><img src="/files/xuMa0lG2hY6JHrQSimn8" alt=""><figcaption></figcaption></figure>

### **Key Features** <a href="#key-features" id="key-features"></a>

* Custom Icon Upload: You can upload your own SVG or PNG so every accepted method is represented.
* Icon Size & Spacing Controls: Adjust pixel-perfect icon size and the gap between them to fit your layout.
* Responsive & Mobile-First: Icons automatically wrap or resize on mobile so they never overflow or shrink unreadably.

### Benefits <a href="#benefits" id="benefits"></a>

* Builds Trust Instantly: Seeing familiar logos (Visa, PayPal, Apple Pay, etc.) gives customers confidence your checkout is secure and reputable.
* Increases Conversions: When your customers know right away you support their preferred payment method, they’re more likely to complete their purchase.

### How To Use? <a href="#how-to-use" id="how-to-use"></a>

1. After installing the **Payment Icons** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab.
2. Choose the **Payment Icons** block

<figure><img src="/files/f73zKreEGtDa9Qs5Pk55" alt=""><figcaption></figcaption></figure>

3. Copy the block ID. For example: **smi-block-payment-icons-1**

<figure><img src="/files/5rvz3pbftogxRKrKmYL4" alt=""><figcaption></figcaption></figure>

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

<figure><img src="/files/yuTygK6xuINfMRb8rLo8" alt=""><figcaption></figcaption></figure>

5. On the **Smind Block**, insert the block ID of payment icons which is **smi-block-payment-icons-1** to the Section ID and change the block name if you want

<figure><img src="/files/edgZkfHYfXdqijFgmCxw" alt=""><figcaption></figcaption></figure>

6. Next, you can rearrange the relevant blocks within the product detail sections

<figure><img src="/files/2bpoaemQvfMRzj33hTnz" alt=""><figcaption></figcaption></figure>

7. Finally, let's start to customize the **Payment Icons** block

<figure><img src="/files/2jZgDtITdg4RrdPwsITL" alt=""><figcaption></figcaption></figure>

* Block ID: The unique ID of payment icons
* Content Max Width: Set the maximum width of the timer’s content area can stretch to.
* Title: Rich-text field above the icons
* Text size: The font size of your title.
* Text alignment: How the title and icons line up within the block.
* Icon size: The height/width of each payment logo.
* Item gap: The horizontal space between each icon.
* Image: Upload a single combine image of multiple logo.
* Image width: Controls how wide the uploaded image is.
* Color Scheme: Applies one of your color scheme to the title text.
* Top margin: Blank space above the entire block.
* Bottom margin: Blank space below the block.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.smind.io/in-app/library/product-blocks/payment-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.