Case Size Selector

 Welcome to Case Size Selector App Support

Case Size Selector gives you the ability to enforce ordering by multiples for products in the cart, based on any user tag. For example, you can let retail customers buy in singles, while forcing Wholesale users to buy in multiples of 6, or Distributors to buy in multiples of 240. Each product quantity and user tag can be completely customized for your workflows and case sizes.

Minimum Requirements: Please note that in order for Case Size Selector to function, you will need to enable Customer Accounts in your Shopify settings, and Quantity Selectors in your Theme settings. You will also need to assign user tags to your users for them to be presented with the multiples you’ve setup in the Case Size Selector app settings. For more information on all of this, please see the FAQs below.

Installation: Our automated Install/Uninstall functions will make the necessary changes to any theme that follows Shopify’s theme structure and asset naming conventions. If you have any issues with the auto-install/uninstall methods, you can use the manual instructions below.

 

 FAQ

• You must enable Quantity Selectors in your theme settings for product pages and your cart, by going to Shopify Admin > Themes > Customize. Each theme will place these in different places, so if you cannot find it, please reach out to support and we'll be happy to help you.

• Customer Accounts must have the corresponding tag saved to their customer account for the multiples-selector to work. Navigate to Shopify Admin > Customers > Search Customer Name to find the appropriate customer. On the right side of the screen, you will find a section called Customer Tags; you must use the exact same spelling and capitalization that you use within the Case Size Selector app.

• Customer Accounts must exist for them to see the appropriate quantity selector. The best practice here is the invite your Wholesale customers manually by creating their account in the Shopify Admin > Customers > Add New section. This will allow you to set the Customer Tag before the user visits your site.

You do not need to require Customer Accounts on your store for the app to work, but your Wholesale customers will need to have customer accounts setup with the the relevant Customer Tag saved to the account. The best practice here is to invite your Wholesale users manually, by navigating to Shopify Admin > Customers > Add New and add the Customer Tag during creation. They will receive an email from Shopify asking them to finish setting up their account, and immediately see the appropriate multiples selectors.

You can add tags to any customer account in the Shopify Admin > Customers section. Select any custom you want to add a tag to, and on the right side of the screen you'll see a Customer Tags section. Make sure to enter the custom tags exactly as you enter them in Case Size Selector to make sure they properly connect.

Yes, the best practice here is to invite your Wholesale users manually, by navigating to Shopify Admin > Customers > Add New and add the Customer Tag during creation. They will receive an email from Shopify asking them to finish setting up their account, and immediately see the appropriate multiples selectors.

The best practice here is to invite your Wholesale users manually, by navigating to Shopify Admin > Customers > Add New and add the Customer Tag during creation. They will receive an email from Shopify asking them to finish setting up their account, and immediately see the appropriate multiples selectors.

Depending on how many products you have on your store, it may take a few minutes to load all of the product and customer tag into Case Size Selector. This is because we do not store any of your data on our servers, and instead load it directly from your Store (for extra security and privacy). Please be patient and wait up to 5 minutes for the loading process to complete. If you have waited OVER 5 minutes, please reach out to our Support Chat and we'll take a look

Case Size Selector was designed to function like a spreadsheet so you can make lots of changes rapidly; in order to prevent users from being inundated with "saved" messages, we've implemented a simple color changing cell as the cell data is saved to your store. If you change a cell and the color stays blue, you may need to retry the change by removing the number and reentering it again. If you see no color change, then the data has just been saved faster than you could see :-)

As long as your theme supports Quantity Selectors on item pages, then your theme should fully support the Case Size Selector App. If you have any issues after the automated installer runs, and you've tried to troubleshoot with the manual instructions unsuccessfully, please reach out to Support and we'll gladly take a look.

Make sure that you've enabled Quantity Selectors in your Theme Settings by navigating to Shopify Admin > Theme > Customize. Case Size Selector functions by taking over existing Quantity Selectors with the rules you setup in the app, so if you do not see a Quantity Selector, it is possible your Theme either does not have them enabled, or does not support them.

The best way to test if your case size settings are working is to create test accounts with the tags that you want to test with. Navigate to Shopify Admin > Customers > Add New and create a test account with one of the user tags you setup in Case Size Selector, so you can login and test. Please note that you should only have ONE of the tags you've setup in Case Size Selector associated with a user at any one time, otherwise the app will get confused and could apply the wrong multiple.

No. Case Size Selector works by using an associated Customer Tag and changing their Quantity Selector to increment by the multiples you set up in the app. If a user has no Customer Tags, then the app will ignore them (this assumes they are a standard retail user).

 

Manual Installation Instructions

To manually install the Case Size Selector, you will need to edit 2-3 of your theme files. Follow along below carefully to make sure you don’t miss anything.

Duplicate Your Theme

1. Open your Shopify Admin

2. Click on Online Store

3. Click on Themes

4. Click on Actions

5. Click on Duplicate:

Duplicate Theme
 

Edit Your Product Page

1. Click on Actions again

2. Click on Edit Code – this will take you to a new page with your theme files.

3. Using the Search Files… field, type in product.liquid and click on the result so that it becomes visible in the editor to the right.

Screenshot 2019-07-28 15.35.09.png

4. Many themes use referenced sections in order to function, which will affect how we take action for this step. If the first 10 lines of the product.liquid file contain a reference to {% section ‘product-template’ %} then you will need to search for “product-template” in the search field, and click the product-template.liquid file listed under the Sections folder and skip straight to the next step. If a referenced section does not exist in your product.liquid, you can use the following steps on the current product.liquid file you have open.

5. Regardless of which file you are now viewing due to step 4 above, the next step is to find the <label and <input tags in the code. You can click in the code section to the right, then press CTRL+F (on a PC) or Command+F (on a Mac) and search for “<label” to find it more easily. They should look very similar to this:

Screenshot 2019-07-28 15.49.21.png

6. Now that you’ve found this code, you will need to copy the following code and place it above and below these two lines, as illustrated below.

Above:

<!-- BEGIN - Commented by Case Size Selector DO NOT EDIT THIS LINE! -->
{% comment %}

Below:

{% endcomment %}
<!-- END - Commented by Case Size Selector DO NOT EDIT THIS LINE! -->
<!-- BEGIN - Added by Case Size Selector DO NOT EDIT THIS LINE! -->
{% include 'product-template-css' %}
<!-- END - Added by Case Size Selector DO NOT EDIT THIS LINE! -->

Example:

Screenshot 2019-07-28 15.54.08.png

7. Save this file by clicking Save in the top right corner above the code editor.

8. Next, we will open the cart.liquid file. Search for “cart.liquid” in the Search Files field, and click it to open it.

Screenshot 2019-07-28 15.58.14.png

9. Similar to step 4 above, many themes will reference another cart section in order to fully operate. If your cart.liquid file contains a reference to a {% section ‘cart-template’ %} or something similar, you will need to search the files for cart-template.liquid and open that file instead. If not, you can continue forward to the next step.

10. Regardless of which file you need to edit from step 9 above, the next step is to add code to the top of the file:

Code:

<!-- BEGIN - Added by Case Size Selector DO NOT EDIT THIS LINE! -->
{% include 'case-size-selector-logic' %}
<!-- END - Added by Case Size Selector DO NOT EDIT THIS LINE! -->

Example:

Screenshot 2019-07-28 16.03.03.png

11. Next, you will need to click in the code field and press CTRL+F (on a PC) or Command+F (on a Mac) to search for “<label”. It should be paired with another “<input” line, like this:

Screenshot 2019-07-28 16.05.33.png

12. Insert the following code above and below these two lines:

Above:

<!-- BEGIN - Commented by Case Size Selector DO NOT EDIT THIS LINE! -->
{% comment %}

Below:

{% endcomment %}
<!-- END - Commented by Case Size Selector DO NOT EDIT THIS LINE! -->
<!-- BEGIN - Added by Case Size Selector DO NOT EDIT THIS LINE! -->
{% include 'cart-css-1a' %}
<!-- END - Added by Case Size Selector DO NOT EDIT THIS LINE! -->

Example:

Screenshot 2019-07-28 16.11.53.png

13. Some cart files will contain more than one instance of the <label and <input tags. You can click in the code section and search again for “<label” to find out. If you find another instance, repeat step 12 on these two lines, but change “cart-css-1a” to “cart-css-1b”.

14. Almost all themes will also contain either two <input tags right next to each other, or two sets of <button tags right next to each other. Search for “<input” and “<button” in the cart file to see if this applies to you (example below). If so, go on to step 15.

Examples:

Double Inputs

Double Inputs

Double Buttons

Double Buttons

15. If you have either double <input fields, or double <button fields, wrap these sections in the code below to complete the final step.

Before:

<!-- BEGIN - Added by Case Size Selector DO NOT EDIT THIS LINE! -->
{% include 'cart-css-2a' %}
<!-- END - Added by Case Size Selector DO NOT EDIT THIS LINE! -->

After:

<!-- BEGIN - Added by Case Size Selector DO NOT EDIT THIS LINE! -->
{% include 'cart-css-2b' %}
<!-- END - Added by Case Size Selector DO NOT EDIT THIS LINE! -->


Congratulations!

You’ve now successfully manually installed the Case Size Selector!

If you have any questions, or things still don’t seem to be working right for you, please reach out to Support using the button at the top of the page.

 

Manual Uninstall Instructions

You can always uninstall Case Size Selector by using the Uninstall button in the Install/Uninstall tab of the app. If this doesn’t fully work for you, or you would like to remove it manually, you can choose from one of the following options:

Option 1 is to simply navigate to your theme files and Publish the duplicated theme file that was created in Step 1 of the Manual Install Instructions.

• Option 2 is to follow all of the steps in the Manual Install Instructions, but remove the code in each step instead of adding it.

If you’ve tried all of these options and still are having trouble, please contact Support using the button at the top of the page.

 

Support

You can reach out to us for more support below. If necessary, we’ll request Contributor Access to your account in order to affect changes for you. Please note that these services may take us time to respond due to demand.

Name *
Name
Your contact information is used only to track issues and provide support.
In order to send a Contributor Support request, we require your Shopify Store URL. We will never make changes without your permission.
http://
Please provide a brief description of the issue.
Please provide a detailed explanation of the issue you're encountering, the steps you've taken to resolve the issue on your own, and any steps required to reproduce the issue.
Please confirm before sending: *