Setting up a multi-website Magento store

Though there is a lot to learn, understanding the file structure of Magento is essential in order to migrate a store into a multi-website for an upgraded store. Here is an overview of the steps to migrate a second store into Magento.

Last year I had the opportunity to learn about working in the e-commerce platform Magento–creating products, adding modules, updating security patches and more. Though there is a lot to learn, understanding the file structure of Magento was essential in order to migrate another store (running version 1.4) into a multi-website for another store that had been recently upgraded to 1.9.2. While searching for the best process, I learned there are many ways to set up a second store on the same Magento install—but there were many things I still didn’t understand being the novice server administer of a one-person web team.

Below is an overview of the steps I took to migrate a second store into Magento; please note that this is not an exhaustive list but an overview to point you in the direction of which parts you may need to learn more about.

Add second website to Magento

There are many guides that cover this including How To Setup Multiple Stores On Magento. Be sure to understand the difference between a website, store and language. Separate websites can reference the same products and CMS pages, but they are typically used for completely different product catalogs. Set up your categories and website from the store settings, keeping the website code in mind, as you will want to make this consistent in your settings. Try it out now and set up your second store.

Modify server to accommodate multiple Magento websites

To me, the most daunting part of adding a new website to an existing Magento install was the fear of making an error that would take down the current website. After testing with local web servers, here are the steps I took on our Apache server (running Debian 7×64):

Update DNS settings

From your second domain (or a test domain) update the CNAME/A name to point to the server address of your primary Magento website. For example, my setup looks like this:

Store2 Advanced DNS (A Records)

Host TTL Numeric IP
www 7200 192.168.x.x
@ (None) 7200 192.168.x.x
* (All Others) 7200 192.168.x.x

Add to your virtual hosts

Add your second domain to sites-available on your server. Once you are satisfied with the setup, you can run aen2mod enabled, to enable to the second domain on your server. Ensure your server is using Named Virtual Hosts.

Test apache server config prior to restarting:

  /usr/sbin/apachectl configtest

Restart:

  sudo service apache2 restart

Update primary website web files

In order to use shared themes between websites with minimal changes, it is best to centralize any settings that are the same between your websites, and only override the default themes as necessary using a local theme. I found it easiest to copy the local theme, rename it to match your website id and update the styles and HTML only when needed.

Support secondary website and multiple themes

Copy the local design files (which override your default design theme) and rename the copied folders to match your website code.

  • app\design\frontend
  • skin\frontend
  • skin\frontend\THEME

Redirect incoming requests to the appropriate store

When typing in your primary or secondary website URL, the server must have a way to decide which files to use. In addition to the updates you made when setting up your second website, you must include web store codes in your index.php or .htaccess file. Here is how I’ve set mine up:

index.php:

/* Store or website code */
$mageRunCode = isset($_SERVER['MAGE_RUN_CODE']) ? $_SERVER['MAGE_RUN_CODE'] : '';
/* Run store or run website */
$mageRunType = isset($_SERVER['MAGE_RUN_TYPE']) ? $_SERVER['MAGE_RUN_TYPE'] : 'website';

switch($_SERVER['HTTP_HOST']) {
  case 'store1.com':
  case 'www.store1.com':
  $mageRunCode = 'store1';
  $mageRunType = 'website';
  break;
  case 'store2.com':
  case 'www.store2.com':
  $mageRunCode = 'store2';
  $mageRunType = 'website';
  break;
}
Mage::run($mageRunCode, $mageRunType);

Additional Magento updates

Share pages when applicable

Visit each CMS page and/or static block from your install and update the store permissions as necessary. Be sure to notice the selection to apply to “All stores” (versus selecting both stores) as this will keep your pages available to a third website if you ever do add one.

Point design settings to a copy of local design files

Update the Design settings to point to this second website theme for overrides as needed.

Store2 Website:

  • Config > General > Web > Base URL update (http://magentostore2.local/)
  • Default Pages: store2_home
  • Config > General > Design > change “store1” to “store2”

HTML Head

Header: images/store2.png

http://magentostore2.local/ (or similar) should now load an basic page similar to that of Store1.

Use store variables

If you find that your pages are very similar aside from the occasional store name sprinkled in, you can update your page to use a site variable (e.g. reference the Store name variable) instead of using text. This allows a page to display the name of the store it is referenced from so you only have to maintain one page for two websites.

Other considerations

SSL

If you are already using an SSL certificate, simply copy this code into a new sites-available similar to how you added the second website previously. However the code for the SSL should be within the <:443> module.

Restricting your second website for testing

In order to restrict viewing of your second website to your IP only, use the <Location /> within the sites-available. (The developer IPs in the Magento admin settings are NOT for restricting access!) Here is an example of my full sites-enabled code including the <Location /> tag. When you are ready for the world to see your second website, remove the entire <Location /> block. Restart your server after testing and making changes.

sites-available/secondstore:

<Location />
Order deny,allow
Deny from all
Allow from 174.45.x.x
</Location> 

Import/Export

Although I did a lot of development testing using MAGMI, I ended up recreating the products from scratch on my second website. The easiest way to do this is to create your configurable product and then create the Associated Products using the Quick-Create. You can then go back and fill in all product information on the parent product as necessary.

To transfer customers, I was able to use the built-in Import and Export functions for Magento. For orders and sales, I found Aitoc Orders Export and Import to be extremely efficient. Since you are adding sales and orders into an existing system, be sure to update the order IDs to start with 20000 instead of 10000 using find replace on any exported CSV files. After you’ve finished, you must update your indexes so they are ready for new orders.

Additional Resources:

Content Migration Refinement for Horry Georgetown Technical College

Working on a redesign for your website? HGTC’s revamped webpages needed additional TLC after running through OmniUpdate’s migration script. For this project, I created new snippets, added updates for accessibility and SEO improvements, corrected broken links and fixed legacy content to look great on mobile.

Sometimes redesigns need to happen fast! If your web team is small or needs a helping hand in preparing your website ready for its big unveil, consider contacting me for information on how I can help!

For this project, I worked with Missy at Horry Georgetown Technical College to help her quickly release the migration of her new beautiful redesign out into the “wild!”

I contributed in the following ways:

  • Reviewed web templates and suggested critical updates–Added missing or incomplete meta tags; implemented improvements for SEO including restructuring header tags; added the school name to page titles; created hover animations and/or colors for better usability; and more.
  • Modified styles for responsive design–Updated the design of the homepage carousel to look consistent on all devices; modified content styles as necessary; and created new classes as needed to assist with the design.
  • Investigated and fixed malfunctioning snippets and widgets–Fixed JavaScript conflicts in forms; corrected misaligned grids and videos; and modified the XSL code as necessary.
  • Updated .tmpl (template) files to be more useful to end-user–Changed default settings to remove unused content; added pieces that users would often be adding back in; suggested improvements for templates; and updated existing pages using Find/Replace for template options.
  • Cross-checked and re-purposed content from previous website–Thoroughly checked, updated and/or documented any discrepancies between the migrated and previous content; added in new content and links as necessary; and sent daily review e-mails for status of web migration.
  • Ran reports–Corrected broken links and fixed file permissions as necessary.

Thanks to Missy for sharing the following client testimonial–what an honor it was to work with her!

“You did a fabulous job, and were a real pleasure to work with. We were totally on the same page, and I would definitely consider using you again!”
Missy Monolo, Horry Georgetown Technical College


Are you thinking of updating your website or need temporary assistance with a large update to your domain? Contact me with your web goals and learn how I can assist in improving your web presence!

Speeding Up Load Times on Magento CE 1.9x

While this entry could also be aptly named OMG How Do I Make Pages Load Faster in Magento?, I’ve finally found a solution to speeding up my Magento website that makes me so much less bitter, I can now even think semi-straight. If you’re searching for answers as well–and perhaps not finding adequate solutions–I hope this post will be of value for learning all the different ways to increase your Magento website’s performance!

First, let’s go over the items I did try and what worked. Many of the first items deal with configuring your server install, so be prepared!

If you haven’t yet become versed in Linux and are joining the ranks of well-rounded web developers, check out “How Linux Works,” a guide that covers every useful feature you need to know–gain confidence in the command line!

The Run Around

Here is a list of all the items I tried. Some may be useful, but many seemed to not even make a dent in site performance.

  • Grab a Page Load Extension–Want to know if your page is loading any faster? Check out Page load time on Chrome and see how long your page takes each time you load it! The goal is to see those numbers dwindle.
  • Optimize your images–Photoshop has the ability to optimize your images for the web. Try it out and save some bandwidth. There are also online tools for optimizing your images such as https://tinypng.com. Large images do make a big impact on your page load time and may strain your server.
  • Merge ALL the things–Can you combine it any further? Can you remove any unused CSS? Yes, you probably can work on cleanup for hours and it still only saves 50kB. Congrats! Your load speed is still the same. (Although, if you’re wondering, merge your JS and CSS files using: System > Configuration > Advanced > Developer)
  • Compress ALL the things–If you do a search on “gzip” or “deflate” for Magento, you will find all sorts of walkthroughs. After hours of playing with your Apache modules and .htaccess files, you’ll be an expert in server settings. (However your site will probably be only nanoseconds faster.)
  • Cache ALL the things?Okay, so this is getting ridiculous now. Go enable some more modules and check the expiry on your images and files. All good to go? Great job.
  • Research more–Check your server memory. Read about Varnish. Research Magento optimization companies and start crying when you realize their own sites don’t load under three seconds either.

At this point, if you are still here, you may be wondering if I actually found some solution to my slow Magento site.

My Answer: Full Page Cache

Did you hear the musical echoes of the clouds parting?

This plugin from Magento Connect places magical kittens on your site to remember the queries your users make and keep the results for next time. It installed perfectly for me, and within 15 minutes, my pages were loading under three seconds (down from the 7-9 seconds from before.) On subsequent pageloads, some pages are even loading as fast as .92 seconds. I am by far stunned by this extension–for $149.00 it is worth your time, sanity and development–as well as customer retention–to make this investment in your site. I’m sure you won’t regret it.

I hope to come back in the next few months and share the rise in customer traffic that results from these lower pageload times! Until then, just know that I will be dancing around my website, zipping from page to page, all thanks to Magento’s Full Page Cache.


Are you struggling with your own Magento Community Edition 1x installation? Do you need updates to your plugins or new features added? Contact me and let’s chat about your website goals!


Have you found another method that worked for speeding up your Magento install? Please share!

Giant Decline in Bounce Rate: Is it Really a Good Thing?

After a redesign website, Google Analytics showed a huge drop in bounce rate. The cause? Duplicating GA tags within my website’s code!

No, probably not. 🙁

In April 2016, I updated a website with a fresh, responsive Magento design in collaboration with Social Ruckus in Bozeman, Montana. There was a noticeable slowing of the websites as most features used AJAX and dynamic loading. Even so, I noticed a huge drop (~50% to 3%) in bounce rate.

I looked around a bit but couldn’t find any definitive ideas about redesigns correlating to changes in bounce rates. I knew that having a mobile design should actually help but was nervous of such a dramatic change.

Was something set up incorrectly? Yes—tag implementation!

Thanks to help from UI Designer Krista Lacida I was able to target a second Google Analytics tag being loaded into my code which caused issues with my statistics.

Since removing the second tag, all is back to “normal.” (Though I’d much rather keep the 3% bounce rate!)


Are you having problems with your Google Analytics, or do you know if you are even tracking your visitors’ actions on your website? Contact me to learn more about implementing Google Analytics, viewing dashboards and setting up recurring reports for your website!

 

Explore Montana State University

Creating a lead generation page for your university or institution? Here are a few thoughts after implementing the “Explore” page for Montana State University.

In 2015, I had the pleasure of implementing a university lead generation form designed by Graphic Designer Ron Lambert and the Montana State University marketing team!

Overall this design was challenging due to a few of our special page requirements:

Keep the users on the lead page

In order to get the contact information we hoped for, we had to include enough content to remain informative without linking to other pages.

The clever flip over and hover tiles showed additional information without crowding the space. In addition, we chose images that conveyed messages without any text. For example, the section explaining MSU’s majors is interesting, but we didn’t need a paragraph on our beautiful surroundings—that photo speaks for itself!

Use OmniUpdate Content Management System to house our custom page

In implementing this design, we needed to change pieces of the theme for this page only, but we didn’t want to modify the CMS’s XSL templates. Some of our solutions included the following:

  • Disable the heading link for the site logo using JavaScript.
  • Remove the bulk of heading and footer elements using a custom stylesheet.
  • Create assets for each SVG icon—this worked remarkably well for keeping the SVG code inline once published but keeping the page tidy when editing!

Maintain minimal page load time even with a lot of media

Due to the parallax design and large banner, all images and files had to be compressed to keep load times down. Also, we worked to implement SVG icons instead of PNGs or GIFs. The SVGs also made the page more fun to “play” with—the colors could easily change using simple CSS!


Though this was a time-consuming creation, our page analytics showed that it barely made any return on the effort put into it. Given more time on it, I would make the following recommendations:

  • Add Twitter card metadata so the page looked beautiful when shared.
  • Change the text on the form button to make the offer more enticing. HubSpot’s article about lead generation forms points out that the submit button may be the “final opportunity to convince your visitors that they should fill out those last few fields.”
  • Make the benefit more clear to the user—explain what the Explorer’s Guide contains or why it will be exciting to receive.

If you want to check it out (or sign up to learn more about Montana State University!) visit www.montana.edu/explore.

Residence Life Interactive Map

Need a responsive interactive and customized map? This project uses SVG and Fancybox to create a useful resource for students trying to find their way around campus.

When looking into how best to create an image with interactive elements, I had to go beyond using outdated image maps and get creative with implementing maps using SVG (Scalable Vector Graphics) and creating a responsive, interactive information pop-ups!

This map looks great on desktop and mobiletest it out yourself! The functionality enables a user to click either the name or the building itself to learn more about it.

Within Illustrator, we grouped paths and then was able to edit the exported .svg file and assign IDs. Later, I targeted these groups to hide and display the building indicators as necessary.

If you’ve designed a map on Adobe Illustrator, let me help create a responsive and interactive element that your users will love!

This great tool was a collaborative project with Alison Gauthier, Graphic Designer for Montana State University. Please note, illustrative work is very time consuming!

3 Steps to Improving your Amazon Business Catalog [List]

It takes time—and a fair amount of Excel spreadsheet editing—but updating data to enhance your catalog’s presence is time worth investing!

Regardless if you’ve been handed an inventory of products you know nothing about, or if you’ve been maintaining your catalog for years, there may be a few things you haven’t considered when managing your products.

Although there are many resources to choose from within Amazon’s Vendor Central Resource Center, the following actions are some simple ways to improve the findability of your products:

Create variation families

If you have many items with similar features, be sure your customer can see them all immediately. By using Amazon’s variation form, you can associate your products with one another using up to two variation options. The most common variants include color, style and size.

Example of variation options for a camera strap
Example of variation options for a camera strap

Variation swatches help your customers find similar products without having to go back to the Amazon search resultsdecreasing the chance they will settle with someone else’s product!

Add additional images and videos

Go beyond your main product photo and show additional product shots! It’s difficult for customers to visualize some features of your product without a clear photo of how it works or adapts in different situations. Does it accommodate men and women with a simple adjustment? Show photos of your product being used by both!

Keep in mind that large images make a greater impact on sales:

The 1000×1000 pixel image size allows Amazon to offer customers their Hover-to-Zoom feature… which they’ve found has a dramatic effect on conversion rates. StartupBros, How to Rank Your Products on Amazon – The Ultimate Guide 

In addition, although images can be uploaded easily to your image library, videos will have to be requested through a case file. Simply create an Excel file with two columns that list your ASIN and video link.

Here are the requested video specifications as of January 2016:

  • Number of Files: 1 per video.
  • Formats: MPEG-2 (.mpeg), Windows Media (.wmv), QuickTime (.mov) or FLV (.flv).
  • Minimum Video Quality: At least 720px wide, at least 872 kbps. Either 4:3 (standard) or 16:9 (widescreen) aspect ratios work equally well. Aspect ratio is the width divided by the height: if a video is 720px wide, then a 4:3 aspect video will be 540px tall and a 16:9 video will be 405px tall.
  • Maximum Size Allowed: 499Mb. (best results if under 100Mb.)
  • Length of File: Unrestricted

Refine product keywords

An important rule of search terms is they should only contain words that are not part of any other piece of information on your product’s listing.

For example, if a user were to type “long blue dress,” each word of their query must exist somewhere in your fieldstitle, item bullets, description or keywords.

If your product is listed as “MyBrand 012345678 Evening Dress (Navy),” your product should also include the words “long” and “blue” within one of its fields. You might add an item bullet that describes your dress as “Long, flowing material tailored to flatter any figure.” The word “blue” however might be more appropriate to add to the product’s search terms, so it doesn’t clutter your description or bullets.

Once you request your keywords to be updated using an item maintenance form (found in the Resource Center), you can verify your product has been updated by pasting in your entire string of keywords. If it finds a match, you’re all set!

An example of search terms for the example above might include the words “strapless;girl;size;beaded;prom;blue;flower;maxi;formal.”

As of March 2016, keywords should be:

  • Separated by a semicolon (save space by not using any spaces after semicolons)
  • A maximum of 200 characters including semicolons (use a character counter like lettercount.com to double-check)
  • As simple as possibleif you create a compound term, it will search for that full term only

Break away from using the minimal content required and go beyond entering redundant keywordshelp your products get found by adding variations, images and videos, and spend some time considering the best keywords for your products! Your customers will be glad you did.

Naropa University

A redesign to help put users’ needs first for the Naropa University website.

Working with the team from OmniUpdate along with Mary Haste from Naropa University, we implemented a redesign for the entire university website.

Unlike other designs I’ve implemented, Naropa University’s wasn’t quite ready to move all pages into the responsive view. We worked through the challenges and created non-responsive and responsive versions using the same Sass base CSS. As they work through updating each page’s outdated elements—removing fixed width content, updating low-quality images with higher-resolution versions and revisiting text—they can then easily switch their page to the responsive version using a page setting in the OmniUpdate CMS!

To ensure user needs were met, accessibility, semantics and improving content were all specific goals of these updated pages. Many colors were modified to be more vibrant and have a higher contrast in order to adhere to recommended color contrast. Are you meeting these standards? Check your own site’s colors!

Visit their updated website at http://naropa.edu!

Elizabeth City State University Web Redesign

ECSU’s redesign included many creative design pieces that presented fun challenges for implementing in a responsive environment.

In 2015, I worked with Vayakone Sphabmixay from SAX, Inc. implementing their redesign for Elizabeth City State University in North Carolina. There were many creative design pieces that presented fun challenges for implementing in a responsive environment.

Historical Year Timeline

The timeline is both collapsible and adapts to mobile devices. In addition, with this and other dynamic pages developed—such as the Past Presidents of ECSU—a page scroll to the updated area was necessary to orient users to new information.

Custom Weather Feed

If you use OmniUpdate for your Content Management System, you can set your feeds to republish every hour. This is perfect for third-party tools that are only free up to a number of page views. For ECSU, the weather feed was implemented using Weather Underground’s API and is re-published on an hourly basis.

Hover Tiles

The content tiles on ECSU’s admissions page were designed to link to other elements when a user hovers or clicks on a image.

Visit ECSU’s website at http://www.ecsu.edu/ to see the variety of page layouts and how they work on your devices—desktop, tablet and mobile!

Northeastern University’s College of Professional Students

Crafting a better responsive experience for higher education.

In the summer of 2014, I had the opportunity to develop the code for a design created by the team at I-SITE, INC. for the College of Professional Students in Boston, MA. Unlike new development work, this redesign required an update to the base code using only minimal CSS.

Before updating, this Web page had used mobile queries to (unfortunately) simply hide the “unnecessary” mobile elements to make the content disappear on smaller devices. However, many sourcesincluding the book “Responsive Web Design (Brief Books for People Who Make Websites, No. 4) ” from Ethan Marcotte—explain that your Web content is important no matter the device!

Using only 200 lines of CSS, I was able to take this page from its previous design to an elegant responsive design which kept all content and formatted it appropriately.

As this was one of the first pages I implemented responsive web design in, it was an interesting and rewarding challenge. If you have a project which needs a quick update to make it mobile friendly, let’s chat!

http://www.cps.neu.edu/
Visit the updated homepage at http://www.cps.neu.edu/.