> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/in-app/library/product-blocks/payment-icons.md).

# 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.