Shopify C: Quick Shop App User Guide

• App Version: 2.0.0
• Our Support Email: supportshpfy@capacitywebsolutions.com

Thank you for purchasing C: Quick Shop Shopify App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: supportshpfy@capacitywebsolutions.com

Below you will find the detailed documentation on how to use our App and we wish you have a great experience with our Shopify App.

Buy App

1. Click here to visit our Shopify App >> C: Quick Shop

2. Click on Add app button.

Pricing Details: (Click Here)

App Setup Steps

Step 1: Go to Apps → C: Quick Shop → Dashboard and click the "Download Template" button to download the App Files ZIP. Once downloaded, extract the ZIP file and open it on your computer.

Step 2: Create or update the following two files inside your theme’s templates folder (the theme where you want to run the Quick Shop App).

If these files already exist in your theme, replace their contents with the corresponding files from the downloaded ZIP. Otherwise, create new files as shown in the examples below.

i) For collection.get-orderitems.liquid file:

ii) For search.get-orderitems.liquid file:

Step 3: Enable the app embed for your theme by following the instructions below.

Go to Online Store → Themes → Current Theme → Customize → Theme Settings → App Embeds and enable the Quick Shop embed as shown in the screenshot below.

Note: If you change your theme, you’ll need to reconfigure the Quick Shop App for the new theme by repeating the steps listed above. You can also watch a quick video guide by clicking here.

Create Menu Item for Quick Order Page

Follow the steps below to create a menu item for your Quick Order Page:

Step 1: Go to your Shopify Admin and navigate to Content → Menus.

Step 2: Click on the menu where you want to add your Quick Order Page (for example, the “Main Menu”). Then, click “Add menu item” and fill in the following details:

• Name: Enter a title such as “Quick Order” or “Quick Shop”.
• Link: In the Link field, enter /apps/quick-shop
• Finally, click “Add” and then “Save menu”.

Once saved, your Quick Order Page link will appear in your store’s navigation menu and customers can easily access it from the storefront.

Collections

The Collections tab allows you to manage which Shopify collections will be displayed in your Quick Shop app.

How to Use?

1. 1. Click the Add collection(s) button in the top-right corner.
2. 2. A popup will appear showing all your available Shopify collections.
3. 3. Select one or multiple collections you want to display in your Quick Shop page.
4. 4. Click Add to confirm your selections — they’ll appear in the list below.
5. 5. To remove a collection, click the 🗑️ Delete icon next to it.

Features

• Search Bar: Quickly find collections by title, ID, or handle.
• Pagination & Filters: Change how many collections are displayed per page.
• Preview & Details: View each collection’s image, title, and handle for easier identification.

Example: If you add Winter Collections and Newest Products, only these collections will appear in your Quick Shop page on the storefront.

General Settings

Step-1: Go to Admin >> Apps >> C: Quick Shop >> General Settings

Step-2: Now, you can see the General Settings section.

The General Settings section allows you to control how products, collections, and pricing are displayed in the Quick Shop page. Below is a detailed explanation of each setting.

1. Product Display Settings

Control visibility of product information and cart options.

• Show Brand/SKU Column
  Enable this option to display both Brand and SKU columns together in the product table.
• Show Brand
  Displays the product’s brand name in the product table.
• Show SKU
  Displays the product’s Stock Keeping Unit (SKU), useful for identifying items by inventory code.
• Preset Quantity
  Sets the default quantity value in the quantity input box (e.g., 1 means “1” is prefilled automatically).
• Default ‘Sort Option’ for Products
  Defines how products are sorted by default (e.g., “Price, low to high”, “Newest first”, etc.).
• Show Checkout button in Cart Popup
  Controls whether the Checkout button should appear inside the cart popup.
  Yes – Customers can go directly to checkout.
  No – Only “View Cart” is visible.

2. Category & Collection Settings

Configure how product collections are displayed inside the Quick Shop interface.

• Enable ‘All Products’ Option
  Adds an “All Products” category to allow customers to view every product without filtering by collection.
• Default/Preload Collection
  Select a collection that will automatically load when the Quick Shop page opens (e.g., “Winter Collections”).

3. Product Limit

Set how many products are displayed in the Quick Shop at once.

• Products Limit
  Defines the number of products to load per page (e.g., 10).
  This helps improve loading performance and page responsiveness.

4. Prices Visibility Settings

Control how product prices are displayed for different customers.

• Hide Prices if customer not logged in: When enabled, visitors who are not logged in will not see product prices.
• Customer Tags: Restrict price visibility to specific customer groups by adding customer tags.
  Example: Enter wholesale to show prices only to wholesale customers.
  If no tags are added, all logged-in customers can view prices.

5. Buttons

• Save Settings: Click to save all configuration changes.
• Reset Settings: Reverts all settings back to their default values.

Tip: Adjust these options carefully to optimize product visibility, usability, and store performance within the Quick Shop interface.

Language Translation

Step-1: Go to Admin >> Apps >> C: Quick Shop >> Language Translation

Step-2:  Now, select Language from Translation Settings.

Step-3:  Fill all field for particular language and save it

The Language Translation section allows you to translate static text and labels used in the Quick Shop interface into different languages. This helps store owners provide a localized experience to customers based on their preferred language.

1. Language Selector

Use the dropdown menu (e.g., Translating Spanish) to select the language you want to translate. Once selected, all editable text fields will display reference text in English and editable translation fields for the selected language.

2. Translation Table

The table consists of three main columns for easy translation management:

• Field Name
  Displays the internal key name used in the system (e.g., page_title, search_button). These are primarily for reference and should not be changed.
• Reference (English)
  Shows the default English text that appears in the app (e.g., “Quick Order”, “Enter Search Term”). This helps you understand what each field represents.
• Translation (Selected Language)
  Editable text boxes where you can enter translations for each English term in the selected language (e.g., “Pedido rápido”, “Buscar” for Spanish).

4. Save Button

After entering or modifying translations, click the Save button to store your changes. Translations are saved per language and automatically applied to the storefront interface when that language is active.

5. Key Notes

• Each language has its own set of saved translations.
• Default English text is used if a translation is left empty.
• You can update translations at any time without affecting other settings.
• Translations will reflect instantly in the frontend once saved.

Tip: Use this feature to provide a seamless multilingual experience for your global customers by translating key interface elements into their native language.

Frontend sample

Language: English 

Language: Spanish 

Language: Japanese 

Custom App Design - How to Change App Design/CSS

Do you want to use your own CSS / styling for C: Quick Shop app in your online store theme?

1. Go to Online Stores >> Live theme >> Theme Customize >> Theme Settings > App embeds section then please open our App embed block i.e. C:Quick Shop. Then at bottom of this page, you`ll see Design customizations section just like below screenshot:
   

2. Here, you can enter your own CSS wrapped in style type tag.
   

3. 
   

Frontend

Quick shop page:

Cart List Popup:

Product Description Popup:

Manual App Uninstallation Steps

After App Uninstalled by Store Owner, Shopify does not permit us to access files on your store. So, You have to remove App code file manually from your Active Theme or Any Theme in which You had previously installed “C: Quick Shop” App File.

=> Go to Online Store > Themes and Select your Current Active Theme then Delete below file:

• Folder: Templates → Filename: collection.get-orderitems.liquid
• Folder: Templates → Filename: search.get-orderitems.liquid

Customer Support

If you have any questions, please do not hesitate to contact us at supportshpfy@capacitywebsolutions.com.We are happy to help!

Please add our email: supportshpfy@capacitywebsolutions.com to your address book to ensure our response email isn’t marked as spam mail.

We will try our best to reply your emails as soon as possible , except weekends and National Holidays.

Thank you.
Capacity Web Solutions Team

Credits

• PHP
• Mysqli
• React JS
• jQuery Library
• Bootstrap
• Shopify API
• Shopify Theme Liquid