Category: Shopify

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://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 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://shorturl.at/kKX17

 

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.

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.