How to Configure Shopify Option Redesign

How to Configure Shopify Option Redesign

Transform your store's default variant picker interface into a customized, professional-looking option selector that matches your brand and improves customer experience.

1. About This Feature

Your store's variant picker interface is typically controlled by your theme's default styling, which doesn't always look appealing or meet your specific requirements. You might want to customize elements like dropdown sizes, button shapes, or even implement picker types your theme doesn't support, such as color swatches.

Traditionally, making these changes requires:

  • Technical coding knowledge to modify theme files
  • Complex customizations that can be difficult to implement
  • Risk of breaking your theme's functionality

This redesign feature eliminates these challenges by providing you with powerful customization capabilities and beautiful pre-designed interfaces through simple setup operations. You can completely transform how variant options display without touching a single line of code.

2. Step-by-Step Instructions

Step 1: Access the Redesign Dashboard

From your home page, select "Re-design Shopify Option" to access the main dashboard for this feature.


Step 2: Navigate to Configuration Settings

On the dashboard, scroll down to find the "Configure Option Appearance & Swatch Style" section and click Configure to enter the configuration page.


Step 3: Review and Configure Your Options

The management table displays all options currently used in your products. Each entry includes:

  • Option name: The name of the option to be configured
  • Impact: The number of products using this option that will be affected by your settings
  • Appearance on product page: How the option will display on product detail pages
  • Appearance on product card: How the option will display on product cards


Step 4: Save Your Configuration

After making your desired changes, click Save. A save modal will appear asking if you want to apply these settings to related product groups.

Important: Since product groups are a separate feature, select "No, just save" for this configuration. For more information about the other option, refer to our Grouptify Options Configuration Guide.


Step 5: Enable the Feature in Your Theme

Activate the redesigned variant picker by clicking the enable buttons shown in the interface. You'll be redirected to the theme editor where you can:

  1. Enable the settings you want to display in your store
  2. Save the changes to apply them to your live store


Step 6: Check the Results

After completing the setup and enabling the feature, visit your store to see the transformation. Compare how your product options looked before and after implementing the redesign.

3. Testing and Verification

After completing the setup, it's crucial to verify that everything works correctly:

What to Check:

  • Visual appearance: Confirm new styles are applied on both product pages and product cards
  • Interface functionality: Ensure no layout issues or visual conflicts occur
  • Cart functionality: Test that products are added to cart with the correct options selected
  • Cross-device compatibility: Check appearance on desktop, tablet, and mobile devices

If Issues Arise:

If you encounter any problems during testing, don't hesitate to contact our support team for assistance.

4. Benefits of Redesigning Your Variant Picker

  • Enhanced user experience: Create intuitive, attractive option selectors
  • Brand consistency: Match your variant picker to your overall store design
  • Increased conversions: Professional-looking interfaces can boost customer confidence
  • No coding required: Achieve complex customizations through simple configurations
  • Theme compatibility: Works with most Shopify themes without conflicts

5. Best Practices

  • Test thoroughly: Always verify functionality after making changes
  • Consider mobile users: Ensure your designs work well on all device sizes
  • Maintain consistency: Use similar styling across all product options
  • Monitor performance: Check that customizations don't slow down your store

With this redesign feature, you can create a variant picker interface that not only looks professional but also provides an improved shopping experience for your customers, all without requiring technical expertise.

    • Related Articles

    • How to Bulk Configure Grouptify Option Appearance

      Managing product option appearances across multiple product groups can be time-consuming when done individually. This guide shows you how to efficiently update option appearances in bulk using Grouptify's configuration feature. 1. When You Need This ...
    • Option Appearance Management Guide

      How to bulk setup appearance for product group 1. What is Appearance? Appearance refers to how Options are displayed on your storefront, enabling customers to interact with and select product variations more easily. Various display types are ...
    • How to Bulk Configure Grouptify Swatch Style

      Managing swatch styles across multiple product groups becomes challenging when you need to update colors or images for specific option values. This guide demonstrates how to efficiently configure swatch styles in bulk using Grouptify's swatch ...
    • How to Create a Multi-Option Product Group

      In previous articles, you’ve learned how to group products based on a single option (color, size, etc.). But what if you want to group products based on multiple options? This article will guide you through simple steps to create a multi-option ...
    • How to create a Single Option Product Group

      1. What is a product group? A product group is a set of related products displayed on the identical product page or product card as variants. By grouping products under a single page, customers can easily browse and select from different options, ...