Amazon Webstore: Adding CSS, JS & Facebook Like box

Continuing with posts of moving my Diabetic shop hypodiabetic.co.uk to Amazon webstore today I wanted to post about adding your own CSS, JS and adding a Facebook Like box to your site.

 

Adding CSS and JS

Using your own CSS Style sheet allows you to customise the page while adding JS script to let you be a little more creative. Its not completely clear how to add this to your site at start, follow these steps to get them applied...

  1. Under Store Design select File Library
  2. Add your own CSS and JS files to the relevant folders. You can customise your current design files here, but its better to keep your customisation separate.
  3. To apply the files to your site follow one of the following...
    • If you wish to apply the file to one page:
    1. Under Store Design select Merchandising & Layout
    2. Pick the correct page
    3. Click on the Properties link on the top right hand corner of the page
    4. On the next page, click the header for "CSS and Script Links"
    5. You will have two options, on top you will have an option to link CSS files, on the bottom your will have an option to link JS files
    • If you wish to apply the file to the full site, for example your CSS overrides:
    1. Under Store Design select Merchandising & Layout
    2. Pick the Master Pages header on the left and then My Webstore
    3. Click on the Properties link on the top right hand corner of the page
    4. On the next page, click the header for "CSS and Script Links"
    5. You will have two options, on top you will have an option to link CSS files, on the bottom your will have an option to link JS files

Adding Facebook Like box

First go to Facebook Developers page to build your Like box. Click Get Code button, I used the HTML5 option.

There are two steps to getting the box working on your site:

  1. Add a HTML widget to your page where you would like the Like box to appear and paste the code in box 2 that was provided by Facebook
  2. You now need to add the Facebook JavaScript SDK, you cannot edit the site HTML so I have added this site wide as I also use the SDK elsewhere. Follow the steps above to create a new JS file and paste in the code in box 1 that is provided by Facebook.
    • As im adding this via a JS file and not embedding into the HTML of the site you must remove the following from the start and end of the text: < div id="fb-root" >< /div >< script > and < /script >

Good luck and happy designing!

 
Tagged under web tech