# Payment block

{% hint style="info" %}
This feature was added in v5.0.0 on April 12, 2022. See our [changelog](https://help.fluorescent.co/lorenza/readme/changelog) and [theme update guide](https://help.fluorescent.co/lorenza/readme/theme-updates) to learn more.
{% endhint %}

In the Product template, you can add a **Payment widget** block to display icons of accepted payment methods.

> See also the [Shipping block](https://help.fluorescent.co/lorenza/product-pages/product-page-blocks/shipping-block) and [Security block](https://help.fluorescent.co/lorenza/product-pages/product-page-blocks/security-block).

![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-737447ab1a780b70ae51b10b38bc0b5b84962a85%2Fpayment-widget.jpeg?alt=media)

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> Payment methods are a Shopify feature. Themes do not control which payment icons appear: see Shopify's [Payments manual](https://help.shopify.com/en/manual/payments) to learn more or contact [Shopify Support](https://help.shopify.com/en/support/) about payment icons.
{% endhint %}

## **Set up payment block**

Follow the steps to add a payment widget block and customize the layout, headings, and add an optional image.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create and assign new templates](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content using metafields](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

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

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

1. Choose the **Products** template you want to edit.
2. Under the **Product overview** section, click on the **Payment** block to open the settings.

   > Or click **(+) Add block** and select **Payment** widget.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-553e732dbba4576c46e5007caf65c5bff48fd1e8%2Fpayment-widget-settings.jpeg?alt=media)
3. Select which column to display the feature: either **Left** or **Right**.

   > Choose **Left** for a larger block below the product media.
4. Choose whether to **Show payment icons**.
5. Click **Save**.

</details>

## Add text content

Add a **Heading** and **Text**, and adjust their alignment and width.

<details>

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

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

1. Click on the **Payment** block to open the settings.

   ![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-497bab3b9fb3ad0f3fe774d58de04218fc4052fe%2Fwidget-content.jpeg?alt=media)
2. Change the **Heading** text.

   > We recommend a short title with 2 - 3 words.

   > To show different headings on different product pages,you can [create new templates](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
3. Change the **Text** content to tell customers more about your payment methods.

   > To show different text on different product pages,you can [create new templates](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
4. Select the **Text alignment** to align the heading and text to the **Left**, **Center**, or **Right**.
5. Use the **Max width of heading** to control the line breaks of the **Heading** when viewed on a full-width desktop screen.
6. Use the **Max width of text** to control the line breaks of the **Text** when viewed on a full-width desktop screen.
7. Click **Save**.

</details>

## **Add button**

You can add a button to link to a page with more information.

<details>

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

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

1. Click on the **Payment** block to open the settings.
2. Select or enter a URL for the **Button link**.
3. (*Optional*.) Change the **Button label** text.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read ["What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380).
4. Click **Save**.

</details>

## **Change block colors**

Change the color of every block element, including the **Background**, **Text**, **Button text**, **Button background**.

![](https://1086282208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6iv1HA2gJCuwR5V6stX%2Fuploads%2Fgit-blob-eaab67a5a04bcdbefe2b5904506837e713b97ea8%2Fwidget-colors.jpeg?alt=media)

To enable an image **Overlay** color, use the **Overlay opacity** slider to change the color from transparent (**`0`**) to complete opaque (**`100`**).

Click the **Overlay gradient** option to add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.\\

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/lorenza/product-pages/product-template)