Web Fronter

[webfronter]

CHAT BUBBLES

https://codepen.io/Founts/pen/gmhcl

[webfronter]

Newsletter Sign Up upon Customer Registration

https://www.blackbeltcommerce.com/customer-registration-form-in-shopify/

[webfronter]

I’ve been looking and turns out you can set it in Hosted Settingss page of Nextopia. Sweet. :)

[webfronter]

Hover Savior

https://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery

[webfronter]

Exit Intent Newsletter

After hours of browsing how to implement a newsletter that would pop up when user tries to exit a page this one works the way I wanted:

https://github.com/carlsednaoui/ouibounce

The dilemma I had was that I already had my own html for the modal and all its actions are controlled by custom scripts. Incorporating a plugin would require me to change most of the code; or maybe I just did not understand how to use the other plugins I’ve seen.. 

[webfronter]

Updated Shopify ThemeKit Windows

Then came the day when I could not download any themes from shopify using Themekit. I kept wondering what went wrong so I tried doing this and that until I decided to check it over the web (this was my last resort because when I started using Themekit there weren’t enough documentation about it.), and so found out it was already updated and has a better docs for it.

Check it out: https://shopify.github.io/themekit/

You may also want to update your Environment variables: http://johnatten.com/2014/12/07/adding-and-editing-path-environment-variables-in-windows/

[webfronter]

Sublime 2 - Windows - Liquid Files

I am trying out editing Shopify theme files locally through  Theme Kit in Windows. With that, I need to find a text editor that could support a color coded view for liquid files. I once tried Sublime when i had my Linux OS and liking it too much I wanted to install it on my Windows PC. And I got to. :)

1. Install Sublime 2 in Windows [http://www.sublimetext.com/2]

2. Also for Liquid files to work in your sublime Text Editor download (because it’s easier) the zip file from this repo [ https://github.com/siteleaf/liquid-syntax-mode ]

3. Navigate to C:\Users\[UserName]\AppData\Roaming\Sublime Text 2\Packages\  create a Shopify folder and extract your downloaded files there.

4. Open a liquid file in your Sublime 2 application and if the color coded view still does not work reload the file by pressing Shift + Ctr + P and search for  Set Syntax: HTML(Liquid)

[webfronter]

Theme Kit in Windows

1. Download Theme Kit here [http://themekit.cat/ ]

2. Follow Installation instructions [ http://themekit.cat/install/#windows ]

Note: Environment Variables in Win8 can be found in  Control Panel > System and Security > System > Advanced System Settings

3. In your Shopify store create a  private app using the instructions here: [https://docs.shopify.com/api/guides/api-credentials#generate-private-app-credentials]

4. Create a folder for your project. In the command prompt, navigate to that folder.

5. Then type in the command  theme configure [Password from the Private App] 40. 

This will create a config.yml file. opene that file and add the theme id, password and store name which could all be found in your Shopify Admin panel. Here is a sample [http://themekit.cat/docs/#config-example]. 

6. Then type in the command theme download  to download theme files.

7. As you edit files locally, start with the command theme watch  to automatically apply changes to themes and ctr+C  to end.

For more information: http://themekit.cat/docs/