Category: Shopify

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.

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.

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