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

# Variants

## Introduction

Wall art is often sold with different framing and size options. On Shopify these are usually offered as product variants. Frame Up can understand these variants and show customers a matching artwork preview.

<Frame caption="Example variants shown on a product in the Shopify admin">
  <img src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/shopify-variants.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=17f036739e07e060045e5bb16d278c73" alt="Variants" width="1314" height="598" data-path="images/shopify-variants.png" />
</Frame>

<Note>Your products should already have variants before continuing</Note>

## Variant rules

There are many different ways to configure your variants so we need to teach Frame Up how to understand them - we do this using Variant Rules.

Search for a product in the preview section. Choose a product that has variants.

Below the preview area you'll see all the product's variants listed:

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-variants-overview.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=d8738e3d45b322df8d56b0211ec87898" alt="Variants overview" width="1758" height="1198" data-path="images/app-variants-overview.png" />

If a variant option is yellow that means no matching rule has been found.

<Note>
  Notice how the artwork frame is black. This is because in the Artwork
  Presentation section the frame material is set to black.
</Note>

### Automatically create a style rule

Let's set up a variant rule for the "Oak" option. To do this click "Create a variant rule".

This automatically creates a rule for us that we can see on the right side of the page.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-create-variant-rule.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=c6186fd3ba1b9cea6a541217ace7317f" alt="Create variant rule" width="705" height="347" data-path="images/app-create-variant-rule.png" />

The 'Oak' variant option is now green. On the right side of the page we can now select the appropriate style settings. In our case we want to set 'Frame Material' to 'Natural Grain' because it most closely matches the look of the frames we sell.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-new-variant-rule-created.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=8eca01d0c1c5fbccd87cf39fd56969d0" alt="New variant rule created" width="1758" height="1198" data-path="images/app-new-variant-rule-created.png" />

This process can then be repeated for your other style variants.

### Automatically create a size rule

Frame Up can automatically detect variants if they look like sizes, for example *12" x 16"*. To do this click “Create a variant rule”.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-create-size-rule.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=d42edea815e7b598a25a44139e957089" alt="Create size rule" width="982" height="337" data-path="images/app-create-size-rule.png" />

This creates a single rule that detects all your size options.

<img className="rounded-2xl border" src="https://mintcdn.com/frameup/fk52fcmc9EqH-Gjz/images/app-size-variants.png?fit=max&auto=format&n=fk52fcmc9EqH-Gjz&q=85&s=a92d7e795512c49ae16461c02b2155ed" alt="Size variants" width="1944" height="1036" data-path="images/app-size-variants.png" />

### Creating rules manually

You can also create rules manually using the 'New variant rule' button at the bottom of the variant rules section. We recommend using the automated system above as it guarantees the rule will match the variant.

<Card title="Frame Up Support" icon="message-circle-question" href="mailto:support@frameup.app">
  Our support team is ready to help! Click here to e-mail us with any questions
  you have about Frame Up.
</Card>
