Year: 2018

Wordpress Design Development by After Dark Grafx - DesertStretchDoc Dr Jenni Martin

RanchoMurietaStretchDoc.com WordPress Website Design

Welcome ranchomurietastretchDoc.com to the After Dark Grafx family. We had the pleasure of designing and developing this new WordPress Chiropractic Website for Dr. Jenni Martin, Rancho Murieta.

Dr. Jenni Martin, A chiropractic orthopedist for over 30 years, uses ART(Active Release Technique). FST(Fascial Stretching Therapy), and COX (Flexion stretching table) to treat the active, mature adult. She finds the combination of fascial muscle therapy, specialized COX lower back technique, and selective exercises and stretches, create the best and fastest positive results.

  • Board Certified Chiropractic Orthopedist
  • LPGA Class A Teaching Professional
  • Full Body Certified ART (Active Release Technique)
  • Advanced Trained FST (Fascial Stretching Therapy)
  • Treating Patients for over 30 years
  • Specializes in Stretching Techniques to reduce lower back pain, should pain relief and neck pain relief from golfing and equestrians.

Currently Servicing: Rancho Murieta, Folsom and Eldorado Hills

Visit: ranchomurietastretchDoc.com Click Here

Mistralsoap.com Shopify Integration by After Dark Grafx

Mistralsoap.com New Shopify Website Launched

Mistralsoap.com new Shopify Website Launched with this Holiday season version just in time for the holidays. Be sure to visit mistralsoap.com or mistralmen.com for excellent deals on soaps and beauty products.

We are proud to have them as a part of the After Dark Grafx family. From developing their first Miva site over 10 years ago to their new redesign and Shopify Development, Mistral has placed it’s confidence in After Dark Grafx once again.

Mistralsoap.com Shopify Integration by After Dark Grafx

Since 1994, Mistral has crafted exceptional quality soaps and beauty products. Their exquisite fragrances and superior formulations celebrate the body while nourishing and soothing the skin. With the lush landscape of Provence as their laboratory, they invite you to experience the transformative power of Mistral.

NOTE: FREE SHIPPING ON ORDERS OVER $58.00

 

“After Dark Grafx has been an integral part of our online growth. We know that we are in good hands and do not have to worry about our website. We enlisted James and his company over 10 years ago to create our first eCommerce website with Miva Merchant. We have grown and have now moved on to Shopify to better suite our needs in the marketplace. James and his team integrated and added and recommended the proper Shopify Apps that allow us to be successful today. We know that After Dark Grafx is just an email or phone call away, after all – They work After Dark, So you don’t have to!” – MISTRAL, LLC.

Facebook Friend Request Hoax

Scam alert: If you receive a message on Facebook saying ‘Hi….I actually got another friend request from you’, it’s a hoax.

Well, another extremely irritating “Friend Request” hoax is now making the rounds on Facebook.

Luckily, it’s very easy to avoid falling for this one.

All you have to do is ignore any messages you receive via Facebook Messenger, Chat or IM that read like this: 

“Hi….I actually got another friend request from you yesterday…which I ignored so you may want to check your account. Hold your finger on the message until the forward button appears…then hit forward and all the people you want to forward too….I had to do the people individually. Good Luck!”

In short, this message is a hoax.

The people sending it out didn’t really receive friend requests from the folks they’re forwarding it to. They’re sending it out to all their friends simply because the message tells them to forward it.

Of course the people they forward the message to don’t realize it’s a hoax. They believe their accounts really are sending duplicate friend requests to their friends.

Ship Station Not Importing Orders to Miva

Ship Station Not Syncing with Miva after Two Factor Update

Some users may experience issues with their Ship Station account not syncing to Miva after the latest 9.12 update with Two-Factor Authentication.

If you run into this, there are articles on Ship Station’s Website (Orders Not Importing to Miva) but you will actually have to contact Miva Support to have them make an exception to the user that is connecting to Miva in order to bypass the Two Factor Authentication and/or email login from device. I attempted all other means before contacting support like:

a) Reinstalling Ship Station Module
b) Making the user an admin then reducing the user back to just basic auth user
c) Updated Miva Engine
d) Restarted Server, Apache, Etc.

Save yourself some time and just contact Miva Support.

Hope this helps someone else.

If you need help with this, you may also contact us and we can take care of this for you on as well at our hourly rates.

*Logos are trademarks of specified entities

Two Factor Authorization Miva How To

How to Add Two Factor Authentication to Miva for Admin: The Fastest and Easiest Solution

Get Ready for Miva Merchant upgrade to 9.12

With the new release of Miva 9.12 they will now require two factor authentication. This should be done before the release in the next few weeks.

Even though you have an email account for all admins that sends a verification code to login. You will now be prompted for an additional login method via Two Factor Authentication.

In order to enable two factor authorization on Miva, you will need to:

A) Login to Miva and Select the Admin User
B) Put a checkbox next to the Miva Admin Account
C) Select the TWO FACTOR AUTHENTICATION tab at the top of the accounts
D) Select one of the two factor methods below.

 

Two Factor authorization works like this. You login to your account with your username and password. You are then presented with another screen to enter a code, token or authorization method in order to access the account.

 

Explanation of Two Factor Options:
(Descriptions below taken from within the Miva Admin)

 

1) Time-Based One-Time Password (TOTP) 
((select this one to make it easier and the one we explain below)

Description:
A Time-Based One-Time Password (TOTP) is a temporary passcode generated by an algorithm. With the current time used as one of its factors in calculation, the algorithm can ensure that each generated passcode is unique. In order to use this form of two-factor authentication, you will need to download an application (usually on a mobile device, but also available on most desktop operating systems) that will generate a code and display it when you are signing in to your admin account. The process for signing in to the administrative interface is as follows:

  1. Sign in to the administrative interface with your normal username and password credentials
  2. When prompted, enter the One-Time Password generated via your TOTP application (e.g. Google Authenticator)

 

2) YubiCloud + Yubico OTP
(means you need a physical device plugged into your computer)

Description
Yubico OTP uses pre-configured YubiKeys to authenticate via the YubiCloud Authentication service. This method of two-factor authentication requires the use of a YubiKey that supports YubiCloud Authentication during sign in. A few benefits of using YubiCloud include requiring a device (the YubiKey) to be present during login and unique, secure 128-bit AES encrypted one-time passwords with counters to identify and prevent replay attacks. The process for signing in to the administrative interface is as follows:

  1. Sign in to the administrative interface with your normal username and password credentials
  2. When prompted, insert your YubiKey into your computer’s USB port
  3. Press the button on your YubiKey

This is a stronger, more secure solution.

 

3) WebAuthn/U2F

Description
WebAuthn is a W3C standard that will allow for multiple forms of single-sign-on and two-factor authentication. Miva’s implementation of WebAuthn used U2F Authentication, which is two-factor only, and will require the use of a FIDO/U2F certified device. Browser support for WebAuthn is currently very limited, and will require you to log in using only browsers that currently support the standard. The process for signing in to the administrative interface is as follows:

  1. Sign in to the administrative interface with your normal username and password credentials
  2. When prompted, provide your two-factor authentication credentials via the supported U2F device

———————————————————–

Read the Full Miva Article Here on How To Set Up Two Factor Authentication on Miva Merchant

 

RECOMMENDED SOLUTION TO GET STARTED FAST!

How to Add Two Factor Authentication to Miva for Admin Users: The Fastest and Easiest Solution

I am going to cover How To Add Google Authenticator to Google Chrome Browser to allow you to login via TOTP
Time-Based One-Time Password (TOTP)

A) Login to Miva and Select the Admin User
B) Put a checkbox next to the Miva account admin that you would like to add and select the two factor authentication tab at the top
C) Select Time-Based One-Time Password (TOTP)

 

In the Miva Documentation above for this setup it references the Google Authenticator but doesn’t explain how to use it. Here is one method below. You can search for apps that run on your phone or mobile devices as well.  You will need to run this extension each time you login to Miva.

 

OTP (Google Authenticator) Setup and Configuration

Time-based One Time Password or TOTP is the most popular method of Two-Factor Authentication. This involves using an app such as Google Authenticator (BELOW) to generate a unique 6 digit password each time you login.

Requirements: To use TOTP you’ll need an app such as Google Authenticator, Authy or a browser plugin to handle to TOTP flow.

Steps to setup in Miva

  1. Edit User and Select Manage Two-Factor Authentication
  2. Choose Time-Based One-Time Password from the Drop down

Two Factor Authorization Config

On the next screen, scan the QR code or enter in the text string below the QR code into your Google Authenticator (or similar) app (HOW TO BELOW). Once done, enter in the 6 digit code generated from the App into Miva and click enable.

QR CODES MIVA

COPY THE CODE BELOW THE QR CODE ABOVE for the next section.

HOW TO INSTALL GOOGLE AUTHENTICATOR IN CHROME DESKTOP

1) Using Google Chrome, open a new tab or window and go to: https://chrome.google.com/webstore/detail/gauth-authenticator/ilgcnhelpchnceeipipijaljkblbcobl?hl=en

2) Download and Install the Extension

3) Click on the EXTENSION icon (should be in the top of your browser as a little G and it will send you to the extension website to enter your token)

4) Click on the PENCIL top right of the browser

5) Click on the ADD button – bottom left

6) Enter a user or website you want as the name to be referenced for the account access

7) Enter the token from the Miva Admin Page with the QR code that you copied above.

7) It will generate a code for you to enter into your Miva Admin below the QR CODE and token that is displayed. You could always use BACKUP TOKENS later to login but it is better habit to use the GAuthenticator Extension. Go back to the Miva Admin and enter this code below the token

8) Select Enable

9) You will now see a list of BACKUP CODES, download them and store them in safe place.  I would print them and delete them from the computer to be safe.

BACKUP CODES TWO FACTOR AUTHENTICATION MIVA

10) Select NEXT and CONGRATULATIONS!
 You are now setup with two-factor authentication!

Now you have to do this for each of the admins on your site.

Sign In Instructions

  1. Sign in to the administrative interface with your normal username and password credentials
  2. When prompted, enter the One-Time Password generated via your TOTP application (e.g. Google Authenticator)
    You will need to select the Chrome Extension GAuthenticator and click on the new code that it creates and enter that for the two factor code to work.

 

If you are unsure of how to do this or it sounds too technical, please contact us . We offer this service via a screen share to help set this up on your browser at our hourly rate. 

Yes, you will need to use Google Chrome to login to your admin and to use the extension mentioned above each time you login.

 

Using a backup code

To use a backup code, click the “Use Backup Token” link below the Two-Factor screen during the login process. Here you can enter in your one time use code:

backup codes

Each backup token is one time use so once it has been used it can never be used again.

Note: There is no way to bulk generate backup codes. If you need more than the initial 10, you would need to disable Two-Factor for that user and then re-enable it which would generate you a new set of 10 codes.

Protect yourself from ransomware

PROTECT YOURSELF FROM RANSOMWARE, MALWARE AND VIRUSES. STEP BY STEP CHECKLIST FOR HOME OR BUSINESS

Ransomware, malware and viruses are on the rise. Hackers are getting smarter with clever subject lines and phishing scams to get you to open that email. Be on the lookout! Recently, there is an email going around with subject line. “Your Account Has Been Hacked” and sometimes includes an old password that you may have used and have never changed.

We take cybersecurity seriously and so should you.

How did they get your password in the first place? There are multiple methods like social media engineering – where the hacker monitors some of your social media accounts and is able to guess your password, with the help of some software.  They then engage brute force attacks – these attacks are targeted at one or more of your accounts and again, enlist the help of some computer software which tries millions of variations of passwords. Eventually they will guess the password as too many people do not use strong enough passwords, nor do they change them frequently enough.  Another thing is in an email phish, they don’t need your password.  They just need your email address (often readily available on social media), and the ability to create a convincing enough email to get you to click.  Once done, they have your computer and all the data it contains. 

Did you know that most people do not change their passwords for at least 5 years! This is awful behavior. Couple this with using the same password across all of your social media and banking accounts and you are opening yourself up to some severe cyber pain.

Take action today to mitigate these risks!

Step 1: BACKUP EVERYTHING that is important on the computer(s). Using an external hard drive is excellent for this and can be found on amazon or local best buy for less than $80.

Step 2: Check your computer(s) for Viruses. Avast.Com is free and other Anti-Virus programs offer free trials and scans. Other anti-virus programs are low cost and well worth the investment.  Do a COMPLETE scan and not just the quick scan so you can get back to work. Schedule this at the end of the day. When you are about to leave the office or not needing to use your computer for a while, set the scan to check everything!

Step 3: Download an anti-malware program like Malwarebytes.Com – free trial and run a full scan.

Step 4: Download a rootkit scanner. Also available from Malwarebytes – this will scan your computer for any root access.

Step 5: Change your passwords on all accounts. PC and MAC systems have a built-in on-screen keyboard. Initially, use this when you change your passwords on your accounts. If there is a keylogger on your computer, using an on-screen keyboard is a way to thwart someone from spying on you with a basic keylogger (although the scans above should find the intruder – you can never be too safe )

Also, enlist a PASSWORD MANAGER to save your passwords for you. This way you do not have to remember each different password.  This is the safest and most effective method to manage your multiple passwords. 

BE SURE THAT EACH PASSWORD IS DIFFERENT ON ALL ACCOUNTS.  Especially, do not use your banking passwords on any social media or email accounts.

Don’t just add a 1 or 2 or $ to the end of a password to make it different from another password.

Don’t use birthdays, pet names, favorite sports, bands, or anything that could be guessed based on information you provide publicly on social media.

Bad Password:  Ralph1972

Good Password:  A3#!g*9gC!

Step 6: Update everything, software, firmware, etc. Check your PRINTER FIRMWARE (yes, it needs to be updated – if it is on the network, it is vulnerable.) Update the ROUTER FIRMWARE (most routers will do this automatically, but some are older and need manual intervention.) Update the Operating System (Mac or PC) with the required patches.

Step 7: Backup Everything again once the updates and patches are applied and steps 1-6 are completed.

Step 8: Put into place a security protocol checklist at work or home explaining to your employees or family as to what to click on via email and what to not click on.  You can even block websites via the router with a firewall. A part of this plan should include automatic backups to local external drives and to the cloud. Google Drive or Dropbox.com are excellent sources for this while other, larger companies will need a more robust backup solution. Your IT company should have this in place for recovery. Run daily or active scans for malware and viruses.

Step 9: Add a hardware firewall. These days, computers and routers have built in software firewalls but adding the extra hardware firewall will give you another layer of protection.

Step 10: Shut off the router. If you can do so, turn off the router at night so that there is an extra layer of security. If hackers can’t reach the computers, they will move on to easier targets. Don’t be the easiest target.

We know life gets busy, but taking a little time to make sure that you and your business are as secure as possible will make for a better night’s sleep.

After Dark Grafx does not specialize in implementing computer or software cleanup as stated above but this is the general information that we supply to our clients.  We do, however, fix hacked word press, or magento websites.  We also specialize in web design, e commerce, shopify, miva merchant, web development, SEO, and app development.  If you have questions as to whether we can assist you,  please call us.

  • After Dark Grafx is not affiliated with or compensated for any of the software vendors or programs mentioned in this post.
Miva Developer San Diego

Prevent Hackers from Accessing your Miva Admin

The first time a new Miva admin logs in to a Miva account from a new browser, a 6-digit verification code will be sent to the email address on file. This added layer of security will alert you via email if someone is attempting to login to Miva using your credentials.

Browser verification is a new security feature available in Miva 9.10. It adds an additional layer of protection to prevent someone logging into your Miva administrative interface with stolen login credentials. Across the industry, online fraud and credit card theft continues to rise. Attacks to steal login credentials include phishing, malware and malicious activity. Browser verification add an important layer of protection preventing someone who is not you from using your credentials to log in to your Miva admin.

Each time you login to the Miva admin via a new device or browser you’ll be required to enter in a verification code which is emailed to the email associated with your user.

Once entered, a cookie will be set on that browser which by default last 1 year. You’ll be required to do this process for each browser you use to login to Miva with (Chrome, FireFox, etc). For example if you used your home computer to login into Miva to check orders, the very first time you login you’ll need to verify your browser by entering in the authentication code which is emailed to you.

This process also has the benefit of notifying you if someone is trying to use your login credentials as you’re receive an email notifying of their IP address. If this login attempt was not made by you, you’ll then want to change you admin password as someone other then you is attempting to use your credentials to login to the Miva admin.

Miva Two Factor

Editor Note:
Although this may initially seem as an inconvenience, the internet as a whole would be better served if all apps and websites embraced this process to maintain security and peace of mind.

READ FULL ARTICLE HERE

 

 

Add Side Bar to Shopify Theme - Debut

How to Add a Side Bar to Shopify Theme

If you are wondering How to Add a Side Bar to the DEBUT Shopify Theme with custom navigation, then you are in luck. Please read below. If you do not understand this, we can make these edits for you, just contact us here – Approximately $75 to set this up for you.

I wanted to be able to show two CUSTOM MENUS for the side bar that I could control if I add items to the Navigation Menu in Shopify.

  1. I start off by adding a NEW NAVIGATION menu. In the Shopify Admin, click on ONLINE STORE on the left then select NAVIGATION.
  2. Select ADD MENU
  3. I named my menus  Shop By Brand and Shopy By Beauty.
  4. I then added navigation items for the collections I wanted to display to each menu. Taking note that the HANDLE or NAME OF THE MENUS would now be shopy-by-brand and shop-by-beauty. I will need these in the next section.
  5. Once my menus are created, I click on ONLINE STORE on the left, then click on the dropdown called ACTIONS and select DOWNLOAD THEME FILE. Always backup your theme before making changes. It is just good practice.
  6. Next select ACTIONS again and select EDIT CODE
  7. On the left side you will scroll down to TEMPLATES and click on collection.liquid ( DEV NOTE: we always make another backup of the original file then work on the main file)
  8. You should see this code{% comment %}
    The contents of the collection.liquid template can be found in /sections/collection-template.liquid
    {% endcomment %}

    {% section ‘collection-template’ %}

  9. next add this line of code {% section ‘sidebar’ %} above {% section ‘collection-template’ %} so it will look like this{% comment %}
    The contents of the collection.liquid template can be found in /sections/collection-template.liquid
    {% endcomment %}

    {% section ‘sidebar’ %}
    {% section ‘collection-template’ %}

  10. SAVE the new template (top right)
  11. We will now need to CREATE the page called  sidebar.liquid that will contain the navigation and other items for the sidebar.
  12. On the left now scroll down to SECTIONS and select ADD NEW SECTION.
  13. Paste this code into the new section.  Notice the BOLDED ITEMS in this code. It the only information you need to change so that your correct menus display where they should. If for example you called your menus  Custom Menu One and Custom Menu Two then I would need to use  customer-menu-one and custom-menu-two in the code below. Also notice the CLASS that is in RED. This is what we will style in the CSS to make it a sidebar.

    <div class=”left-side”>

    <div class=”shop-by”>
    <h2>Shop by Brand</h2>

    <div id=”nav” class=” nav-align–{{section.settings.menu_alignment}}
    nav-border–{{ section.settings.nav_border }}
    nav-separator–{{ section.settings.nav_separator }}”>
    <ul id=”menu”>
    {% for link in linklists.shop-by-brand.links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}” {% if link.active %}class=”active”{% endif %}>{{ link.title }}</a></li>
    {% else %}
    <li class=”dropdown”>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% else %}
    <li>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </div>

    </div>

    <div class=”shop-by-space”>
    <h2>Shop by Beauty</h2>

    <div id=”nav” class=” nav-align–{{section.settings.menu_alignment}}
    nav-border–{{ section.settings.nav_border }}
    nav-separator–{{ section.settings.nav_separator }}”>
    <ul id=”menu”>
    {% for link in linklists.shop-by-beauty.links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}” {% if link.active %}class=”active”{% endif %}>{{ link.title }}</a></li>
    {% else %}
    <li class=”dropdown”>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    {% if linklists[link.handle] == empty %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% else %}
    <li>
    <a {% if link.url == ‘http://’ or link.url == ” or link.url == ‘/’ or link.url == ‘https://’ or link.url == ‘#’ %}
    class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %} slicknav_item” href
    {% else %}
    href=”{{ link.url }}” class=”sub-menu {% if link.active %}active{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}active{% endif %}{% endfor %}”
    {% endif %}>
    {{ link.title }}
    </a>
    <ul class=”animated fadeIn”>
    {% for link in linklists[link.handle].links %}
    <li><a href=”{{ link.url }}”>{{ link.title }}</a></li>
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </li>
    {% endif %}
    {% endfor %}
    </ul>
    </div>

    </div>

    </div>

     

  14. Now that the menus are added and the side bar is created, we have to add a CLASS to the collection-template.liquid from step 9 above in order to have the side bar on the left and the collection page on the right.
  15. On the left under SECTIONS find  collection-template.liquid . Scroll to the very top of the page and add a beginning  <div> tag  like this   <div class=”right-side”>
  16. Code should look like this

    <div class=”right-side”>

     

    {% case section.settings.grid %}
    {% when 2 %}
    {%- assign max_height = 530 -%}
    {% when 3 %}
    {%- assign max_height = 345 -%}
    {% when 4 %}
    {%- assign max_height = 250 -%}
    {% when 5 %}
    {%- assign max_height = 195 -%}
    {% endcase %}

    {% if section.settings.layout == ‘grid’ %}
    {%- assign limit = section.settings.grid | times: section.settings.rows -%}
    {% else %}
    {%- assign limit = 16 -%}
    {% endif %}

    {% paginate collection.products by limit %}

    ETC ETC more code ….

  17. Be sure to scroll to the very bottom of this page and add the closing </div>
  18. SAVE THE PAGE
  19. Last Step: Edit the Theme.scss.liquid file Scroll down to ASSETS and click on themes.scss.liquid.  Be sure to backup or copy this file so that you have the original.  To make things easy, I add CSS to the end of this file so that it is easier to find.
  20. Add the following code: (you can, of course adjust as needed but this is the basic code)

    .left-side {padding:0px 15px;display:block;float:left;width:25%;}
    .right-side {float:left;display:block;width:75%;}
    .shop-by {}
    .shop-by-space {margin-top:30px;}
  21. Then for some mobile styling add this code and adjust as need for browsers and device sizes.

    @media screen and (max-width:600px){
    .left-side {padding:0px 15px;display:block;float:none;width:100%;}
    .right-side {float:none;display:block;width:100%;margin-top:40px;}
    .shop-by {}
    .shop-by-space {margin-top:20px;}

    }

  22. SAVE THE FILE
  23. Lastly, the below screenshot is what you should end up with.

Add Side Bar to Shopify Theme - Debut

Final Thoughts:
Every theme is different. Some themes have the side bar built in. You can usually find it if you select the CUSTOMIZE BUTTON in the theme. Then click on a collection page on the preview THEN click on the left side of the screen and it should say COLLECTIONS PAGE. If you click on this collections page, there will be options in some themes to show or not show the side bar. If your theme doesn’t have it, then it will need to be addd.


Author:
James Byrne is the Owner/Operator of After Dark Grafx and a certified designer/developer for Shopify, Miva, BigCommerce, WooCommerce and more. Over 30 years experience – contact me today at 619-702-7377.

Mistral Soap Shopify Design Integration

Shopify – MistralMen.com – Just Launched

Congratulations to Mistral Soap for launching their new website for their men’s collection – MistralMen.com

MistralMen.com has been developed by After Dark Grafx on the Shopify platform and has enabled Mistral Soap to easily scale their product offering by focusing niche websites to their target demographics.

“Our existing website MistralSoap.com was developed on the Miva platform by After Dark Grafx. When we decided to start moving over to the Shopify platform, it was a no brainer to ask James and his team if they had any proficiency in this platform, and, of course…they are certified Shopify Developers as well! To  find the best Shopify Developer online simply search for After Dark Grafx. We have been with James and his team for many years and so happy with the past performance, professionalism and experience that we are having him develop all of our Shopify Stores” – Mistral Soap

Quick Shop Pop Up Change Description Shopify

Remove Short Description from Quick Shop Pop Up on Shopify Responsive Theme

So, I am working on Shopify using the Responsive Theme and I was trying to figure out how to EDIT or REMOVE the short description on the Quick Shop Pop Up Screen.

This is the screen that appears as a pop up when you are on a collections page. If you roll your mouse over a product and see “Quick Shop” if you click this message, it will show a Pop Up of the product, with a short description, the quantity and a buy now button.

Quick Shop Pop Up Collections Page Shopify

After you click on QUICK SHOP you will see the screen below

Quick Shop Pop Up Change Description Shopify

Initially the description was TRUNCATED. Meaning, it was only showing the first 100 characters or so of my description.  This was annoying. I wanted to control what was placed in that section.

You can do a few things:

  1. Remove the description altogether
  2. Shorten or lengthen the description
  3. Replace the short description for the quick shop popup with your own text

I opted for #1, Remove the description altogether, to keep this tutorial simple.

HOW TO:

  1. In Shopify go to ONLINE STORE on the left. Then on the right click on ACTIONS next to CUSTOMIZE button then select EDIT CODE from the drop down
  2. On the left side under SNIPPETS look for product-thumbnail.liquid
  3. Click on the code in the window and type in CTRL + F (PC) or  CMD + F (MAC) and find this code. <p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
  4. It will be in two places.  You can simple remove this entire line of code in both places and select save
  5. Now when you click on the Quick Pop Up, you will no longer see a short description. Just the image, name, price, quantity, reviews(if you added them) and the add to cart button.

 

If you are interested in How To Replace the short description for the quick shop popup with your own text on the Responsive Theme for Shopify  contact us directly for this integration ($75). Fee may vary depending on Theme and Coding of Store so contact us first. We can edit pretty much any theme.