Tag: Shopify

Germ-Bot.com - Shopify Expert Designer Developer After Dark Grafx

Germ-Bot.com – Shopify Development

FOR IMMEDIATE RELEASE: After Dark Grafx announces the launch of Germ-Bot.com –  Thank you for choosing After Dark Grafx to design and develop your new Shopify website.

 

GermBot (germ-bot.com) is owned and operated by California Precision Products, Inc. and Election Works, Inc. They contacted After Dark Grafx after an extensive search for a company who understood their product and vision and could just take it over to provide a professional result. They enlisted After Dark Grafx to design and develop a brand new Shopify E-Commerce Website for their new business.

 

Shopify Expert Designer Developer After Dark Grafx - Germ-Bot.com

 

 

 

GermBot was created out of the recent need for an all-inclusive hygiene station in the Polling Places during the Voting Process.. GermBot offers a portable sanitizing solution for offices large and small, excellent for events and gatherings and can be easily moved from room to room. It is 60lbs and only takes up 16″ by 64.5″ of available space so it can be placed in a corner or in tight spaces.

Founded in 2020 by Sandy Hed of Election Works, Inc, and Joe Bean of California Precision Products, Inc., GermBot is ADA Compliant, includes a battery operated hands free gel dispenser, areas for customer supplied standard disinfectant wipes, multifold paper towel dispenser, 5.5″ X 8.5″ placard / tablet device mount, storage compartment and a 7 gallon trash can.

GermBot offers discounts to wholesale suppliers for large orders. If you are interested in becoming a GermBot wholesaler, please contact them.

 

We are so busy, we just needed someone to take on the project with little to no guidance. James and his team delivered! They created our logo, then stickers for the sides of the GermBot as well as packaging. We then had them create the Shopify E-Commerce Website. They sent us tutorials and were able to explain what we needed in the simplest terms. We appreciated that. We are now having James and his team perform Search Engine Optimization Services. They made it easy for us. Thank you, 10 Stars!!!” – Owners, Germ-Bot.com

 

 

Visit them today at:
https:www.germ-bot.com and tell them James from After Dark Grafx sent you!

 

Need a New Shopify Website? E Commerce Store? App Developed? SEO Services? Contact us today! FREE QUOTE!

Shopify Developer San Diego - After Dark Grafx Park West Liquors

ParkWestLiquors.com – Shopify Development

FOR IMMEDIATE RELEASE: After Dark Grafx announces the launch of ParkWestLiquors.com –  Thank you for choosing After Dark Grafx to develop your new Shopify website.

 

Park West Liquors contacted After Dark Grafx to design and develop a brand new Shopify E-Commerce Website for their business. Park West Liquors also needed a new logo. They again turned to After Dark Grafx to design a logo that matched their business brand. Needless to say, After Dark Grafx hit the nail on the head once again.

 

Shopify Designer San Diego - Park West Liquors Website Design Development

 

 

We were happy to provide our over 28 years of website, graphic design and eCommerce development experience to help ParkWestLiquors.com realize its’ full potential.  We upgraded their payment gateways, utilized updated apps, added security enhancements, increased their page speed and mobile optimization and how they are represented on all of the latest media devices. The new design and integrations will help to increase traffic and build their network of loyal customers.” – James Byrne – Owner, USMC VET – After Dark Grafx

 

 

 

Visit them today at:
https://www.parkwestliquors.com
and tell them James from After Dark Grafx sent you!

 

Need a New Shopify Website? E Commerce Store? App Developed? SEO Services? Contact us today! FREE QUOTE!

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.

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.

Products as a Carousel Shopify Homepage

Shopify Products Carousel on Homepage

If you are wondering how to add a product carousel on your Shopify Homepage, look no further!

by James Byrne, Information Architect (USMC VET)
After Dark Grafx

Depending on your Shopify Theme, you will need to adjust the code accordingly.

 

NOTE: The below integration requires a paid app. If you are interested in adding a home page product carousel to Debut, Brooklyn or any theme that uses SLICK then we offer a different  integration for $85.00 that does not require an app – Contact Us Here.

 

Today, we are going to describe How To Add A Product Carousel Slider on a Shopify Homepage utilizing the VENUE THEME, found in the Shopify Theme Store.

This integration is for an advanced developer so be sure to backup your code before beginning this integration.

We will be editing the main theme liquid code of Shopify, uploading a few files then changing the way the template shows a featured collection on the homepage.

All themes are different, so you can use this information and code to troubleshoot your own theme or HIRE US and we will do it for you. There are many apps in the Shopify App Store but you have to pay for them or subscribe and pay for them on a monthly basis.

THEME:  VENUE
CODE INTEGRATION: Flickity – Use Free for Personal Use or Pay the Commercial Integration (Recommended)
CODEPEN TESTING: Click here to see BASIC integration for HTML

We are assuming that you have a Shopify Account – if not, you can signup for one here. We are also assuming that you have purchased and installed the VENUE THEME.

 

STEP 1: Download Flickity – Use Free for Personal Use or Pay the Commercial Integration (Recommended)

Under DOWNLOADS on the page above right click and SAVE-AS and save these files to your computer. We usually start with the NON-MINIFIED versions so that we can edit them if needed. (note: screenshot below – you will have to go to the website above to download)

Flikity Carousel Slider

STEP 2: LOGIN TO SHOPIFY AND UPLOAD THESE FILES
a) Left side in Admin click on SETTINGS
b) Then click on FILES
c) Then upload all files

how to add product carousel on homepage shopify

d) Copy each of the new links  https://cdn.shopify…..   to a new text document as you will need these later in this post.

STEP 3: Go to your theme and add the code references

a) On left click ONLINE STORE
b) On right click on the ACTIONS dropdown and select EDIT CODE
c) Under LAYOUT on the left fine theme.liquid  (it is usually best to make a backup of this code before editing it.)

Scroll to the bottom of this file and paste for CDN referenced files below:

<link rel=”stylesheet” href=”https://cdn.shopify.com/s/files/1/####/####/files/flickity.css?####################“>
<script src=”https://cdn.shopify.com/s/files/1/####/####/files/flickity.pkgd.min.js?####################“></script>

Do not use # as these were placed in this post to hide the numbers from our files 🙂  Just paste YOUR CDN files that you copied from STEP 2 above

Right above the closing </BODY>

STEP 4:  Remember, we are using the VENUE THEME so finding where to make the following edits will be dependent on your theme.

Under SECTIONS on the left, find home-collection.liquid

Around line 31 find this code and ADD THE BOLD ITEMS IN BELOW

<div class=”home-products__grid”>
<div class=”o-layout o-layout–center{% if settings.product_grid_masonry %} o-layout–masonry{% endif %}{% if section.settings.grid == 8 %} o-layout–small{% endif %} layout-slider js-layout-slider js-layout-slider-{{ section.id }} carousel” data-flickity='{ “groupCells”: true }’>
{% for product in collection.products limit: product_limit %}
<div class=”o-layout__item {{ grid_item_width }} carousel-cell”>
{% include ‘product-grid-item’, grid_image_width: image_size, page: ‘home’ %}
</div>

Save the File.

STEP 5: ADD FEATURED COLLECTION TO HOMEPAGE

a) Click on ONLINE STORE on the left
b) Click on CUSTOMIZE BUTTON on the right
c) Scroll Down on the left and select ADD SECTION only is the FEATURED COLLECTION is not showing on the theme.

Add Section to Shopify Theme

d) Select FEATURED COLLECTION
e) Select the FEATURED COLLECTION that you just added and name it to whatever you want.
d) Change the PRODUCTS per row to whatever you want
e) Change the ROWS to the maximum number. I chose 5.

Featured Collection Carousel on Homepage Shopify

Save this page.

FIN!

Now go to your homepage and you should see the products in a carousel.

How to Add Product Carousel to Homepage Shopify