> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/infinite-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/infinite-options/styling-and-customizations/theme-specific-styling.md).

# Theme-Specific Styling

Infinite Options includes built-in CSS snippets for 39 Shopify themes. Each snippet adjusts your options’ fonts, spacing, borders, and drop-downs to match your theme. You’ll find them in the app’s Settings.

### Supported Themes

{% tabs %}
{% tab title="Shopify Free Themes" %}

* Atelier
* Colorblock
* Craft
* Crave
* Dawn
* Debut
* Dwell
* Fabric
* Heritage
* Horizon
* Origin
* Pitch
* Publisher
* Refresh
* Ride
* Rise
* Ritual
* Savor
* Sense
* Spotlight
* Studio
* Taste
* Tinker
* Trade
* Vessel
  {% endtab %}

{% tab title="Paid Themes" %}

* Balance
* Be Yours
* Broadcast
* Canyon
* Clarity
* Concept
* Drive
* Flora
* Impact
* Impulse
* Motion
* Prestige
* Symmetry
* Warehouse
  {% endtab %}
  {% endtabs %}

### Add your theme’s snippet

1. In Infinite Options, click **Settings** in the left sidebar.
2. In the **CSS Snippets** section, check to see if you have any theme snippets added in the **Installed Snippets** that don't match your current theme. If so, remove them by clicking the trash can icon next to the theme title.<br>

   <figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FnJxr2T3kvmtqDgjWCBAS%2Fimage.png?alt=media&amp;token=2a3d8e58-cf60-496d-8898-7a09a7b180ec" alt=""><figcaption></figcaption></figure>
3. Then, choose your theme from the **Theme Snippets dropdown** and click **Add**.<br>

   <figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FAGatk1zS5uciKPOxTd8g%2Fimage.png?alt=media&amp;token=655cb66c-109a-4980-ba9b-c7740a44ba26" alt=""><figcaption></figcaption></figure>
4. Scroll to the **Custom CSS** field to confirm it has been added.
5. If the field already has an older Infinite Options snippet or the Default theme snippet (it may start with `/* Infinite Options by ShopPad */`), delete that snippet. Leave any custom CSS you've added yourself in place.
6. Click **Save** once you confirm your theme snippet has been added.<br>

   <figure><img src="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FOkUZgUYoSo57RF1K9XjW%2Fimage.png?alt=media&amp;token=b2dd4ce9-12c0-4d0e-9845-5c0afd7d023a" alt=""><figcaption></figcaption></figure>
7. Open one of your product pages to check how your options look.

Changes can take up to 5 minutes to be applied to live pages after saving. We recommend clearing your cache on any product pages, or viewing the product pages in an incognito window to see the updates as soon as possible.

{% hint style="info" %}
If you're uncomfortable deleting CSS, we recommend copying and pasting the original CSS into a doc or text file to ensure you have the original CSS saved somewhere.
{% endhint %}

### Don't see your theme listed?

The pages in this section cover the most common Shopify themes. If your theme isn't listed, Infinite Options will apply default styling automatically, so your options should display correctly without any additional setup.

If something looks off — spacing, fonts, positioning, or options appearing in the wrong place on the page — contact our support team, and we can help get it sorted out for your specific theme.