WordPress Installation Guide


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>


<script type='text/javascript 'id='lux-checkout-loader' src='https://secure.shoppable.com/assets/js/shop-checkout.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">&nbsp;</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:

Steps for Installation:

01) Login and go to dashboard

'Login to the dashboard'

Insert shop.js and shop-checkout.js script tags.

02) Go to the Appearance Editor

'Go to 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

'Find the header.php file'

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!

'Paste the two scripts before the closing head tag'

Time to add the shopping cart html

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!

'Paste in the cart html'

Time to add the checkout page

06) Go to Pages > Add New

'Create a new page'

07) Name the page whatever you would like then click on the Change Permalinks button to open a new window of Permalink Settings.

'Change the 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.

'Change to Post Name'

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".

'Make sure the permalink is /checkout'

Insert checkout html

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.

'Paste in checkout frame html'

Setup SSL

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):


Adding Appropriate Styles

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.

'Determine WordPress theme'

14) Now locate the root of your installation WordPress installation. The structure will look like what is shown below.

'Locate root of WordPress installation'

15) Now open wp-content/themes/ locate your theme directory (in this case it is twentythirteen) and open that too.

'open wp-content/themes/'

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.

'Paste import css code into style.css'

19) Your site is now all setup to start pasting in frame html!


More Information:

- I don't know how to change my checkout page address from mysite.com/?page=checkout to mysite.com/checkout

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.

- For more information about styles:

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)

- For more information about the Shopping Cart:

Shopping Bag Link (http://docs.72lux.com/shopping-bag-link.html)
Styling Shopping Bag Frame (http://docs.72lux.com/styling-shopping-bag-frame.html)

- For more information about the checkout frame: