Shopify Tutorial For Beginners – How To Create An Online Shopify Store 2019 August 06, 2019at 18:07 pm By: James Byrne After Dark Grafx 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://shopify.pxf.io/dojygQ 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://shopify.pxf.io/dojygQ 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.
GetItPowerSports.Com – Shopify Design & Development July 11, 2019at 18:59 pm By: James Byrne After Dark Grafx 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 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 Setup, Design & Integration June 25, 2019at 22:22 pm By: James Byrne After Dark Grafx 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 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 New Shopify Website Launched December 11, 2018at 18:37 pm By: James Byrne After Dark Grafx 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. 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.
How to Add a Side Bar to Shopify Theme August 30, 2018at 21:37 pm By: James Byrne After Dark Grafx 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. I start off by adding a NEW NAVIGATION menu. In the Shopify Admin, click on ONLINE STORE on the left then select NAVIGATION. Select ADD MENU I named my menus Shop By Brand and Shopy By Beauty. 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. 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. Next select ACTIONS again and select EDIT CODE 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) 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’ %} 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’ %} SAVE the new template (top right) We will now need to CREATE the page called sidebar.liquid that will contain the navigation and other items for the sidebar. On the left now scroll down to SECTIONS and select ADD NEW SECTION. 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> 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. 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”> 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 …. Be sure to scroll to the very bottom of this page and add the closing </div> SAVE THE PAGE 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. 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;} 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;} } SAVE THE FILE Lastly, the below screenshot is what you should end up with. 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.