1) Setup your API token: https://publishers.shoppable.com/account/tokens
2) Locate the proper
<script> tags for product/cart frames and checkout frame: (https://publishers.shoppable.com/frames)
(select the Shopping Bag and Checkout Page tabs)
For this example:
<script id='lux-shop-loader' src='//d3i35264kiorxl.cloudfront.net/js/shop.js?token=m624s0y0xqJj0y3Nc27e074abe90ca4f'></script>
3) Locate and hold onto your customized cart and checkout html.
For this example:
<a href="#" class="lux-cart-frame" style="modal" data-checkout="http://docs.72lux.com/checkout/">SHOPPING BAG</a><span class="lux-cart-label"> </span>
NOTE: Make sure to change data-checkout to be wherever your checkout may be (and that it is behind an SSL certificate).
For this example:
<div class='lux-checkout-frame' data-return-to-site='http://docs.72lux.com/wordpress-installation.html'></div>
4) Locate and hold onto the product frame and cart css (you may download and host it directly).
<link rel='stylesheet' type='text/css' href='//d3i35264kiorxl.cloudfront.netcss/shop.css'/>
5) Download optional stylesheet:
01) Login and go to dashboard
02) Go to the Appearance Editor
03) We will be placing these
<script> tags within the header of the page, so locate the Header (header.php) template file on the right
04) Locate the closing
</head> tag and paste two script tags right above so it. Don't forget to hit Update File before going to the next step!
05) From the same header.php file, locate a desired location within the
<header> block (or any other block that you may decide on) and paste in the shopping cart html. Again, don't forget to hit Update File!
06) Go to Pages > Add New
07) Name the page whatever you would like then click on the Change Permalinks button to open a new window of Permalink Settings.
08) Here you want to change from the default manner (with
?key=value) to the more readable method, Post Name. Don't forget to hit Save Changes.
09) Close the tab after saving and return the to Add New Page window. Make sure to take note of the permalink of the page. For simplicity's sake, just shorten it to "checkout".
10) Make sure to select the Text tab for the input area and just paste the html right in. Hit publish and the checkout page is setup.
11) This step may vary since SSL certificates can be served from a wide variety of services. However, in order to implement the certificate, check out these directions to implement it as a case-by-case basis (not domain-wide, only on specific pages):
12) Now to ensure that when rendered, the frames actually look nice! Locate the three stylesheets that you downloaded earlier (checkout.css, cart.css, frame.responsive.css).
13) Now we will determine what theme your WordPress Installation is running by visiting Appearance > Themes. For this example, I'm running the default Twenty Thirteen theme.
14) Now locate the root of your installation WordPress installation. The structure will look like what is shown below.
15) Now open wp-content/themes/ locate your theme directory (in this case it is twentythirteen) and open that too.
16) Now throw those three .css files into the root directory.
17) Open up the theme editor again (step 2) and open the style.css file.
18) Once opened, place the following lines at the very top of the file:
@import url('cart.css'); @import url('frame.responsive.css'); @import url('checkout.css');
Now Update File.
19) Your site is now all setup to start pasting in frame html!
You need to switch from the Default to a Post Name structure:
The cart by default points to https://my.site.com/checkout, make sure to change that attribute in the cart html. See step 5.
Styling a shopping bag (http://docs.72lux.com/styling-shopping-bag-frame.html)
Styling a product frame (http://docs.72lux.com/styling-product-frames.html)
Shopping Bag Link (http://docs.72lux.com/shopping-bag-link.html)
Styling Shopping Bag Frame (http://docs.72lux.com/styling-shopping-bag-frame.html)