Keystone Documentation

Appearance

Add App Block ​

Add the Keystone Product Options app block to your theme so custom options display on your product pages.

Overview ​

The app block is the visual component that displays your option sets on product pages. You only need to add it once to your theme – it will automatically show the correct options for each product based on your option set assignments.

One-Time Setup

Add the app block once, and it works for all products with assigned option sets.

Adding the App Block ​

Step 1: Access Theme Customization ​

  1. From your Shopify admin, go to Online Store > Themes
  2. Click Customize on your active theme
  3. Navigate to a Product page (use the page selector at the top)

Step 2: Add the Keystone App Block ​

  1. In the theme editor sidebar click Add block in the section where you want options to appear (recommended: above the quantity selector)
  2. Under Apps, find and select Keystone Product Options
  3. Click Save in the top right corner

Best Practice

Place the app block above the "Add to Cart" button and quantity selector for the best user experience. This ensures customers see and select options before adding products to their cart.

Positioning the App Block ​

Above the quantity selector – This is the most common and user-friendly position because:

  • Customers see options before choosing quantity
  • It follows natural reading flow from top to bottom
  • Options are clearly visible above the purchase action

To reposition, simply drag the block up or down in the theme editor sidebar.

Verifying the Installation ​

After adding the app block:

  1. Click Save in the theme editor
  2. Open your online store in a new tab
  3. Navigate to a product with an assigned option set
  4. Confirm the options display correctly

No Options Showing?

If you don't see options, verify that:

  • You've saved the theme changes
  • The product has an option set assigned (learn more)
  • The app block is enabled (not hidden)

Managing the App Block ​

Show/Hide the Block ​

In the theme editor:

  1. Select the Keystone Product Options block
  2. Use the visibility toggle or settings panel
  3. Save your changes

Remove the Block ​

If you need to remove the app block:

  1. Select the block in the theme editor
  2. Click the trash/delete icon
  3. Save your changes

Theme Updates

If you switch themes or update your current theme, you may need to re-add the app block. Always check your product pages after theme changes.

Theme Compatibility ​

The Keystone app block works with Shopify 2.0 themes that support app blocks. This includes:

  • Dawn (Shopify's default theme)
  • Most modern Shopify themes
  • Custom themes built with 2.0 architecture

Using a Legacy Theme?

If you're using an older theme (1.0) or a custom theme that doesn't support app blocks, you can still use Keystone Product Options with manual installation. See our Legacy Theme Installation Guide for step-by-step instructions.

Next Steps ​

Once the app block is added:

  1. Create option sets for your products
  2. Assign products to option sets
  3. Customize the appearance to match your brand