Getting Started

Important steps to get started

 

Get the Plugin Link

Add the plugin link

Add the Info container 

Add the Cart Panel

 

  

Get the Plugin Link

1. Sign in to your QooQee account and download the Shopify Plugin Package file.
2. After unzipping the Package file, in the unzipped folder, open the instruction.pdf file.
3. From the instruction file, copy (Cmd + C) the Plugin Link.

 

Add the plugin link

1. Go to your Shopify Webflow project, in Webflow
2. Paste the Plugin Link in the Custom Code panel under the Before </body> tag.
   
   • a. Click on the Pages button on the left side.
   • b. Select the page where you want to have the Shopify products, or click on the gear icon next to the page name.
   • c. Open the Custome Code tab
   • d.  Paste the Plugin Link under the Before </body> tag
   •  
   • 
   • Add the Plugin Link in the Before <body/> tag 
3. Make sure to paste the Plugin Link only on the pages where you have the Shopify products, otherwise, it could cause issues on your project.

 

Add the info container

1. Open the project that was added to your Webflow account after purchasing the Shopify Webflow Plugin, QooQee Webflow Shopify Plugin.
2. Open the page  Shopify Element & Info
   
   • 
3. If you do not have the Shopify Element & Info page in your project already 
   • a. Create a new page in your project
   • b. Name the page anything you want, it does not have to be Shopify Element & info.
   • c. Copy/Paste everything from the Shopify Element & Info page into this page.
   •  
   • This way you have this page in your project as well. You can set the page as a Draft, so it does not be considered in your sitemap.
4. Activate the plugin ( If you have not activated the plugin, Click Here to see how ).
5. Select and copy (Cmd + C) the Shopify Info panel.
   • 
     
     
6. Go to the page/pages where you want to add Shopify elements and create a Div Block 
   • 
     
7. Paste (Cmd + V) the Shopify Info panel inside this Div Block and set the Display of the Div Block to "none.
   The idea is to have the info panel in all pages, but not set its own display to none, so we can still edit its content from the Shopify Element & Info page.
   
   • 
8. Repeat this process on all the pages where you have an Add-to-cart button, and/or any Shopify elements. 

 

 

You need to have the Shopify Info panel on "all" the pages where there is any Shopify Element.

Adding the Cart Panel

1. Create a page in your project for the Cart panel, and save it as Draft.
2. Open a new browser window and open the Shopify Webflow Plugin that was added to your account after you made your purchase.
3. In the Plugin project
   • a. Open the Shopify Cart page
   • b. open the Navigator pane.
   • c. Select the Shopify Cart element, Copy (Cmd + D) it, and now you can go back to the other browser window where you have your project opened and paste it in the draft page you just made in the previous step.
   •  
   • Make sure you are pasting it in the body of the page.
   • 
     
     
4. Do not remove any element from the Cart panel
5. Do not Move elements or replace them in side the cart panel
6. Simply style every aspect of the Cart panel that you want and when you publish the project live, it will be applied to the Shopify Cart panel