Diamond showcase app installation

Our showcase app is very straight forward to install and view on your website. You will need to do two things in order for it to work successfully.  

Embedding the Showcase Into a Website

Head Tag Addition:

Place the following 3 lines in the <head> section of your html page. If jquery is already included on your page you can ignore the first line.
<head>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://apps.lionsorbet.com/js"></script>
	<link rel="stylesheet" href="https://apps.lionsorbet.com/css">
	...

Embed Code:
Then place this code where you want the showcase to appear...
    <div showcase id="diamond-showcase" style="width:100%; height:550px; border:1px #F2F2F2 solid;"></div>
    • You can change the size of the showcase by adjusting the width and height in the above line of code, percentage and pixel values can be entered for the width and height.
    • You can either completely remove the border that has been set for you, or you can change any of its attributes for your own custom design

      Embedding the Showcase Into a Shopify Store

      • Log into your shopify admin panel.
      • Select "themes" from the main menu on the left.
      • Choose "edit html/css" from the "..." menu at the top right of the screen.
      • There should be a list of theme files on the left, choose "theme.liquid" from the "Layouts" folder
      • Paste the following code into the <head> section. If jquery is already included on your page you can ignore the first line.
        <head>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://apps.lionsorbet.com/js"></script>
	<link rel="stylesheet" href="https://apps.lionsorbet.com/css">
	...
        • Then save your changes to the "theme.liquid" and navigate to "pages" on the left hand side.
        • Open the page you want to add the showcase to
        • Click the '<>' button at the top right of the editor (the one that says "Show HTML" when you hover over it).
        • Paste the line of code below into the editor where you want the showcase to appear
          <div showcase id="diamond-showcase" style="width:100%; height:550px; border:1px #F2F2F2 solid;"></div>
          • Save your page and you should see the showcase in your page preview.
          • You can change the size of the showcase by adjusting the width and height in the above line of code, percentage and pixel values can be entered for the width and height.
          • You can either completely remove the border that has been set for you, or you can change any of its attributes for your own custom design

          Embedding the Showcase Into a Wordpress Site

          • Login to your Wordpress admin panel.
          • On the left hand side, click on “Appearance” and in the drop down menu select “editor”.
          • On the right hand side you’ll need to find “Header (header.php)”. Click on this.
          • In the code editor on the left, paste the following code in the <head> section (before the </head>)
            <head>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://apps.lionsorbet.com/js"></script>
	<link rel="stylesheet" href="https://apps.lionsorbet.com/css">
	...
            • Save your changes.
            • Visit the page where you wish to embed the showcase. Use the text mode by pressing the “text” tab on the right hand top side of the content box.
            • Then place this code where you want the showcase to appear...
              <div showcase id="diamond-showcase" style="width:100%; height:550px; border:1px #F2F2F2 solid;"></div>
              • You can change the size of the showcase by adjusting the width and height in the above line of code, percentage and pixel values can be entered for the width and height.
              • You can either completely remove the border that has been set for you, or you can change any of its attributes for your own custom design

              Embedding the Showcase Into a Squarespace Site

              • Log into your squarespace account
              • Select the pages option from the config menu, access this by pressing 'escape' on your keyboard
              • Select the page you want the showcase to appear on
              • Hover over the page until you find you the page content sub menu.
              • Select settings
              • Select advanced in the top right of the overlaying menu
              • Copy and paste the following header code into text area
                <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://apps.lionsorbet.com/js"></script>
<link rel="stylesheet" href="https://apps.lionsorbet.com/css">
                • Click the save button
                • Hover over the page until you find you the page content sub menu.
                • Select edit
                • Click the line to add an object.
                • Select code from the advanced sub menu
                • Make sure the editor is on html, this can be achived from the select box on the right
                • Copy and paste the following embed code into text editor
                <div showcase id="diamond-showcase" style="width:100%; height:550px; border:1px #F2F2F2 solid;"></div>
                • Click save
                • Press esc and select save to save these changes
                • You can change the size of the showcase by adjusting the width and height in the above line of code, percentage and pixel values can be entered for the width and height.
                • You can either completely remove the border that has been set for you, or you can change any of its attributes for your own custom design

                Having Trouble?

                Contact us below and let us know your issue or call us on +44 (0) 1604 422356