> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/secure-payment.md).

# Secure payment

In the Product template, you can add a **Secure payment** block to display a payment and security message with icons of accepted payment methods.

{% hint style="success" %}
The theme automatically displays icons for the payment options enabled in your Shopify admin, depending on your customer's region and currency. Payment methods are a Shopify feature. See Shopify's [Payments manual](https://help.shopify.com/en/manual/payments) to learn more.
{% endhint %}

***

{% columns %}
{% column width="41.66666666666667%" %}

### Set up block

Under **Product overview**, click **(+) Add block** and select **Secure payment**. Use the drag handles **`⋮⋮`** to re-order blocks.

Click the block to select the layout and position.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="58.33333333333333%" %}

#### <mark style="color:$info;">Block layout</mark>

<sub><mark style="color:$info;">Click the block to find layout settings.<mark style="color:$info;"></sub>

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><mark style="color:$primary;">Column</mark></td><td>Display the block in the <strong>left</strong> or <strong>right</strong> column of the product overview.</td></tr><tr><td><mark style="color:$primary;">Display as collapsible row</mark></td><td>Display the block within an expandable row that opens when clicked.</td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

#### <mark style="color:$primary;">Layout and style</mark>

Click the block to find settings for the layout, headings, and optional image.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Product overview**, click on the **Secure payment** block to open the settings
2. Select the **Text alignment** of the heading and text: Either **Left** or **Center**.
3. Select the **Text position** of the heading and text: Either **Above payment icons** or **Below payment icons**.
4. (*Optional*.) Choose whether to **Display payment icons**.

   > The block displays icons for accepted payment methods included in your payment gateway. See [Shopify's Payments guide](https://help.shopify.com/en/manual/payments) or contact [Shopify Support](https://help.shopify.com/en/support/) about issues with payment icons.
5. Change the **Heading** text for a title above your secure payments message.

   > We recommend a short title of a few words.
6. Select a **Heading icon** to display next to the heading.

   > Select **None** at the top of the dropdown to remove the icon.
7. Change the **Text** for a message about your secure payment methods.
8. Select the **Text size** of the text: Either **Small**, **Medium**, or **Large**.
9. Under *Image*, click **Select image** to upload an image or icon to display below the text.

   > Use the **Image size** to increase or decrease the pixel width of your image.
10. As a collapsible row, the products **Expand by default**. You can choose to disable this option.

    > (*Optional*.) Change the **Collapsible row title** that appears as the toggle that opens the row when clicked.
11. Click **Save**.

</details>

<sub><mark style="color:$info;">Click block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="162">Setting</th><th width="577.28125">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Align the text to the <strong>Left</strong> or <strong>Center</strong>.</td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Display text <strong>Above payment icons</strong> or <strong>Below payment icons</strong>.</td></tr><tr><td><mark style="color:blue;">Show payment icons</mark></td><td></td></tr><tr><td><mark style="color:blue;">Heading text</mark></td><td></td></tr><tr><td><mark style="color:blue;">Heading icon</mark></td><td></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td></td></tr><tr><td></td><td></td></tr><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px.</p><p>Use PNG files for images with a transparent background.</p></td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the maximum width (in pixels) of the image for desktop.</td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the maximum width (in pixels) of the image for mobile.</td></tr></tbody></table>

<h2 align="center">Advanced: Add or remove payment icons</h2>

***

{% hint style="warning" %}
Our support does not cover custom code. These steps are offered only as a reference. For assistance, we recommend reaching out to a [verified Fluorescent partner](https://partners.fluorescent.co/).
{% endhint %}

If you are familiar with coding, you can edit the `payment-icons.liquid` file to add or remove payment icons that are displayed.

When editing theme code, always duplicate your current theme and use the unpublished theme copy to test your changes before publishing.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

From your **Shopify admin**:

1. Go to **Online store** > **Themes**.
2. Find your current theme, then click the `...` button and select **Duplicate theme**.
3. On the duplicated theme, click the `...` button and select **Edit code**.
4. In the **Snippets** folder, click `payment-icons.liquid` to open the file.
5. Find the following code:

```liquid
{% for type in enable_payment_types %}


```

6. Replace that code with the following code:

{% code overflow="wrap" %}

```
```

{% endcode %}

\`\`\`liquid

{% assign enabled\_payment\_types = 'visa,master,american\_express,paypal' | remove: ' ' | split: ',' %} {% for type in enabled\_payment\_types %}

```

</div>

7.  Edit the payment type values to change which icons are displayed. Separate each value with a comma.

    > The default list is `visa,master,american_express,paypal`. Find all [available payment values](https://github.com/activemerchant/payment\_icons/tree/master/app/assets/images/payment\_icons). Copy the name but do not include `.svg`

    <figure><img src="../../.gitbook/assets/payment-icons-code.gif" alt=""><figcaption></figcaption></figure>

<!---->

8. Click **Save**.
9. After testing, you can go to your Theme library to **Publish** the duplicated theme with your changes.

</details>
<br>

***

> **Related links**
>
> [Product template](../product-template/)
```

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/secure-payment.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.