The Volume Boost app needs a one-time configuration in your theme to run properly on your store. This installation part is mandatory to ensure that your offer works perfectly on your product page and appears properly on your cart and checkout pages.

  1. Installation for Legacy Store 1.0


             We have a total of 3 processes of installation. You can choose the process that works best for you.

  1.  Automatic Installation

  • This works for most stores, but for some, it could impact where our app injects code. We recommend doing this on a non-live/unpublished theme before going live. If you need help, feel free to contact us anytime.

Please follow these guidelines to perform the automatic installation:

Go to our App Dashboard and choose the Installation option from the top menu. 


A popup will appear with installation types > click on Automatic Installation.

The following popup will ask you for your preferred theme in which you want our app codes installed. Please select your theme.      

Click the Install button and there you go.

  • Volume Boost app is now automatically installed in your store.

    

2. Expert Installation


If the offer doesn’t appear on your website even after following all the above steps, you can opt for our Expert Installation.

This option creates a ticket request that is sent to the Customer Experience Team, which then takes over to assist you. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

You can also get in touch with our Setup Expert with an email or a staff account invite to help@hulk-support.com. We’ll ensure your issue is addressed promptly.


           3. Manual Installation

From Shopify Admin proceed to Themes and choose your preferred theme. Click on Actions > Edit Code.

Add liquid snippets
Skip this step if all the required snippets are present in your required theme.

Include Volume Discount table/grid snippet in Product Page liquid file:

This snippet is placed to display the table/grid on the Product Page of your Shopify store.

Add the div code to your product.liquid, product-template.liquid, main-product.liquid or product-form.liquid file

Place the following code and save it:

                         <div class="hulkapps-volumes"></div>


Replace Existing snippets.

Individually replace existing pricing snippets with HulkApps unique snippets cart template. Skip this step if all the required snippets are present in your required theme.

Under Templates, select the cart.liquid template. (If your template contains sections, you will need to select the cart-template.liquid section instead.)

  1. Item Price code

           Replace {{ item.price | money }} with the below code:

           <span class="hulkapps-cart-item-price" data-key="{{item.key}}">{{ item.price | money }}             </span>

  • Identify the code for your item's price:



  •  Find them in your cart page code file and replace them with the Item Pricing span.

 

         2. Line Item Price code


             Replace {{ item.line_price | money }} with the below code:

            <span class="hulkapps-cart-item-line-price" data-key="{{item.key}}"> {{ item.line_price               | money }}</span>

  • Identify the code for your Line Item price.

  • Find them in your cart page’s code file and replace them with a Line Item pricing span.



         3. Cart Total Price code

             Replace {{ cart.total_price | money }} with the below code:

             <span class="hulkapps-cart-original-total" data-key="{{item.key}}">{{ cart.total_price |               money }}</span>

 

Find the span class in your cart page’s code file and replace them with the Cart Total Pricing span.



Enable Discount code box:

-       If our app's discount offers are being used by a store, then your discount code box on the checkout page will be disabled as it is incompatible with our app. Since our app works on the Draft Order API logic.

-       However, to resolve this issue, we can place your discount code box on the cart page. This would mean that, if our app's offer is being used in the order, the discount code box will appear on the cart page, and if our app offer is not applied in the offer, it will appear on the checkout page.

-      In both scenarios, your customers will be able to apply the discount codes in their order. 

-       If we want to enable the Discount Code Box in the theme, we need to paste the following codes in the Cart Page’s liquid file:

<div class="discount_code_box">

   <div class='hulkapps_discount_hide'>

      <input placeholder="Discount code" class="hulkapps_discount_code"

      autocomplete="off" aria-required="true" size="30" type="text" name="checkout_discount">

      <button type="button" class="hulkapps_discount_button btn btn--primary button">Apply</button>

   </div>

</div>

 

Search for the cart.liquid / cart-template.liquid / main-cart-footer.liquid file in your theme coding.

NOTE: If cart-template.liquid file is available, then please make the changes in the                           cart-template.liquid file only, as all the coding of “cart.liquid” will be included in                               this file.

Place the copied code wherever you need the discount code box to be displayed.

         

2) Installation for Online Store 2.0

The Shopify Online Store 2.0 theme doesn’t require any code placement. The form can easily be enabled and placed right from the theme customization.

Check out the steps below to understand how 2.0 themes work with the app and what you need to do:

  1. Navigate to the Online Store section. Under the Themes, the page looks for your preferred theme and click on the Customize button
  2. On the Theme Customization page, click on Theme Settings in the bottom left corner.
  3. Click on the App embeds tab on the right side of the page under the Theme settings block,
    enable the Volume Boost App, and Save the settings.


  1. Navigate to the Apps page of your Shopify store and open the Volume Boost app.

  2. Go to the Our App Dashboard and choose the Installation option from the top menu.


  1. A  popup will appear with the installation types. Choose the Automatic Installation.



  2. The next popup will ask you for your preferred theme in which you want our app codes to be installed. Please select the theme.



  1. Click the Install button and there you go.

  2. Volume Boost app is now successfully installed in your theme.