Costumize the Tab Content
After the app installation is finished, go back to your page. You’ll see a new tab titled “Welcome!” on your screen. Click it and let’s costumize it.
Clicking on your new Welcome tab will drive you to this editing screen. In this place, you’ll be able to:
- Place your “code” in the index.html section
- Customize code further in the style.css and script.js sections (for more advanced people)
- Modify tab settings
- Make a Fan-Gate (not so important though)
By default, you’ll land on the index.html page of the app (this is where you’ll do all of your work). You can simply delete the existing text in that section.
Copy Your Widget Code
In Amazon’s Associate Central:
- Click the widget menu at one of the blue tabs the screen.
- Choose “search box” and click “add to your webpage: under it.
- The page will show a new screen titled “Search Widget!”
- In section “Select Format” choose “Search 2.0”
- Click on “designed default search” and type in your keyword product, for example “hdmi cable”
- On “search filter by department” click on “limit search to a specify category” choose the one that fit your selected product to promote (in case of “hdmi cable” the category choosen should be “electronic”).
- In “search result” you can simply use the default setting.
- On “widget size” choose “create a custom size”. The average size for facebook page is 508. You can adjust the number of rows and columns as you want.
- You can also adjust theme and color of your amazon store (this is optional)
- Click on button “add to my webpage” and you will see a pop up window. Click copy on it.
The code we’ll be working with should be something like (3 columns and 4 rows)
amzn_assoc_ad_type = “search”; amzn_assoc_tracking_id = “YOURID”; amzn_assoc_marketplace = “amazon”; amzn_assoc_region = “US”; amzn_assoc_show_price = “true”; amzn_assoc_show_rating = “false”; amzn_assoc_show_image = “true”; amzn_assoc_width = “508”; amzn_assoc_rows = “4”; amzn_assoc_columns = “3”; amzn_assoc_default_search_key = “hdmi cable”; amzn_assoc_department = “Electronics”;
</script>
Secure the Link
When first pasting your amazon script code into the app, you’ll notice a message warning about your amazon script being insecure. This is really important here because, after all, you don’t want to make your potential buyers afraid when shopping.
So, make sure … Change the “http://” within your code to https://”
Don’t forget to click the “Save & Publish” button in the upper right corner. You may also preview your work using the adjacent “Preview” button.
