Welcome to ESTS Shopify Apps Advanced Variant

The advanced Variant app is a FREE installation by the ESTS (Expound Soft Tech Solution). It is specially created for saving time in creating the options for our store products. It's a lightweight app, and takes less time to load; also, it’s a powerful set of features. You can use our app in your Shopify store. Shopify only provides 3 options and just 100 variants, which may not be enough for your product. And to overcome this situation, our app empowers you to go beyond. As you will use our app, you can now add an unlimited number of options to your product. Now there is no limit on how many options you can offer your customers, and you can have as many options per item as needed. The process of creating options in our app is simpler than others, so now your customer will get a good shopping experience with good usability and beautiful product options. So now we are going to start from the basic configuration of the product option and then go into the details about more advanced product option features. This app is compatible with online store 4.0.0 themes.

• Section-1 Setup Instructions.

• Section 2 User Guide.

Section-1 Setup Instructions.

Let's get started by following this guide.

1. Install through the Shopify App Store

Steps:

• Log in to the Shopify App Store.
• Find the Advanced Variant app to install, and then click it.
• On the app listing page, click Add app.
• In your Shopify admin, to authorise the use of the app, click Install app.

2. After the app is installed, you can view and use it from the Apps page in your Shopify admin.

Open the app in Shopify.

Steps:

• From your Shopify admin, go to Apps.
• Click the name of the app, Advanced Variant, to open.

Section 2 User Guide.

How to use the Advanced Variant app?

At this time, there is no record to view, hence it displays the message “No data found”.When you create your option, you can see all your options in tabular form instead of this message. So just click on “Create option set”. As you click on it, it will show the next page like below.

Here you have the following things.

• A textbox to set the option set name.
• A button to go to the previous page.
• Another button in the header to read the rules.
• A submit button to save data.
• A group button called Add new option.
• And lastly, you can see all the products of your store will be displayed in the table below the Store product option.

Here you can set different types of input. Below is a list of available input types that you can select for your product.

• Checkbox
• Radio Button.
• Drop-down
• Swatch
• Text-box.

Radio Buttons: Are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, when clicking on a non-selected radio button, it will automatically deselect its previously selected option, whatever other button was previously selected in the list.

Drop-down: A drop-down list is a graphical control element that allows the user to choose one value from a given list. A drop-down button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.

Swatch: Swatch is a special kind of option that works like a radio button, where the user can select only one option among all of the given options.

Text Box: A text box's purpose is to allow the user to input text information. A single-line text box is used when only one line of input is required.

Here you can select any number of inputs for any product that you want to apply. When you select any number of input type options from the above, the same will be shown on the product page. But before saving data, there should be one thing. You have to select the product, either one or more than one, based on which product you want to give the option from the table below.

Below is a sample of a product table, just for example, so that users can understand it more clearly. Here we have given a demo of seven products. At your end, you can see all your products that are currently available in-store in collections. If you are unable to see any products or are receiving an error, simply create a custom collection and place all of your products in that collection.

Store Product:-

 How to create an option for a product?

When you open the Advanced Variant app for the first time, its look will be like below. So, foremost, click on the “Create option set” button as we have indicated with a red square box mark in the image below.

When you click on the “Create option set”, the next page will look like the image below, so you have to set the option set name in the text box.

Now it’s time to add the number of options as you want; you can select any input, as we have already discussed in detail above.

For example, we are taking “test” as the option set name and input a checkbox from this button.

When you choose input type as a check box, then you can see the following type of output, as shown below.

Here you can see a textbox as label title where you can set title for checkbox like color, size etc next input show that you have selected the input type as checkbox if you want to use any other type of input instead of check box so in this case you can use “Remove” button to remove this option and choose the different one But if you are ok with it than next option says that this option should be require or not at the time of Add to cart. The next box is for sorting the current option, which means at which position it should be shown on the product page. Next, you can use the next button named “Add Option” to add the option, like red, blue, green for colours or small, medium, large for size or any other data that you want to show in a checkbox. When you click on “Add Option”, you can see the following options. You can click on any number of “Add Option” as you want to add an option for the checkbox; there is no limit, so feel free and go to the next step.

In the above image, we set the option name as “Colour”, and it is required for the user to select. If you wish to change this, you can select "No"—then this option will not be mandatory and will be treated as optional.

Next, “0” indicates that this option should appear in the top position among all options. By default, it is set to "0", but you can change it as needed.

“Green” and “Red” are the two colour options under "Colour". The value “7” indicates that if the user selects the Green option, 7 will be added to the base price.

For example, if your product price is 200, and the user selects Green, then the final price will be:

200 + 7 = 207

This is because we have assigned 7 to the Green option.

Next, the Sort Order “1” indicates that this option (Green) should appear in the second position, as the Red option is set with Sort Order “0”.

Note: Sort order and price are optional for you. By default, it will be arranged in the same manner as you insert, but if you want to rearrange it, then you can change it; otherwise, it is set as “0”.

Show / Hide option

Now, see the use of this option. This option provides you with authority over whether you want to display this option on the product page or not. By default, it is set to "hide".If you want to display this option on the product page, you can set it as "Show".When you set it to "Show", this option will be shown on the product page. Otherwise, it will not display by default even if you create an option. This option is separated for each and every newly created option, which works independently from others. That means if you set one option as "Show", then only those options will be shown which you have set to "Show" because by default all option is set as "Hide".If you forget to change this option to set, then don't worry, you can also change it from hide to show or from show to hide when you update data from the update page.

Here we are taking “Size” as an option, so size should be written in the textbox Title, and we will provide options like “Small”, ”Medium”, ”Large”, ”Extra large”. By clicking on “Add Option”.

Similarly, you can take any type of option n times. Here we are going to the next step by choosing the product.

Now take a review before save data from starting to end and you can change if you have found any kind of mistake in input or add any type of option otherwise if you are ok then let’s go ahead and scroll up you can see the submit button as we have highlight in below image by red square and a tick mark.

Just click on it. Your data will be successfully saved.

When you click on the submit button as mentioned above, after successfully submitting data, a message is displayed on your screen as below.

Enable the app on your store.

By default, the app is disabled on the shopify store. So, to use the app features on your store, you have to enable them. This process is only for the first time. Now, to enable, follow the steps as described below.

1. Copy your shop URL and paste it in new tab and hit Enter button. For example https://storename.myshopify.com/admin.See the below pic,Following type of screen will open.

2. Now click on the Online Store which is placed at left side of screen as highlighted in below pic.

3. Now click on the Customize button which is placed at right side of screen as highlighted in below pic.


When you click on Customize button following type of screen will open.


4. Now click on Catalog as highlighted in below pic.

5. When you click on Catalog you can see the following type of screen.

How to change or update data in the Advanced Variant app?

You have successfully inserted data, and the data is also seen on the product page, but what? If you need to change some options that you have given. Suppose you want to add the the more color “Blue” and also need to add one more option in Gender because now you have Trouser for childrens also and you want to add it in same field and you also want to add one more option like you want to add cotton in trouser so to perform this task you need to open our app just same type as you have open previously. Just click on the Advanced Variant app from the app list.

And now you have noticed that the previous time you saw the below output, that “data not found…..”.

But because we have now created one option as “trousers”, and some other option for testing purposes, instead of the above output, you will get the following output.

Now let’s go to the next step to update the data. When you click on the Edit button, you will see the following kind of page.

Now you can update data here as you want, and you can also add more options as you update. You do not need to create a new one for that, just add more options here or change existing data as you want. And now at the place of “submit” you can see the “update” button because we are on the update page and we want to update the existing data, not create a new one.

And now, click on it, and your data will be updated.

To check it, again go to your product page, and you can see your desired change here. Suppose we have added 1 more colour, Blue, and added an option for children in gender and added a new option as quantity of cotton. So your output will look like this on the product page.

You can see that the update has been seen here.

Delete option

Each row, or we can say each option set, has its edit and delete buttons. We have already discussed about "Edit" data. Now let's see the delete option.

To delete the entire options of a particular option-set, you can click on the delete button to delete the record. Make sure that once you delete the record, it can not be recovered or undone. So, before deleting any record, make sure you have no need for this record in future.

If you have deleted any record, even accidentally, then you have to create this option. Is there any option to recover?

Setting

On the home page of the app, you can see a button named “settings” like the image below.

This button provides you with a few extra settings. When you click on the settings button, you can see the page below.

It provides you with the 4 most important options regarding your app settings.

The first option is to enable or disable the app. This option is used when you want to enable or disable this app. On other hand this option is also useful for you when you change your shopify theme then in this condition you have to again enable app even it is already enable because by default it is enable for your current shopify theme but if you change the theme then to get this app into your new theme you have to again enable this app for getting all its setting into your new theme.

+-

If you have changed your theme, then in these conditions, you have to set the following settings.

• Enable the app from the drop-down.
• In the first text box, you have to enter some text because it’s a required field. For example,”xyz”.
• Similarly, in the first text box, you have to enter some text here, too. Because it’s also a required field, ex,”abc”
• Now, the most important option is that we highly recommend you not change this text box if your app is already working fine in your previous theme. But if you are not able to see the option on the product page even though you have created it by our app, then in this situation, you have to go to shopify “edit-code” of your current theme. Here search main-product. Liquid file.
  

• Here, open the highlighted file.
• Here you have to find the below class.