> 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/plugins/shopify.md).

# Shopify

[Install Shopify](https://apps.shopify.com/swiftxr-viewer)

## Step 1:  Add Your Product to Shopify (Skip if Already Added)"

After setting up your store on Shopify, you will need to add your custom products. If you have your products added you can  skip this part.

**To add your product:**

* Head over to "**Products**" on the left hand side of your store.
* Add in the necessary information down to price, name of products and an Image of your product
* Hit "**save**" when you are done.

<figure><img src="/files/Pn9qiAGiYopNNYfjGxhI" alt=""><figcaption></figcaption></figure>

## Step 2: Open Your Shopify Plugin; The SwiftXR (3D/AR/VR) Viewer App

Head over to the "**Apps**" section on your Shopify dashboard. Click on your already installed **SwiftXR (3D/AR/VR) app** to open it

<figure><img src="/files/RaP9BfOCliDzu2j5eni9" alt=""><figcaption></figcaption></figure>

## Step 3: Link your Product to a 3D View&#x20;

To link your Product Click on "**Link a 3D Product view**". This action will make the page where you will select your product to pop up.

<figure><img src="/files/cEstvNiOEb4Y9FOWXTdK" alt=""><figcaption></figcaption></figure>

Then Click on  "**select a product**."&#x20;

(This will allow your 3D entry be linked to your selected product)

<figure><img src="/files/2PPenQ42NFVHthzRdLc2" alt=""><figcaption></figcaption></figure>

## Step 4: Click ‘Open SwiftXR Hub’ to open your SwiftXR Account and Create Your 3D/AR/VR Project

After selecting a product, click on "**open SwiftXR hub**". This will take you to the SwiftXR hub where you will create your 3D/AR/VR entry.&#x20;

<figure><img src="/files/0QHHHu4HwJ2w92AHdEy5" alt=""><figcaption></figcaption></figure>

## Step 5: Create a Project

In the SwiftXR hub, Click on "**Create projec**t", give your project a name, then click on "**create**"

N.B (You can make use of the free templates available but its optional)

<figure><img src="/files/WjsViBF1uhDANsU9Sv20" alt=""><figcaption></figcaption></figure>

## Step 6: Add a 3D Component and Upload your 3D Model

* From the component tab, click or drag and drop a AR component to add it to the white canvas.
* Select the "**Properties**" tab to **upload a 3D model**, import from a **3D store** or **Request a 3D mode**l from <support@swiftxr.io> or use our **AI image to 3D converter**

<figure><img src="/files/Ci0JJKFae16PNZjLQ7GB" alt=""><figcaption></figcaption></figure>

## Step 5: Publish your Project

To publish your project, click the "**Publish**" button located at the top right corner of the SwiftXR Editor and then select "**Publish Project**".

(Optional) You can customise the project URL before you publish

## Step 6: Copy the Published Project URL&#x20;

After publishing your project, copy the published project URL, then close the SwiftXR dashboard

**Important**: Make sure that your project URL has the "swiftxr.app" domain, otherwise our servers will mark it as invalid. You can also view and share the project using the published project URL<br>

<figure><img src="/files/DfeG3ncOhRtgyv7TnXGt" alt=""><figcaption></figcaption></figure>

## Step 7: Paste your Project URL&#x20;

* Paste the published project URL you copied after publishing your project into the "**SwiftXR Published Project Link**" input field, then click on "**Save entry**"

(SwiftXR helps display different 3D/AR/VR project based on the Shopify product connected)

<figure><img src="/files/cCNOWUYDlJV5pHFqcmxj" alt=""><figcaption></figcaption></figure>

## Step 7: Add the SwiftXR App Block to your Product Page (One Time)

To ensure your SwiftXR 3D rendering displays on your Shopify product page, make sure to add the SwiftXR App Block to a section.

\
&#x20;These simple steps allows SwiftXR to display the appropriate 3D rendering based on the Shopify product connected.

To do this;

* **Click on “Add to online store”**

<figure><img src="/files/qtFtjVZCojnozgqp5aps" alt=""><figcaption></figcaption></figure>

* **Navigate to the Product Page**

Click on the Home page drop down menu, select "Product", then select your product.

<figure><img src="/files/XrNKxW8bK8JKZKSwVjK1" alt=""><figcaption></figcaption></figure>

* **Add the SwiftXR (3D/AR/VR) App Block to your desired position on your Product Page**

Click on your preffered position to "Add to block". Select "Apps" and then click on "SwiftXR Viewer"

<figure><img src="/files/rxo1m55sCaX31d4EtFkq" alt=""><figcaption></figcaption></figure>

* **Click on "Save"**

<figure><img src="/files/NVKG0WcIdzOttrAp1vpR" alt=""><figcaption></figcaption></figure>

## Step 8: Preview your store

Head back to your Shopify dashboard, click on "Themes" under "Online store". Click on "view your store"

<figure><img src="/files/YCnZCl6LsQzv7hLWFvqo" alt=""><figcaption></figcaption></figure>

## Congratulations! You have successfully added 3D/AR/VR views to your shop Enjoy exploring your products in a whole new way!

<figure><img src="/files/0uDBFW1DGCWwGpxwHXg1" alt=""><figcaption></figcaption></figure>

## Optional - Add 3D/AR/VR Views to your Homepage

SwiftXR's Website Mode lets you seamlessly embed 3D/AR/VR experiences on any page of your Shopify store.

Tip: Adding 3D/AR/VR content across your Shopify Store can help increase customer browsing time and number of items viewed.<br>

\ <br>


---

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

```
GET https://guide.swiftxr.io/plugins/shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.