How to install Dropit Auctions on your Shopify store

Shopify 2.0
installation instructions

Setup instructions for 2.0 Shopify themes ‍
Dropit can be displayed within any section of your website using the Dropit app block.
This allows you to determine the placement of the Dropit live auction interface in the desired section of your website.

We recommend running Dropit auctions via their own page and page template to display Dropit auctions via a /pages URL using the following method.

Create a theme template
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Using the dropdown menu, select which existing template you want to base your new template on.
5. Click Create template. Use the dropdown menu to select a template. Click + Create template.
6. Give your template a unique name.
7. Create template.

Enable the Dropit app block
1. From the template you have created, select add section
2. Go to apps and select the Dropit Live Auction App:

3. The app block display can be toggled on/off via the eye icon:

4. If you wish to remove the app block from the page template select remove app block in the bottom right of the screen.
‍

Create a page to display Dropit live auctions
1. Go to Online Store > Pages.
2. Click Add page.
3. Enter a title and content for the page.
4. In the bottom right corner, under 'Theme Template' select the theme template you created above

5. Under Visibility, select when the page should be published. By default, your new webpage will be visible when you click Save. Select the Hidden option if you want your new webpage to be hidden from your online store, or click set a specific publish date to control when your webpage is published.
6. Click Save.
Optional: To make a published web page appear in your online store navigation, add a link to it in a menu.
‍

How to adjust your live auction style settings to match the styling of your storefront
1. Go to the Dropit admin app > Style settings
2. Enter your hex color against each element or use the color picker to select your desired color

Interface key
Background color - Background of the Dropit app block section
Buy button color - Buy button displayed during live auctions
Live button color - Live now is displayed on any currently live auctions on the pending auctions page
Learn more button color - Learn more button on each scheduled auction
Celebration emoji - Select the emoji you would like to display on the auction winner’s page

Shopify vintage
installation instructions

Firstly, create a theme template
Your Dropit auctions will be displayed via a page URL on your website via a unique page template:
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the Actions dropdown, then click 'Edit Code'
3. Go to Templates > click + Add a new Template.
4. Dropdown 'Select a template to create' and select 'Page'
5. Underneath, select 'Liquid'
6. Give your template a unique file name.
7. Click 'Done'

‍
Next, paste in this piece of code and save the template

<articleclass="dropit-container" data-template-page>
  {% if page.content != blank %}
    <div class="page-contentrte">
      {{ page.content }}    </div>  {% endif %}
</article>is some text inside of a div block.

Now, create a new webpage for your store
1. Go to Online Store > Pages
2. Click Add page
3. Enter a title for your page
4. In the bottom right corner, under 'Theme Template' select the theme template you created above
5. In the content section, select the show HTML button as below

6. Paste in the following code snippet, and in line 3 of the code snippet, change your-store-name to your own store name as it is displayed before your .myshopify.com URL
for example your-store-name.myshopify.com

<script>//<![CDATA[
(function(){
    const vendorId = "your-store-name";
    const vendorType = `Shopify`;
    const dropitApp Url =`https://dropit-
8dc33.web.app/?vendorType=${vendorType}&vendorId=${vendorId}`;
     const onLoadEventHandler = () => {
        //
        // Remove embedded page content
        //
        const containerEle =document.getElementsByClassName('dropit-container')[0];
        containerEle.innerHTML = '';
        console.log(">>> Alreadyremoved the original page content");
‍
         //
        // Insert meta header
        //
        const headerEle =document.getElementsByTagName('head')[0];
        const viewportMeta =document.createElement("meta");
        viewportMeta.name ="viewport";
        viewportMeta.content ="width=device-width, initial-scale=1, maximum-scale=1";
        headerEle.appendChild(viewportMeta);
        console.log(">>> Alreadyadded viewport meta node");
‍
         //
        // Insert style header
        //
        const styleEle =document.createElement("style");
        styleEle.type = 'text/css';
        styleEle.innerHTML = `
            .dropit-container{
               display:block;
                min-height:800px;
            }
             @media only screen and(min-width:769px){
                .dropit-container{
                    min-height:1000px
                }
            }

             #dropit-iframe{
                display:block;
                min-height:800px;
            }

             @media only screen and(min-width:769px){
                #dropit-iframe{
                    min-height:1000px
                }
            }
        `;
        headerEle.appendChild(styleEle);
        console.log(">>> Alreadyadded style node");
‍
         //
        // Insert iframe
        //
        const dropitIframe =document.createElement("iframe");
        dropitIframe.id = "dropit-iframe";
        dropitIframe.src = dropitAppUrl;
        dropitIframe.width = "100%";
        dropitIframe.height = "100%";
        dropitIframe.frameBorder="0";
        dropitIframe.scrolling = "0";
        dropitIframe.style.border="none";
        // dropitIframe.style.background ="white";
        dropitIframe.referrerPolicy ="unsafe-url";
‍
         containerEle.appendChild(dropitIframe);'
        console.log(">>> Alreadyinserted iframe node");
    }
     
document.body.onload = onLoadEventHandler
}())
//]]></script>
‍

7. Save the page.
8. You may configure the colours of the Dropit interface to match your store via the admin application > style settings

How to adjust your live auction style settings to match the styling of your storefront
1. Go to the Dropit admin app > Style settings
2. Enter your hex color against each element or use the color picker to select your desired color

Shopify 2.0
installation instructions.

Create a theme template
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Open Open the drop-down menu at the top of the page.
4. Using the dropdown menu, select which existing template you want to base your new template on.
5. Click Create template. Use the dropdown menu to select a template. Click + Create template.
6. Give your template a unique name.
7. Create template.

Enable the Dropit app block
1. From the template you have created and select add section where you would like to display the app-block.
2. Go to apps and select the Dropit Live Auction App:

3. The app block display can be toggled on/off via the eye icon:

5. Under Visibility, select when the page should be published. By default, your new webpage will be visible when you click Save.
6. Select the Hidden option if you want your new webpage to be hidden from your online store,
or click set a specific publish date to control when your webpage is published.
7. Click Save.
Optional: To make a published web page appear in your online store navigation, add a link to it in a menu.
‍

How to adjust your live auction style settings to match the styling of your storefront
1. Go to the Dropit admin app > Style settings
2. Enter your hex color against each element or use the color picker to select your desired color

Got a question?

GET IN TOUCH

Shopify 2.0 installation instructions

Shopify vintageinstallation instructions

Got a question?

Shopify 2.0 installation instructions.

Got a question?

Shopify 2.0
installation instructions

Shopify vintage
installation instructions

Shopify 2.0
installation instructions.