Month: March 2018

Beginning in July, Google Chrome, the world’s most popular web browser, will start marking ALL websites as insecure if they are not running under HTTPS. Is your website ready? Are your client websites ready?

If you are not sure if your website is secure, just open up a new tab or browser and go to https://YOUR-WEBSITE-HERE (of course you will put your website where in place of YOUR-WEBSITE-HERE above)

If you get to your website and see this:

Then this means that your website is potentially not secure or it is setup incorrectly.

You will want to contact your current host or contact us and we can get a new Digital Security Certificate for you and install it. If you are unsure of what to do, please contact us and we will help you.

If you would like to purchase a Digital Security Certificate, please go here. We will install it for free after purchase.

Here are 4 more reasons to make your website secure with HTTPS:

SEO — Google says it’s way past time to move your websites over to HTTPS. They are now giving an SEO ranking boost to secure sites. Simply put, you’ll rank better in SEO.
SECURITY — SSL protects your site data and visitors. It encrypts data transferred over the web, like form submissions and credit card transactions.
E-COMMERCE —If you’re taking any payments on your website, SSL is non-negotiable. SSL is an absolute must for e-commerce and membership websites.
AFFORDABILITY — In the past, SSL certificates could get expensive, but the rapidly transforming web landscape has made switching to SSL practical and affordable.
(partial content above by email from Cory Miller, CEO iThemes Security)

James Byrne, Information Architect (USMC VET), is a web and app developer, designer, consultant and search engine optimization expert since 1992. Over the past few years, James and his team at After Dark Grafx have successfully transferred hundreds of client websites to HTTPS.

NOTE: If you are NOT HOSTED WITH AFTER DARK GRAFX, we will need the following:
A) Control Panel Access to your website. In most cases this is all that we will need.

B) FTP Access: Only if the Control Panel Access above does not provide the correct information needed to make the necessary changes.

C) WORDPRESS: If you would like us to update your WordPress Installation, please let us know as additional fees will apply based on your theme and configuration. We will need your WordPress Admin access in order to provide an estimate or simply create a new WordPress user and give it admin access then provide the username and password to us. You can then delete this account if you do not hire us or if we are finished with your website.

Questions? Contact Us Today!
Call Toll Free 1-888-578-8300 or (619) 702-7377

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)

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

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:

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.

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.