> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frameup.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get Frame Up running on your website in under 5 minutes

## Install Frame Up

Click the link below to open the Shopify App Store, then click the "Install" button.

<Card
  title="Open the Shopify App Store"
  icon={
<svg
  width="21"
  height="24"
  viewBox="0 0 21 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M17.858 4.66109C17.7732 4.65442 15.9703 4.52005 15.9703 4.52005C15.9703 4.52005 14.7181 3.27742 14.5809 3.13924C14.5475 3.10589 14.5065 3.08302 14.4618 3.06873L13.5688 23.7018L20.6235 22.1695C20.6235 22.1695 18.0791 4.96889 18.0629 4.85168C18.0467 4.73351 17.9428 4.66871 17.858 4.66109Z"
    fill="black"
  />
  <path
    d="M14.0702 3.07527C14.0549 3.08003 13.7967 3.15913 13.3698 3.29159C12.9514 2.08802 12.2138 0.982611 10.915 0.982611C10.8788 0.982611 10.8426 0.984517 10.8054 0.986423C10.4357 0.498517 9.9792 0.286011 9.58373 0.286011C6.5591 0.286011 5.11444 4.06728 4.66084 5.98841C3.48586 6.35243 2.65108 6.61163 2.54435 6.64499C1.88873 6.85082 1.86776 6.87179 1.782 7.48929C1.7172 7.95719 0 21.2317 0 21.2317L13.2468 23.7141L14.1407 3.05907C14.114 3.06383 14.0892 3.06955 14.0702 3.07527ZM10.7063 3.98438C10.7063 4.03012 10.7063 4.073 10.7053 4.11588C9.96872 4.34363 9.1692 4.5914 8.36778 4.83916C8.81757 3.10195 9.66187 2.26336 10.3994 1.94699C10.5853 2.41298 10.7063 3.08194 10.7063 3.98438ZM9.50083 1.09696C9.63138 1.09696 9.76288 1.1408 9.88867 1.22752C8.91953 1.68398 7.87987 2.83227 7.44152 5.12695C6.80019 5.32516 6.17315 5.51956 5.59377 5.69967C6.10835 3.94912 7.32812 1.09696 9.50083 1.09696ZM10.0221 11.3239C10.0221 11.3239 9.23876 10.9056 8.27915 10.9056C6.87166 10.9056 6.80114 11.789 6.80114 12.011C6.80114 13.225 9.96586 13.6901 9.96586 16.5337C9.96586 18.7712 8.54693 20.212 6.63342 20.212C4.33779 20.212 3.16281 18.7826 3.16281 18.7826L3.77746 16.7519C3.77746 16.7519 4.98483 17.7877 6.00258 17.7877C6.66773 17.7877 6.93836 17.2636 6.93836 16.8815C6.93836 15.2977 4.3416 15.2272 4.3416 12.6247C4.3416 10.4348 5.91395 8.31549 9.08725 8.31549C10.3099 8.31549 10.914 8.66618 10.914 8.66618L10.0221 11.3239ZM11.4991 3.87002C11.4991 3.78998 11.5001 3.71183 11.5001 3.62607C11.5001 2.87801 11.3962 2.27575 11.2295 1.79833C11.8984 1.88219 12.3444 2.64359 12.6312 3.51934C12.2948 3.62416 11.9127 3.74233 11.4991 3.87002Z"
    fill="black"
  />
</svg>
}
  href="/components/columns"
>
  This link will take you to Frame Up's page on the Shopify App Store
</Card>

## Start free trial

Choose either a Basic or Advanced plan to start a free 10-day trial of Frame Up.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-choose-tier.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=8a1c8f9ee34661a427a05b7593f6a12a" alt="Choose tier" width="1604" height="1048" data-path="images/app-choose-tier.png" />

## Onboarding

### Preview in the app

Before adding the plugin to your website let's preview the plugin with one of your products in the app.

On the left side of the app you'll find the "Preview" section. Use the search box to find and select one of your wall art products.

<Note>
  Your store should have at least one wall art product and its first image
  should be just the artwork with no frame or other background
</Note>

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-preview-search-typed.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=3e36c64e6637cb459cc7734c3c2628c3" alt="Searching for a product" width="1002" height="532" data-path="images/app-preview-search-typed.png" />

Below the search box you'll see a preview of how the plugin would appear on a website.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-preview-display.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=60033c05aba783262e20332e9ec96ea6" alt="Preview product" width="988" height="1226" data-path="images/app-preview-display.png" />

<Info>
  The plugin replaces your existing image gallery on your wall art product pages
</Info>

Try hovering the mouse (on desktop) or touching (on mobile) over the artwork
to view it from different angles. Also try clicking the "View in a room" button.

### Preview in the theme editor

To see how the plugin looks when integrated into your theme click "Open in Theme Editor". This opens the Shopify theme editor with the Frame Up plugin enabled.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-preview-open-editor.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=5c54730477e6cccbb134881957f946c5" alt="Open in theme editor" width="982" height="402" data-path="images/app-preview-open-editor.png" />

You should see that the plugin has replaced the standard image gallery. Sometimes third party themes have compatibility issues with Frame Up - if you don't see the plugin please <a href="mailto:support@frameup.app">contact us</a> and we'll find a solution for you.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/theme-editor-plugin-activated.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=7359533f0e435ac6f5f356143a787c3f" alt="Theme editor with plugin activated" width="3018" height="1584" data-path="images/theme-editor-plugin-activated.png" />

<Warning>
  Clicking "Save" in the theme editor enables the plugin on your live website.
  You probably don't want to do this yet!
</Warning>

<Note>
  The plugin may take a couple of seconds to appear in the theme editor but
  should appear instantly on your live website
</Note>

## Next step

You should now have an idea of how Frame Up works. Next we'll look at how to customise the plugin for your store.

<Card title="Customisation: Product Type" icon="circle-arrow-right" href="/customisation/product-type-filter">
  Learn how to enable Frame Up only for some of your products
</Card>