Image Image Image Image Image Image Image Image Image

Info Centre

Adding more riders

July 25, 2016 | By | No Comments

The Riders main image is a slideshow image – so if more images are created for a particular slider, they can have a slideshow.

To upload images to the slideshow (and for a rider), see this article

MAKE SURE YOU APPROPRIATELY NAME YOUR SLIDESHOW. If it’s a slider about Aero Aswar, it should be named so. Not just ‘slider 1’ etc. otherwise this can get confusing.

Once you have the image of your racer set up, go to CMS (stands for Content Management System) and Pages. Here you will see a list of all the informational pages – including the pages that belong to the RIDERS.

RACETEAM SCREENSHOT 1

To show you how one is already set up, click on one of the riders. I have clicked on Aero’s page. You will notice that I have clearly labeled the page title as his name, and the URL Key (URL stands for Uniform Resource Locator – basically this is the address you are giving the page – so jettribe.com/raceteam-aero-asware). Please note, that it is EXTREMELY important to make sure that you start all RIDERS urls with RACETEAM. This is so that they are all included in the rider’s menu and can easily be found on the site. If this doesn’t happen, they will not be included.

RACETEAM URL

Now click on the ‘content’ tab on the left hand side. You will see the below screen. This is the basic set-up of any rider’s page.

A. The ‘Magento Widget’ is a little piece of code that pulls that rider’s image/slideshow
B. The ‘{{block type=”core/template” template=”raceteam/navigation.phtml”}}’ is what puts the riders’ navigation on the left hand side
C. The rest is simply the rider’s information including a youtube video.

magento widget

To see how the magento widget works, simply click on it and a little button in the nagivation shows up (marked above). Click on this and you will see the below box opening up. It shows a ‘slideshow compact’ and then all the slider that exist – including your rider’s slide/image. Once you have chosen your rider’s slide, click on ‘insert widget’.

Probably the EASIEST thing to do if you want to add a NEW RIDER is to click on the button ‘show/hide editor’. Copy all the code you see here onto your computer clipboard. And now create a new rider’s page, go to the CONTENT tab, hit the SHOW/HIDE EDITOR button (so that you are in the html version of the editor) and paste it in there. Then hit on the show/hide editor button again and you are in the WYSIWYG editor (Microsoft Wordish editor).

show hide editor

Please note, if you want to add a YOUTUBE video, you will have to click on the show/hide editor section and add it there – as youtube give you code that you can’t add on the WYSIWYG screen.

Adding Images to your Magento Store

July 18, 2016 | By | No Comments

Being able to add images to your Magento store easily, that also look right and load quickly is a very important part of managing your store.

The first thing you should be familiar with is if your store has specific dimensions it uses for particular sets of pictures. For example, slider images, product images and other images are sets of images which should all be the same ratio so that when uploaded they all look the part.

Product images in Magento should all be the same aspect ratio – whether it be square – say 1000px by 1000px or 1200 by 800px. As long as the main product images (not additional photo’s) are the same ratio, they will look okay.

As the slider is already set up with a specific size, these pictures should stay that size. To find out what size an image is, using firefox you can right click on your mouse, click on ‘view image info’ and from there see the exact size of the image that you need to be replicating.

2.-view-image-info

Blog images also come with a specific aspect ratio, and by doing the above trick, you can figure out what ratio this is.

3.-blog-images

When creating pictures for your website, make sure you use Photoshop or a similar program when saving your picture. Photoshop has a special feature that removes a lot of unnecessary data from a picture and thus allowing it to be compatible with websites – especially if someone has a bad internet line or are using their mobile device to view your website. So always use the ‘save for web and devices’ and try to minimise the size of the picture (in Kilobytes) without reducing the quality. .jpg pictures usually work out the best in terms of reducing the Kilobytes without harming the quality.

Once you have your picture(s) ready, log in to your Magento admin panel.

2.-Log-In-Screen

UPLOADING PRODUCT IMAGES

To upload product images, click on CATALOG and MANAGE PRODUCTS.

4-catalog

You will see a full listing of all your products. Find the product you want to add pictures to and then click on the 4th tab down on the left hand side called ‘images’.

5. image tab

On the bottom right of this screen you will see two orange buttons – BROWSE FILES and UPLOAD IMAGES. The ‘browse files’ is used to find the image(s) you want to upload – you can select and upload multiple images at once with Magento. Once you have selected the images you want to upload from your computer using the ‘browse’ button, you will see a list of images ready to be uploaded in RED. When you are happy with the images that need to be uploaded, press the ‘upload images’ button, and all of the images you had selected will all be uploaded to the product in one shot.

6 ready to upload

If you want to change the main picture, or if you have just uploaded a new product with new pictures, you will need to make sure you click on the respective ‘base / small / thumbnail’ radio buttons. Without doing this, your picture will not show up in category or product pages.

7 base small thumbnail

Once done, make sure you hit the ‘save’ button at the top right of the screen.  Otherwise your work will NOT be saved.
 

UPLOADING SLIDER IMAGES

Slider images are really easy to upload.  Remember to make sure that they are the correct size.

Navigate to Manager in the admin menu and to EM Slideshow (see below).   You will see the list of current slider.  The homepage slider is the ‘main slideshow’.  Additional slideshows are the rider slideshows (and set up exactly as the home slideshow).

8-slider

To edit the home slideshow, simply click on the line, and then on the ‘images’ tab.  Don’t click on anything else.  You will see the current images.  If you want to add to it, hit the ‘add new image’ button and choose your picture (1 picture at a time).  If you want to delete an image, hit the ‘delete image’ button.

Once you have uploaded an image (or images) to your slideshow, hit the ‘save’ button.  Check to see if an empty image has shown up.  This seems to be a little glitch with the image uploading software.  But it’s simple to remedy – just delete it and save it and the glitch is gone.  If you don’t do it, there will be a ‘blank’ image as the first sliding image on your slideshow, which will look a bit odd.

9 glitch

RIDER IMAGES

Since the rider images were first configured to be slideshow images, they are uploaded in exactly the same way as the homepage slider.  If you upload only one image and adjust the settings, it will show up as a static (non-moving) image.   The only thing to note here is when adding new riders, to ensure you duplicate the EXACT settings as with one of an existing rider.  So open up an existing RIDER slider and DUPLICATE the exact settings in each of the GENERAL / SLIDE ANIMATION and NAVIGATION tabs.  Also make sure that you clearly label the NAME section as to the rider’s exact name and the identifier is the rider’s name with a dash in between for any spaces.

rider slider setting

BLOG PICTURES

Blog post images that are the FEATURED images – ie show up on the homepage section of the ‘latest news’ and that show up in the blog section as thumbnails need to be a specific ratio.  Again what happens otherwise is the images will look stretched or distorted.  So the best thing to do is to upload the right ratio of image and then all will look really nice.

POST THUMBNAIL IMAGE 1

POST THUMBNAIL IMAGES 2

So to navigate to the blog go to MANAGER > EM BLOG and MANAGE POSTS.

blog

When you are there you will see a lists of all the blog articles there.

Either add new or click on an existing blog image.

In the first section you will see where to upload the ‘featured image’ (see above).  Simply click the browse button, find your prepared (correct size) image and upload.

FEATURED IMAGE

Once done, you can go to the ‘content’ tab on the left.

If you are going to add 1 or multiple images to your blog post – scroll down to the ‘content’ section/box and click on the ‘image’ icon in the WYSIWYG panel.

UPLOAD IMAGE 1

You will get a box that opens up.  Click on the icon as pictured below:

upload image 2

This opens up the ‘media library’.  Click on the ‘browse’ button to find your picture (or choose an existing one by clicking on it).

upload image 3

Once you have your image(s) chosen, it has not yet uploaded.  It will show up as a red list.  When ready, click the ‘upload files’ button.  This will upload them (and they will show up at the bottom of the list – so you have to use the scroll bar to scroll all the way to the bottom).

upload image 4

Once you have scrolled all the way down, SELECT the image you have just uploaded and want to show up on the blog.  As you select it, you will notice that the INSERT BUTTON at the top right appears.  If all correct, click the ‘insert’ button.

This then closes that window and shows up the original image window – but this time with the image ulr showing.  Now add an image description and title – this is good for SEO.  Note: try to name images when you save the from photoshop as descriptive as possible.  Also try to include important keywords like ‘jet ski’ etc. in the image title, description and the image name – ie jet-ski-racing-event-riders.jpg rather than 1032493450.jpg

UPLOAD IMAGE 6

Once done with that – click ‘insert’ and  your image will show up.

UPLOAD IMAGE 7

Again remember once done with your blog post, ensure you save it.

UPLOADING MODELS’ PICTURES

The models have a CMS page of their own – go to CMS > CMS pages and find the models page.  These images are uploaded exactly the same way as the blog content pictures.  Just make sure they are the right size before uploading.

PDF’s in WordPress – Embedded or Linked

February 1, 2016 | By | No Comments

Once you have the relevant plug-in set up in WordPress, it’s easy to upload a PDF and set it to open as a link or to show up embedded.

Embedded, by the way, means to ‘fix within a surrounding’. Instead of a link, it means you can see the PDF right there. You can also embed, for example, youtube or vimeo videos.

Anyhow, to get to the point. First thing you want to do is create a PDF. Make sure that it’s compressed and set for as low quality that however still looks good. The reason for this is otherwise it can take a while for PDF to load.

Once you have your PDF, log into your wordpress dashboard, navigate to ‘MEDIA’ and ‘ADD NEW’. Upload the PDF here.

upload pdf

PS: You can also upload it directly from your page or post by hitting ‘add media’.

Once you have your PDF uploaded, you can decide whether to embed it or whether to just link to it.

If you want to embed it, go into the media file and copy (and paste in a notepad file) the ‘url’ – ie the address of the pdf.

Go to your page and add this code in:

Now throw the pdf url in here

and finish it off by having this code in the end:

that closes the embed of the pdf.

copy paste

To link to a pdf is quite simple.

Once you are in a post / page, go to ‘add media’. Add your PDF by uploading it like an image (or choosing it from the media library) and ensure the ‘attachment display settings’ is set for ‘link to media file’. This will create a link to the PDF.

attachment settings

Once you have set the link, you now want the pdf to open up in a new tab. Click on the link (while still in the wordpress backend) and a little pencil icon will show up (to edit the link). Press the pencil and you will see the screen below. Check the box that says ‘open in new tab’ and save.

open in new tab

How to Set Up Percent Discount on Range if Threshold is reached in Magento (with or without Coupon Codes)

December 18, 2015 | By | No Comments

In this tutorial we will cover How to Set Up Percent Discount on Range if threshold is reached in Magento (with or without Coupon Codes). More specifically, the following exact scenario:

“10% Discount applied to Accessories, who’s total value in the shopping cart is equal to or more than €19.99 Euro, when a Coupon Code is applied.
This would be against any accessory equal to or more than 19.99, or a combination of accessories which make up the 19.99.
It would also take into consideration a cart with a mix of items, but only apply the discount to the accessories.”

Log into your Magento Dashboard. Navigate to PROMOTIONS > SHOPPING CART PRICE RULES and either hit on ‘ADD NEW RULE’ or click on an existing rule you are going to edit.

shopping-cart-price-rules-magento

  1. Give your discount rule a name you can easily identify. Only you will see this – customes won’t.
  2. Give it an additional description as needed.
  3. Set status to Active or Inactive.
  4. Apply the discount rule to relevant customer groups (hold the CTRL key on your keyboard and click on them all if you want all customer groups to benefit from the discount rule set out).
  5. Choose whether you want the discount to be applied automatically in the shopping cart or manually by customers by using a discount code.
  6. Enter the discount code in the ‘coupon code’ field.
  7. Leave ‘uses per coupon’ blank, if there is no limit.
  8. How many times can the same customer use the coupon code. Leave blank if no limit is set.
  9. Apply ‘from’ and ‘to’ date if you want to set up your discount code at a certain date and stop at a certain date.
  10. Apply priority if you are running a number of concurrent discounts. 0 is top priority, 1, 2, 3, 4, 5 etc. are lower priority.

magento-discount-on-range-if-price-threshold-is-reached

Now click on the ‘CONDITIONS’ tab on the left. Here you are able to set conditions that apply to the rule you are setting.

Choose from the dropdown choose PRODUCT SUBSELECTION.

product-sub-selection

You will now be given a choice for total amount or total quantity – choose total amount.
Change the ‘is’ dropdown next to it to ‘equals or greater than’.
Enter price of 19.99
Keep ‘all’ as is
On the next line choose ‘category’ from the dropdown.
Choose your category – accessories category in this case has an ID of 15

shopping-cart-conditions

Now to go the ACTIONS tab on the left.

Change the ‘APPLY’ dropdown to ‘PERCENT DISCOUNT FOR PRODUCT SET’.
Change ‘DISCOUNT AMOUNT’ to 10
Promo Categories – add the category ID chosen above (number 15)

shopping-cart-actions

If you want to add a ‘label’ to your discount code (shows up in the shopping cart next to the applied discount) hit the ‘label’ TAB on the left and enter the label.

This is not default Magento functionality and requires an additional extension.

Catalog and Shopping Cart Price Rules Troubleshooting Magento

December 18, 2015 | By | No Comments

You’ve got your price rule set up and you go about making sure it’s working and for a reason you can not work it it’s not working.

Here are some very common problems:

1. CATALOG PRICE RULE – You’ve saved the price rule but it’s not working. Have you applied the rule. Just saving it doesn’t put it into effect, you have to apply it.

apply-promo-rules

SHOPPING CART PRICE RULES don’t need to be applied, just make sure they are active and saved.

2. Product not in Category.

Have you chosen a category to apply a promo rule to? Make sure that all the products you are intending to apply the rule to are actually applied to the category.

This post is updated as I come across more ways can go wrong.

Custom Product Options Can’t be Selected in Magento

December 18, 2015 | By | No Comments

If your website has the custom product options module installed, SKU’s are automatically interlinked. For some websites this is not needed if stock management is not done, but if you are keeping track of stock, this is necessary.

If you have a custom option that lets you select a colour or check a box for an additional products/feature, this reflects as an SKU.

custom-option-sku-link

When the SKU is interlinked in an option, when that product option is OUT OF STOCK or DISABLED, the option still shows up but is grey’ed out so you can’t choose it.

custom-option-greyed-out

If this is the case, go to the option’s SKU and check whether the product is enabled and whether there is stock assigned to it. In this example, you’ll see that even though there is stock assigned to it, it’s marked ‘out of stock’ (bottom of the page). In this case, change the ‘out of stock’ status to ‘in stock’.

custom-options-out-of-stock

Once you’ve adjusted the stock status, you’ll see you’re now able to select the option:

select-custom-options

Was this article useful or do you have any questions? Leave a comment!

Editing Subcategory Links on Category pages

December 11, 2015 | By | No Comments

Editing Links on the category pages of subcategories is relatively straightforward – but may require some getting used to.  I have covered most of an explanation of the code and how to edit the links / titles but have also included the same text below.

To edit category box links, go to CATALOG > CATEGORIES and click on the relevant category you want to edit / add / remove a link from.

You will see a bunch of code in the ‘description’ field in the general tab.   You will notice that it’s a continuation of code that start with a ‘<!–start cat box –> and then an ‘<! end cat box>.  These simply delineate that the code within this is a box.

category-boxes-1

So for each box on the category page, this code is the make-up of it:

<!– START cat BOX –>
<div class=”catpage-box”>
<div class=”catpage-box-text”><a href=”{{store direct_url=’lasers/grade-lasers.html’}}”>Grade Laser Levels</a></div>
</div>
<!– END cat BOX –>

There are 12 boxes – so there are 12 repetitions of the above.

All boxes with no title/link look like this:

<!– START cat BOX –>
<div class=”catpage-box”>
<div class=”catpage-box-text”></div>
</div>
<!– END cat BOX –>

The line:

<a href=”{{store direct_url=’lasers/grade-lasers.html’}}”>Grade Laser Levels</a>

has been removed and this just needs to be added with the url and title adjusted.

Similarly to remove / adjust a title or url, just adjust the title or url or remove the line .

Below are step by step instructions of how to go about this.

The first thing to do before making any edits to this field is to put your cursor somewhere in the box, press CTRL and A (to mark everything), then CTRL and C (to copy everything) and the CTRL and V into a text editing program (NOT microsoft word or similar program) – a text editor is a program such as ‘notepad’ which comes with all windows computers as standard.

The reason you are copying this is because in case you make an edit and make a mistake, you always have the original code to copy back in, in case something goes wrong.

the <div> simply stands for ‘Division’ or Section.   The ‘class’ generally means that a pre-defined attribute has been added to this ‘division’.  So say whenever the ‘class’ is called for in the above code, it pulls up a box in the background.

The ‘a href={{‘ code stands for – ‘Anchor Hypertext Reference’ which in laymans terms means ‘link it to this page’.  So whenever it says ‘a href’ you are linking the referenced text or image to some other web page.

In the above case, the linked text is the title ‘Level & Survey Books’.  So all you need to do is
a. adjust the title of the new category

b. adjust the url link (ie change levels/level-survey-books.html with the new url)

One important thing is to make sure all the dots and t’s are included – including all the symbols (such as ‘ – ” and {‘s).  If they are not included or in the wrong place, then something can go wrong.  But just copy what has already been done and just adjust the title and the relative url.

If you have any questions, just let me know.

Adjusting Mega Menu in Magento

December 11, 2015 | By | No Comments

To adjust the ‘mega’ menu on the left hand side or the top menu bar of your website, go to ‘manager’ and then ’em menu manager’.

menu manager 1

You’ll see a list of menus – some of which are samples.  There are two which are relevant to you – the horizontal top menu and the vertical left menu.

The horizontal menu is generally quite static (ie it doesn’t change much over time), so you won’ t need to touch this.  However the vertical left menu is the one that can change due to new product categories being added and other being removed.

Click to edit the vertical left menu.

menu-manager-2

Here you will see the currently configured menu set-up:

menu manager 3

To edit one of the categories, click on the respective arrow (next to the plus button).  You’ll get a ‘columns layout’ box, click on the arrow again, and again on the rows layout until you have hit the the ‘text’ box.  On the text box – hit the + symbol.

Use your mouse to drag open the box even further by clicking and dragging the bottom right corner.

menu manager 4

The first thing to do before making any edits to this field is to put your cursor somewhere in the box, press CTRL and A (to mark everything), then CTRL and C (to copy everything) and the CTRL and V into a text editing program (NOT microsoft word or similar program) – a text editor is a program such as ‘notepad’ which comes with all windows computers as standard.

The reason you are copying this is because in case you make an edit and make a mistake, you always have the original code to copy back in, in case something goes wrong.

You’ll see a few sections here – one is the text in the ‘h3’ tags which is the title of the menu.  Below this is a section called ‘shop by brand’, and below that ‘shop by application’ which list the sub categories in this category.

To add brands or categories, simply ‘copy and paste’ the a line that starts with <li> and ends with </li> (li stands for Line Item).

so I’d copy this line:

<li><a href=”{{store direct_url=’levels/level-survey-books.html’}}”>Level & Survey Books</a></li>

and copy it just below it.

The ‘a href={{‘ code stands for – ‘Anchor Hypertext Reference’ which in laymans terms means ‘link it to this page’.  So whenever it says ‘a href’ you are linking the referenced text or image to some other web page.

In the above case, the linked text is the title ‘Level & Survey Books’.  So all you need to do is

a. adjust the title of the new category

b. adjust the url link (ie change levels/level-survey-books.html with the new url)

One important thing is to make sure all the dots and t’s are included – including all the symbols (such as ‘ – ” and {‘s).  If they are not included or in the wrong place, then something can go wrong.  But just copy what has already been done and just adjust the title and the relative url.

If you have any questions, just let me know.

Adding a Video to your Magento Product Page that Opens in a Lightbox

December 11, 2015 | By | No Comments

Navigate to the respective product in the CATALOG section of your website.

Hit on the ‘videos’ tab which is located near the bottom left:

product videos 1

This video player pulls youtube videos.  So go to youtube and find the video that you want to include in your website.

Click on ‘add video’ button on your website and you will see a field that asks for a ‘youtube key’.

video 2

The youtube key are the letters and numbers in the URL after the equals (=) sign like attached:

product video 3

Copy and paste that key into the youtube key area (on your website video section), hit the ‘save and continue to edit’ button and if successful, it will show up the video thumbnail of the chosen video.  If NOT successful, check to make sure that you copy pasted the whole key.

product video 4