> 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/lorenza/product-pages/product-page-blocks/shipping-block.md).

# Shipping block

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

In the Product template, you can add a **Shipping widget** block to display shipping information and a **Estimate shipping** button to let customers estimate their shipping costs.

> See also the [Payment block](/lorenza/product-pages/product-page-blocks/payment-block.md) and [Security block](/lorenza/product-pages/product-page-blocks/security-block.md).

{% hint style="success" %} <mark style="color:green;">**Shopify**</mark> The Shipping estimator will appear only if shipping rates are enabled in your Shopify admin. Shipping rates are a Shopify feature: see their [Shipping rates guide](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/setting-up-shipping-rates)
{% endhint %}

![](/files/8k9WyS6y4EreNOX7hlHI)

## **Set up shipping block**

Follow the steps to add a shipping widget block and customize the layout, headings, and add ab 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](/lorenza/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content using metafields](/lorenza/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% 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 **Shipping** block to open the settings.

   > Or click **(+) Add block** and select **Shipping** widget.
3. Select which column to display the feature: either **Left** or **Right**.

   > Choose **Left** for a larger block below the product media.
4. 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 **Shipping** block to open the settings.
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](/lorenza/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/lorenza/general/adapting-your-theme/dynamic-content-with-metafields.md).
3. Change the **Text** content to tell customers more about your shipping rates.

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

### **Change block colors**

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

![](/files/iTGzEAogfPjv8Luh4GMG)

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](/lorenza/product-pages/product-template.md)