Fixing Common Issues with Product Options Display in Shopify Themes

Custom product options are key to providing personalized shopping experiences, but sometimes these options don't display correctly on Shopify themes. Whether you're using apps like SM Product Options or custom Liquid code, design and layout issues can break your UX.

In this guide, we’ll cover common problems with product option displays and how to fix them in most Shopify themes.

1. Product Options Not Showing on the Product Page

Symptoms: You’ve created option sets in your app, but they don’t appear on the product page.

Solution:

  • Make sure the app is enabled in your theme's App Embeds section (Online Store > Themes > Customize > App Embeds).
  • Verify that the option set is assigned to the correct product inside the app dashboard.
  • Check for theme conflicts with product templates or dynamic sections (like tabs or accordions).

2. Options Appear in Wrong Position

Symptoms: Custom fields appear below the “Add to Cart” button or inside the wrong section.

Solution:

  • Use the app’s custom block position selector or drag-and-drop functionality if supported.
  • Manually add the app’s placeholder snippet (e.g., {% render 'sm-product-options' %}) to the appropriate place in product.liquid or main-product.liquid.
  • Use Chrome DevTools to locate the desired DOM element and place the options accordingly.

3. Option Styling Looks Broken

Symptoms: Fonts, spacing, swatches, or input fields look misaligned or don’t match your store’s design.

Solution:

  • Go to the app’s settings and use the styling customization tools to match your theme.
  • If using a 2.0 theme, inspect CSS overrides that may be applied via theme.css or base.css.
  • Add custom CSS to fix spacing, padding, borders, or swatch size issues.

4. Variants & Custom Options Conflicting

Symptoms: Variant selection interferes with option display or causes duplication.

Solution:

  • Ensure that the product doesn’t mix native variants (color, size) with custom logic that duplicates the same options.
  • Hide native Shopify selectors using theme code or CSS if you’re replacing them with app-based logic.
  • Use conditional logic in the app to hide or display fields based on variant selection.

5. AJAX Add to Cart Not Capturing Custom Options

Symptoms: User custom inputs don’t get passed to the cart or disappear on the cart page.

Solution:

  • Ensure the theme supports line item properties in cart.liquid or main-cart-items.liquid.
  • If using AJAX cart or drawer cart, modify the JavaScript function to send option values along with the product ID.
  • Refer to the app’s documentation to ensure compatibility with the cart structure of your theme.

6. Options Not Visible in Checkout or Order Confirmation

Symptoms: Buyer fills custom fields but data doesn’t show in checkout or admin order view.

Solution:

  • Ensure your app uses Shopify’s line_item.properties to store custom values.
  • Go to the order in your admin dashboard and scroll to “Additional Details” under each item.
  • If using Shop Pay or other accelerated checkouts, test and confirm that options are preserved during the flow.

7. Theme Upgrade Broke Option Display

Symptoms: After switching to a new theme or updating your existing one, options no longer show.

Solution:

  • Re-check app embed settings — many are theme-specific.
  • Reinsert any custom code or snippets from the previous theme (e.g., {% render 'sm-product-options' %}).
  • Use Shopify’s Theme Backup feature before any upgrade to retain previous configurations.

Bonus Tip: Test Across Devices

Always test your product options on:

  • Desktop and mobile
  • Multiple browsers (Chrome, Safari, Firefox)
  • Shop Pay and accelerated checkout

This ensures compatibility and a smooth UX for all shoppers.

Final Thoughts

Product options can boost conversions—when they work correctly. If you run into display or layout issues in your Shopify theme, use the steps above to debug and resolve them.

For more advanced fixes, custom CSS, or code support, consider reaching out to your theme developer or app support team.

Need help setting up SM Product Options? We can help ensure it works flawlessly with your theme. Just reach out!

Back to blog