> For the complete documentation index, see [llms.txt](https://guide.swiftxr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.swiftxr.io/how-to/how-to-add-the-swiftxr-custom-block-to-the-media-image-section-on-shopify.md).
# How to Add the SwiftXR Custom Block to the Media Image Section on Shopify
## Step 1 — Open Your Theme Editor
1. In your Shopify admin, go to Online Store → Themes.
2. Click Customize on the theme you want to edit.
## Step 2 — Open Your Product Page Template
1. In the top bar of the theme editor, use the dropdown to select a Product Page.
2. Choose the Default product template (or your preferred product template).
### Step 3 **—** Click and Edit the Product Information Section
1. In the **Product Information** or **Media section**, click the 3 dots.
2. Choose Edit Code
### **Step 4 — Paste the SwiftXR Embed Code**
Paste the following code into your **Custom Liquid** block:
```
// Some code {% liquid
assign swiftxr_product_url = product.metafields.swiftxr.product_url_api
%}
{% if swiftxr_product_url %}
{% endif %}
```
### **Step 5 — Save and Test**
1. Click **Save** in the top right.
2. You should now see the 3D viewer in the media section.