Category: Shopify

Shopify Developer San Diego - Air Cooled Vintage Works

Air Cooled Vintage Works – Shopify Design & Development

After Dark Grafx announces the launch of AirCooledVintageWorks.com

After Dark Grafx Shopify Web Design services along with our Shopify Development services, enabled Air Cooled Vintage Works to quickly launch their Shopify Store.

AirCooledVintageWorks.com initially contacted After Dark Grafx to provide Shopify Consulting Services. After Dark Grafx was then retained to perform the Shopify Design, Development and App Installation and configuration.

“After Dark Grafx offered a custom website development and design to focus on product sales and conversion. They setup and integrated Facebook Shop, Instagram Shopping, Shopify payments, shipping and inventory management and offered  Custom Shopify Development and coding solution to optimize our product pages. They held our hand through the process, always just a quick email or call away. They created How To Videos so we understood how to update certain sections of the website and just made it an excellent experience.” – Jason – Owner

 

Web Development Company - Shopify Air Cooled Vintage Works Homepage

 

The Shopify Platform is a robust eCommerce platform with a low barrier to entry along with a “simple to use and understand” interface, this platform allows for businesses large and small to offer and manage a professional eCommerce website without a lot of training.  Easily track inventory, hook into your financial booking and shipping systems and easily manage and process orders make Shopify the “GO TO” eCommerce solution for you.

 

If you need Expert Shopify Help or just have a simple Shopify Question, please feel free to contact us even if you are not doing business with us.

Migrate from Miva to Shopify

Migrate Miva to Shopify

Thinking of Migrating Miva to Shopify?

There are many things to consider when migrating or moving your website from Miva Merchant to Shopify.

 

Before you begin this process, it is best to contact After Dark Grafx via Chat (bottom right of this website), via our Contact Form – click here or via Phone Toll Free (888) 578-8300 or if in San Diego (619) 702-7377.  This will save you in both time and money and the 30 minute consultation is FREE!

 

Miva Developer San Diego

 

TAKE AN INVENTORY OF YOUR MIVA STORE:
You will want to take an inventory of what functionality is currently in place within Miva and see if this same type of functionality is available within Shopify. In some cases, you can change or alter the the functionality to best suit your needs but in some cases, you will either need to add a paid or free app from the Shopify App Store or contact a developer (like After Dark Grafx wink! wink!). To perform the upgrade or add advanced custom coding that Shopify or the theme that you choose does not offer.

 

Shopify Developer - Shopify Desginer - Shopify Expert - Shopify Setup

 

WHAT TO KNOW ABOUT SHOPIFY BEFORE MOVING (PROS, CONS, LIMITATIONS & BENEFITS)

VIEW EXISTING SHOPIFY THEMES

VIEW EXISTING APPS

CONTACT A SHOPIFY DEVELOPER (We are Shopify Experts)

USING A THIRD PARTY MIGRATION SERVICE PROS & CONS

EXPORTING AND IMPORTING DATA

INTEGRATING DESIGN CHANGES

CODE FUNCTIONALITY CHANGES

INSTALLING FREE AND PAID APPS

SETTING UP THIRD PARTY SHIPPING AND THE COSTS INVOLVED

SETTING UP PAYMENT GATEWAYS AND THE  COSTS

POINTING YOUR DOMAIN NAME

LAUNCHING YOUR NEW STORE

UPDATING THE SITE MAP WITH GOOGLE

USING REDIRECTS SO YOU DO NOT LOSE “*SEO JUICE”

 

This is just a basic list of what needs to be done before, during and after a migration from Miva Merchant Shopping Cart to the Shopify Platform.

 

You can Sign Up for a 14 Day Free Trial with Shopify – Click Here!

 

Contact us today click here for a FREE, 30 MINUTE, NO OBLIGATION consultation.
Toll Free (888) 578-8300
Local: (619) 702-7377

 

 

Shopify’s post about Migrating to Shopify Click Here

 

After Dark Tip: Make a Backup of your entire site and database before starting or making any changes or migrations.

 

*SEO JUICE = Your current SEO standings or what links you currently have within the search engines.

Shopify Developer - Shopify Desginer - Shopify Expert - Shopify Setup

Shopify Tutorial For Beginners Part 2 – Create An Online Shopify Store 2019

In this Shopify video tutorial, Part 2 of 2, I show you how to easily edit the backend of a Shopify Store using the default Debut Theme. Shopify is a great e-commerce platform with a robust set of features to have you selling your products/services in no time.

You can sign up for a 14-day free trial of Shopify Here:
https://shorturl.at/kKX17

Pros of using Shopify:

– Quickly Start and Launch a Store
– Thousands of FREE Apps to help you sell and run your store
– Inexpensive if using free apps but can get expensive if you use a lot of paid apps.
– Low Learning Curve
– No Need for a Merchant Account
– No Need for a Shipping Carrier Account
– Easy to Add Apps, Change Themes and Update
– Easily Add other Sales Channels (ie: Facebook, Instagram, etc.)
– Easily Add a Buy Now Button onto an EXTERNAL website. (You can add a product button called BUY NOW to a website that is not hosted with Shopify but would process the checkout through Shopify

Cons of using Shopify:

– There is a 3 option limit for products. Example: If you sell t-shirts and have Size, Color, Material (you can add all kinds of variants to these options like small, medium, large, etc.) but Shopify has a 100 variant limit for these so you would need an app to extend the OPTIONS to get you past the 3 options threshold and the 100 variant threshold.
– You use Shopify Payments, otherwise, if you use your own merchant account, then they add additional fee to your monthly plan plus you will pay a percentage to Shopify in addition to your existing Merchant Account and Gateway Fees.
– If you add another Shipping Carrier (Shopify’s built-in carrier is USPS) if you add: FEDEX, UPS or other carrier there is an additional monthly fee approx $20 per month as of today’s date but this is cheaper than upgrading to the next plan on Shopify.
– No direct access to the Shopify database without an app via Api
– No direct backup mechanism without an app. You can export the products, customers and orders within Shopify but that is it. You would need an app to extend this functionality.

If you need a Shopify Expert or just want ask some questions, please feel free to contact me at any of the links below.

My Main Website: https://www.afterdarkgrafx.com
——————————————————————————–­–

MY TWITTER:

MY FACEBOOK:
https://www.facebook.com/afterdarkgrafx

MY INSTAGRAM:
https://www.instagram.com/afterdarkgrafx/

MY LINKEDIN:
https://www.linkedin.com/in/james-byrne-755b9217/

I Use Quicktime Player To Record My Screencast Videos and edit them with: https://fxhome.com/hitfilm-express (its free)

You can sign up for a 14-day free trial of Shopify Here and Try it out as well as make sales before you even have to pay them their monthly fee:
https://shorturl.at/kKX17

If you missed Part 1 of this series – Click Here

Disclaimers: Links in the description are typically affiliate links that let you help support the channel at no extra cost or are direct links to my existing accounts.

Shopify Developer San Diego

Shopify Tutorial For Beginners – How To Create An Online Shopify Store 2019

In this video tutorial, I show you how to easily create a Shopify Store using the default Debut Theme. Shopify is a great e-commerce platform with a robust set of features to have you selling your products/services in no time.

You can sign up for a 14-day free trial of Shopify Here:

https://www.shopify.com/?ref=after-dark-grafx

 

 


Pros of using Shopify:

– Quickly Start and Launch a Store
– Thousands of FREE Apps to help you sell and run your store – Inexpensive if using free apps but can get expensive if you use a lot of paid apps.
– Low Learning Curve
– No Need for a Merchant Account
– No Need for a Shipping Carrier Account
– Easy to Add Apps, Change Themes and Update
– Easily Add other Sales Channels (ie: Facebook, Instagram, etc.)
– Easily Add a Buy Now Button onto an EXTERNAL website. (You can add a product button called BUY NOW to a website that is not hosted with Shopify but would process the checkout through Shopify Cons of using Shopify:
– There is a 3 option limit for products. Example: If you sell t-shirts and have Size, Color, Material (you can add all kinds of variants to these options like small, medium, large, etc.) but Shopify has a 100 variant limit for these so you would need an app to extend the OPTIONS to get you past the 3 options threshold and the 100 variant threshold.
– You use Shopify Payments, otherwise, if you use your own merchant account, then they add additional fee to your monthly plan plus you will pay a percentage to Shopify in addition to your existing Merchant Account and Gateway Fees.
– If you add another Shipping Carrier (Shopify’s built-in carrier is USPS) if you add: FEDEX, UPS or other carrier there is an additional monthly fee approx $20 per month as of today’s date but this is cheaper than upgrading to the next plan on Shopify.
– No direct access to the Shopify database without an app via Api
– No direct backup mechanism without an app. You can export the products, customers and orders within Shopify but that is it. You would need an app to extend this functionality.

If you need a Shopify Expert or just want ask some questions, please feel free to contact us here at any of the links below.

You can sign up for a 14-day free trial of Shopify Here and Try it out as well as make sales before you even have to pay them their monthly fee: https://www.shopify.com/?ref=after-dark-grafx

 

Disclaimers: Links in the description are typically affiliate links that let you help support the channel at no extra cost or are direct links to my existing accounts.

Shopify Designers San Diego

GetItPowerSports.Com – Shopify Design & Development

After Dark Grafx announces the launch of GetItPowerSports.com

After Dark Grafx Shopify Web Design services along with our Shopify Development services, enabled Get It Power Sports to quickly launch their Shopify Store. GetItPowerSports.com initially contacted After Dark Grafx to provide Shopify Consulting Services for their existing group of website brands. After Dark Grafx was then retained to perform the Shopify Design, Development and App Installation and configuration for GetIitPowerSports.com.

“After Dark Grafx offered a custom website design approach to focus on product sales and conversion. They setup and integrated Shopify payments, shipping and inventory management and offered a Custom Shopify Development and coding solution to optimize our product pages. We basically, said –> Just take care of it!  And they DID! AWESOME!” – Eric F. Owner

Shopify Designers San Diego - Getitpowersports.com - After Dark Grafx Web Design San Diego

The Shopify Platform is a robust eCommerce platform with a low barrier to entry along with a “simple to use and understand” interface, this platform allows for businesses large and small to offer and manage a professional eCommerce website without a lot of training.  Easily track inventory, hook into your financial booking and shipping systems and easily manage and process orders make Shopify the “GO TO” eCommerce solution for you.

Kingfisher Woodworks - Shopify - After Dark Grafx

Kingfisher Woodworks – Shopify Setup, Design & Integration

After Dark Grafx announces the launch of  KingfisherWoodWorks.com !  After Dark Grafx offered a simple design approach to emulate but not copy the previous website. They setup and integrated Shopify payments, Shopify shipping and offered a Custom Shopify Development and coding solution to optimize our product pages.

Kingfisher Woodworks initially contacted After Dark Grafx to consult on their existing Miva Merchant Website. After discussing the pros and cons of each platform, billing methods as well as ease of integration with other apps and systems, we chose to move and re-build the entire website into the Shopify Platform.

Kingfisher Woodworks - Shopify - After Dark Grafx

Kingfisher was able to easily add, reorganize and update their custom-made wooden swords for Japanese Martial Arts product line after a short phone and screen share consultation.

“After Dark Grafx is a Shopify Setup Expert that was able to quickly integrate and setup our Shopify Store. They offered valuable insight on which free and paid Shopify apps to use. They used their custom Shopify Development skills to customize our product pages. We have over 1200 inscriptions that can be added to our wooden swords with a simple to use interface for our customers. They built a custom Shopify solution for use while utilizing one of the paid options apps to achieve what we needed for our product pages. Awesome!

With a simple, short, online consultation we were able to understand how the order and shipping process worked very quickly with Shopify’s simple interface.” 

We appreciate you choosing After Dark Grafx to design and develop your new Shopify website.

Visit them today at:  http://www.kingfisherwoodworks.com.

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.

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.