Incorporate and Integrate Amazon aStore with WordPress Page

»»»Incorporate and Integrate Amazon aStore with WordPress Page
aStore is a new Amazon product for Amazon Associates that gives affiliates the ability to create a professional online store in just several minutes and without the need for knowledge or skills of advanced HTML programming. Best of all, Amazon aStore not only can be linked directly from your website, it also can be embedded within and integrated into your website or blog. So you can start your online business selling Amazon or its partners products and earn affiliate referral commissions without even letting your visitors leaving your website.

Amazon aStore

Amazon has provided 3 options and ways to integrate and publish Amazon aStore, i.e. link directly to your aStore as a stand-alone site, embed your aStore using an inline frame and integrate your aStore using a frameset for websites that use frame layout structure. If you own a normal HTML-based website, integration and incorporation of aStore into the website is very easy and straight forward. Just create a link directly to the aStore online store, or create a new page and insert the iframe or frame layout embedding code that provided by Amazon to the new page, then link to the new page from your main index page. However, if you’re blogging on WordPress platform, the steps to integrate Amazon aStore with WordPress are not so straightforward. However, aStore and WordPress can still be integrated by using WordPress page template, so that the aStore will appear inside the framework or layout of WordPress, without the need of any WordPress plugin.

To insert and embed Amazon aStore into WordPress so that aStore is integrated with WordPress, follow these instructions:

  • Join and sign up as an Amazon.com Associates.
  • Build the aStore by Amazon by following 4 simple steps, where you can select your featured Amazon products that the visitors to your online store will first see, choose which product categories and sub-categories that will display on sidebar, customize the color and design of aStore, and customize aStore sidebar by using Sidebar Widgets.
  • After building and customizing the aStore, get your personal link code for aStore. Choose embed my store using an inline frame option to get the link to publish in the WordPress page.
  • Create a custom page template for WordPress based on your existing Page template, but without the sidebar by deleting the <?php get_sidebar(); ?> line. This is because 800 pixels wide, and for most of the themes for WordPress, aStore won’t fit within the page if there is any sidebar. As WordPress templates are heavily aligned and positioned by using CSS DIV tags, you may need to remove DIV in CSS layout that restrict the width of the layout in your aStore page template. Generally, a aStore page template would like similarly like this (comments on template code in italic, can be safely ignored):
    <?php
    /*
    Template Name: aStore Page
    */
    ?>
    The above section is important so that WordPress will identify the new theme's php file as a Page template. You can change the template name though.
    
    <?php get_header(); ?>
    In WordPress theme's header, there may be also DIV tag that controls the width in the Page layout. If it's the case, the remove this line, the copy and paste the everything from Header template, and modify accordingly.
    
    <div class="content">
    Again, this may restrict the width of layout, if so, replace it with your own DIV structure, or simply with <center></center> (which I used) or just remove the line.
    
    <iframe src="http://astore.amazon.com/affialiateid-20" width="90%" height="1000" frameborder="0" scrolling="yes"></iframe>
    Replace above line with your own Amazon aStore link. I personally found that the height is too big, so I reduced it and modified the scrolling to yes. If your layout is just 800 pixels, you might need to modify the width to 100% too.
    
    </div>
    If you don't use any DIV above, just remove this line too. If you use <center>, replace with </center>.
    
    <?php get_footer(); ?>

    Note: You can also exclude the theme’s header and footer (basically mean empty template file just just a line of aStore affiliate link, but that defeat the purpose of integration with WordPress.

  • Upload the new template with aStore code to your WordPress theme’s directory. So if you’re using Blogsome or WordPress.com, you may be out of luck.
  • Create a new WordPress static Page by clicking on “Write” then “Write Page”.
  • Key in any Title you like, then on the Page Template at the side, choose aStore Page (or whichever name you gave to the new template).

    WordPress Page Template Option for aStore

    Then save the page.

  • You’re done. Your integrated WordPress aStore page has been published.

By | 2016-12-09T08:41:28+00:00 December 9th, 2016|Categories: Advertising|Tags: , , , |43 Comments

About the Author:

LK is a technology writer for Tech Journey with background of system and network administrator. He has be documenting his experiences in digital and technology world for over 15 years.

Connect with LK through Tech Journey on Facebook, Twitter or Google+.

  • Pingback: » Amazon aStore -- Thatedeguy()

  • I'm rebuilding my site (not yet published as I write this) and this trick came in so handy.

    Thank you!

  • This was the easiest set of instructions I have encountered since using WordPress. Now I will be using a-stores as much as possible. Thanx for all you do.

  • Adam Warner

    I just found your excellent and esy directions! Thank you! It's working almost perfecty, but my store is a bit cut off on the right hand side. Any chance you could take a look at the page and the code?

    Thanks for any help you can provide:)

    Adam

  • admin

    Adam, you may need to remove your sidebar.

  • Adam Warner

    I have removed the sidebar, this is the code in my "shop" page template…

    The page is here…

    http://wedreaming.com/?page_id=36

    I am using the Default Kubrick theme.

  • Adam Warner

    I see I can't post code here…whoops…

  • admin

    Seems like the width of your page is too small, try to remove <div id="page"> and its respectively close at the bottom.

  • Adam Warner

    I'm sorry to keep bugging you, but I have also removed that code. This is my code minus the php tags…

    php start

    /*

    Template Name: Shop

    */

    php end

    php start get_header(); php end

    php start get_footer(); php end

  • Adam Warner

    After header is the center tag and then the inline frame astore code, then the center end tag.

  • admin

    I check your page, you still haven't try to remove the <div id="page"> and </div>. If not, you may need to modify your CSS on body.

  • Adam Warner

    I'm sorry, I'm editing the shop template page from the admin–>theme editor–>shop…..this does not show that code.

    When I view source from browser, I see that code to be removed….where is that coming from?

  • admin

    Read the post above carefully, you may need to remove get_header and copy and paste the code manually to your template, without the said div.

  • Adam Warner

    I removed get_header, saved and the shop displayed pretty good, although without my header;)

    I manually typed the get_header code back in and save and the right side was cut off a bit again.

    I am left with editing my stylesheet code for page widths. I have tried that and was able to get it wide enough to display, but then all the other pages were mis-aligned. I will keep tinkering with it and see if I can solve this. If not, I'll just remove the header code for the shop page and go from there.

    Again, when editing the shop.php page, I do not see any div code. I do see this code in the header.php, but I have tried removing that and that produced more mis-alignments on other pages.

    I'm sorry to have been a bother;) I'll post back when (and if) I get this solved.

    Thanks for taking the time with me.

    Adam

  • admin

    Once you remove get_header and copy back the code manually, left out the div i mentioned just now, then check if it works. If fit in proper once your astore align a little bit to the left, then you no need to modify the width of the page in CSS.

  • Adam Warner

    I still do not know where the div is coming from.

    In the shop.php there is no div code. The only div code that I see is in the header.php. When I edit the header.php to remove this, the other pages are mis-aligned.

    I'm stuck.

  • admin

    You don't remove div from header.php. You should remove get_header from your astore template, then copy everything from header.php and paste into astore template, and remove the div in astore template.

  • Adam Warner

    Sorry, I'm just confused now, I'll try again in the morning. I have enabled scroll and placed a 1 pixel border to the inline frame code so you can see here… http://wedreaming.com/?page_id=36

    Thanks again for your help, I will keep at this until I understand:)

  • Thank you so much for this tutorial. I would never have had the courage to try this without your guidance!

  • Pingback: Embed amazon astore in your wordpress blog to have online business in your blog « TARGETLIFE-COMPUTECH TRICKS()

  • Thanks, these were very easy instructions to follow: I've created a store about Spaina and Spanish things.

  • Tine Müller

    Am I blind or don't you have this used on this Blog?

  • admin

    aStore used to on this blog, but now been taken down.

  • Tine Müller

    Do you know of a blog where it's used?

    I ask because I have some problems making an iframe myself but showing a map like this http://www.tinemuller.dk/new_wordpress/another-test-map/.

    I have now deleted from the code because of too many problems but would really like to have this above the map but can't get it to functioning.

  • Your instructions worked and I now have an Amazon aStore within my WordPress site at http://www.afloat.org.uk.

    Thanks for the advice!

  • Thanks for the instructions I am SOOOOO happy with my store integration!

  • Rod

    Thanks for the tip. I was stumped until you pointed out the need to create a new template for the page – after that it was easy. Up til that point I was having all kinds of nightmares about having to hack the existing templates…

  • Thanks for this article, it will help a lot of people.

    Do you know a way to easily add links to blog posts that link to items in your aStore within your iframe? Does that make sense?

  • Hi, thanks for this great tutorial.

    Our site is live in 20 minutes

    (for anyone struggling – don't just copy the code above – you need to change the "" – otherwise your server will return a 404)

  • There are a few limitations with iframe based astores. These are listed at <a title="aStore SEO" href="http://www.astoreproxy.com/&quot; rel="nofollow">astoreproxy.com

    and also the solution.

  • Hello,

    I've taken a look at your tutorial here for embedding my aStore into my WordPress.org website, but I have to admit that I am a bit confused.

    I've included my site in the website link for reference.

    What I'd like to do is create a new page on my site, between the page tabs Join and Artwork called Shop.

    Inside of the page Shop, I'd like to embed my aStore.

    However, as you mentioned, the storefront is too wide to be adequately placed within the margins of the post area. So I am wondering how do I remove the sidebars from showing just on the Shop page while keeping them as they are on other pages of my site?

    I also notice, from looking at a few blog sites listed in some of the comments, that some users have a sidebar option that shows a preview of a few of their shop items and once a user clicks on that sidebar preview, they are taken into a page on their WordPress site without sidebars that showcases the shop entirely. This is another option I am interested in for my website.

    If you can help me with this issue, I'd greatly appreciate it and any time you take out of your schedule to do so.

    Warmest Regards,

    Allyson N. Jason

  • Thank you, thank you, thank you!!! I have been trying to figure out how to do this for weeks. I learned a lot and made quite a nice store I think. Thanks again!

  • QVC

    Hi there.

    After hours of mulling over the issue, I finally got my aStore integrated into my site. One thing, though. You can set the scrolling to "auto" so that the scrollbars appear only when needed.

    In addition, Amazon makes customizing various colors via the CSS for the aStore a snap.

    Thanks again!

  • Chi

    This is the answer I needed! Thanks 🙂

  • well ive integrated my store at http://www.1stopgeekshop.com/store/ but how do you overcome the iframe issue? search engines cant read iframes so your store wont get crawled ive heard of astoreproxy but nobody seems to know how to get a copy of it. there is no order page on the site, and the whois email bounces back… any ideas on how to seo the store once its integrated?

  • Marle

    I'm so sorry and even embarrassed to say this, but I can't make this work… can anyone just paste the exact code for the template we're supposed to make to have it work? Thanks

  • Marle

    Finally got it working, thanks!

  • TR

    well, i replaced the ""s and i still get a 404 message. this has taken me weeks and still no solution – it has to be the MOST frustrating thing i've ever tried to do with WordPress!!

  • Excellent tip. Thanks for publishing it.

  • Sean G.

    Thank you so much for this. It really helped.

  • Tacha Nollof

    So I'm sure this is just eh ne thing Trend

  • Sandra

    I created a page called store and place the Amazon astore code into the page using the html editor. I changed the 90% in the code to 100%. I used a theme that customizes individual layouts to one column only. I put Store on my menu. that's all I needed to do to create the store front. What I'm confused about now is how to get the selected products into the store itself. I can past the code to the same page, but the products appear either above or below the store template itself. Anyone know how to deal with this?

  • malkah

    Hi
    Im trying to set up my astore.
    I managed to create the astore template but the page is not aligned to the center. it is aligned left so I can see only half of the page.
    how can i move the store to the center of the page?

Pin It on Pinterest

Share This

Share This

Share this post with your friends!