Case Size Selector

 Welcome to Case Size Selector App Support

Case Size Selector gives you the ability to force Wholesale customers to increment products by multiples (quantities in a case). You can also have more than one user type, so Wholesale might buy in multiples of 6, where a distributor might buy in multiples of 240.

Our 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.

 

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: *