AvisPlus Product Options v2
  • Get started!
    • Key Terminology Simplified
      • Avis Options and variants
      • Option Set
      • Option template
      • Option Set template
      • Option type
      • Option name
      • Label on Product
      • Label on Cart
      • Option value
      • Add-on product (Add charge)
      • Bundle variant
      • Conditional logic
      • Option URL
      • Tooltip
      • Help Text
      • Placeholder Text
      • Option widget
    • Option Types
      • Single line text
      • Multiple-line text
      • Number
      • Datetime
      • Email
      • Phone
      • Font Selector
      • Color Picker
      • File Upload
      • Switch
      • Quantity
      • Hidden field
      • Color swatch
      • Image swatch
      • Radio button
      • Checkboxes
      • Button
      • Dropdown menu
      • Color dropdown menu
      • Image dropdown menu
      • Combo box
      • Option Group
      • Space
      • Paragraph
      • HTML
      • Heading
      • Divider
      • Pop-up
      • Size chart
    • Activate App
  • User guide
    • Create Avis Option Set
      • Avis Option Set Template
      • Avis Option Template
    • Change product image upon option selection
    • Translate Avis options
    • Customize Shopify Option
    • Add Charge for an option value
      • One-time add charge feature
      • Add-charge by Quantity
      • Add-charge by Character
      • Hide Add charge product from Storefront
      • Hide Add charge product from Search bar
      • Hide Add charge product from 'Related Products' section
      • Hide Add charge product from Google Search
    • Add Bundle for an option value
    • Conditional Logic (Avis and Avis)
      • Conditional Logic (Avis and Shopify)
    • File Upload for Customers
      • File Upload Advanced Options
    • App Settings
      • Avis Option Settings
      • Shopify Option Settings
    • App Design
      • Avis Option Design
      • Shopify Option Design Library
    • OPTION URL feature
    • Import/Export Option Sets
    • Shopify Point Of Sale (POS) integration
    • Customize tooltip
    • Delete Span tags around the Add charge
    • Changing the option position on the Product page
      • Getting the HTML element
      • Reposition Avis options in EComposer Landing Page Builder
  • Subscription and billings
    • Pricing plans
    • How to Upgrade Your Plan
    • How to Cancel Your Subscription
  • Frequently Asked Questions
    • The differences between "Avis Option" tab and "Shopify Option" tab
    • How can I reposition Avis Options on Product Page?
    • What to do if Avis options aren’t visible on Product Page?
    • How can I set up Conditional Logic for options?
    • How can I add a charge to an option/ a variant?
    • Why aren't the option's Add charge included in Orders?
    • How can I show Avis Options on Packing Slips?
    • How can I show Avis option on Order confirmation Email/Order invoice/New order?
    • How can I show Avis option on Shipping Confirmation Email?
    • Can I add bundling products with the app?
    • Does the app work with Shopify Online Store 2.0?
    • Will the app slow down my website?
    • What happens if I uninstall the app, and how does it affect my store?
  • support and features request
    • 📩Contact Us
Powered by GitBook
On this page
  • Step 1. Select Products
  • Step 2. Sync Shopify Option
  • Step 3. Choose Display style
  • Step 4. Save Display Style
  • Step 5. Check the result
  1. User guide

Customize Shopify Option

Customize the visual display of Shopify options on your store front.

PreviousTranslate Avis optionsNextAdd Charge for an option value

Last updated 6 months ago

This feature will help you customize the visual display of your Shopify options without changing how they work or their original setup.

If you're in the ADVANCED or higher plan, please skip Step 1 and follow Step 2 instead

Step 1. Select Products

First of all, you can select up to 100 products that you want to apply the customizations

Step 2. Sync Shopify Option

This step will help our app update all the Shopify options you have in your store.

By proceeding, default styling from our app will be applied to all Shopify variants for the selected product, overriding the existing styles in your store.

Note: Depending on your theme, further adjustments may be necessary to achieve optimal results. If you need assistance, please don’t hesitate to reach out to our live chat support team.

After the sync, you will see the list of Shopify options below.

Step 3. Choose Display style

Here you can choose the Display style you want for a Shopify option on the Product page and the Collection page.

Pick the Display Style of the Shopify Variants

For the "Button" and "Dropdown" styles, the style will automatically update on your storefront after you save.

For the Swatch type style (Color/Image Swatch, Swatch with price, Swatch Dropdown and Swatch in Button), you can choose if that Shopify option uses its original "Variant image" (already set up in the Product section) or if you want to upload new custom colors/ images in the "Customize" button.

*Note: Only for the "Swatch" style -> "Color/ custom image" can you use the "Customize" button to upload the colors and custom images you want for the variants.

Step 4. Save Display Style

After choosing the styles you want for your Shopify options on the Product page and Collection page, please click the Save button on the top right corner to save all the changes.

4.1. After clicking the Save button, if you choose the "Color or image swatch" -> "Color/ custom image" style, you can now start uploading the colors or images you want for your Shopify option by clicking the icon under the Customize column.

4.2. The priority order for swatch will be as follows:

  1. Image URL

  2. Upload file

  3. Color

4.3. After uploading the color/ image you want, click the Update button and that's it.

Step 5. Check the result

In the Shopify options list, next to the Option name, you will see the number of products that this Option is connected to. (for example: "affects only 1 product")

Click on that text and you will see the list of products. Continue and click on the Eye icon (to see Product in Online store) or the Tag icon (to see Product in Shopify Admin) to check for the result of your customization.