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
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, under ‘Sales Channels’ go to Online Store > Themes.
2. Find the theme that you want to edit, and then click the 3 dots … next to ‘Customize’.
3. In the drop-down menu, click ‘Edit Code’
4. On the left, under ‘Templates’ > Click ‘+ Add a new template’
5. Under ‘Select a template to create’ use the drop down and select ‘page'
6. Make sure JSON checked
7. Name your page template
8. You will be presented with a new template that looks similar to this, or it will be blank. If there is code like what is shown in the image below, you can highlight it and delete.
9. Highlight the code below, right click and copy, then paste the code in your new template.
It should then look like the image below
10. Click ‘Save’ in the top right
11. Head back to the main Shopify admin panel, under Sales Channels > Online Store > click ‘Pages’ and in the top right click ‘Add page’
12. Name your page
13. Use the drop down menu to select the template you created in steps 1-10.
Page template note appearing in Dropdown?? This is because the page template needs to be present in the live theme for it to be assigned to a page.
14. Click 'Save' in the bottom right
15. Click 'View page' to see your auction gallery page where the auctions will appear once they are set up.
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
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, under ‘Sales Channels’ go to Online Store > Themes.
2. Find the theme that you want to edit, and then click the 3 dots … next to ‘Customize’.
3. In the drop-down menu, click ‘Edit Code’
4. On the left, under ‘Templates’ > Click ‘+ Add a new template’
5. Under ‘Select a template to create’ use the drop down and select ‘page'
6. Make sure JSON checked
7. Name your page template
8. You will be presented with a new template that looks similar to this, or it will be blank. If there is code like what is shown in the image below, you can highlight it and delete.
9. Highlight the code below, right click and copy, then paste the code in your new template.
It should then look like the image below
10. Click ‘Save’ in the top right
11. Head back to the main Shopify admin panel, under Sales Channels > Online Store > click ‘Pages’ and in the top right click ‘Add page’
12. Name your page
13. Use the drop down menu to select the template you created in steps 1-10.
Page template note appearing in Dropdown?? This is because the page template needs to be present in the live theme for it to be assigned to a page.
14. Click 'Save' in the bottom right
15. Click 'View page' to see your auction gallery page where the auctions will appear once they are set up.
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. In the drop-menu, click 'Pages'.
5. Scroll down and Click '+ Create template'.
6. Give your template a unique name and choose what page template to base you Dropit page on, we recommend 'Default page'
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. Back in your Shopify dashboard, 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. Click Save.
6. In the top right, click 'View page'
You should now see the Dropit widget live on your site.
Now its time to set up your first auction
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 - When the auctions are live, this color is the background the auction sits on.
Collection Background color - The background of the Auction Gallery Screen, where all the upcoming auction tiles are displayed
Collection Card Border color - The border line color of the Auction tile that sits on the gallery screen
Main Font color - The majority of the text on the auctions
Was (start) price font color - 'was' price text colour shown when the auction starts, a nice bright red works well
Buy Button Font color - The font color for 'Buy Now' on the button displayed during live auctions
Buy Button Background color - The background color of the 'Buy Now' button displayed during live auctions
'Live' Button Font color - The font color for 'Now Live' on the button displayed on the auction tiles once the auction starts
'Live' Button Background color - The background color of the 'Now Live' button displayed on the auction tiles once the auction starts.
Please Note: this will also control the background color of both the countdown time and the 10 second countdown clock
Learn More Button Font color - The font color for 'Learn More' on the button displayed on the auction tiles before the auction starts
Learn More Background color - The background color of the 'Learn More' button displayed on the auction tiles before the auction starts
Celebration emoji - Select the emoji you would like to display on the auction winner’s page, these rain down the screen when the winner gets to the congratulations page
Scheduling your Dropit auction is easy
1. Via your Shopify admin go to apps > Dropit
2. Select the product that you want to auction. Here there are 3 methods of setting up your Dropit Auctions
- Create Single Auction
Ideal for spotlighting individual items with varying reserve prices.
- Create Bulk Auctions
Effortlessly apply the same reserve settings to multiple products.
- Create bulk Auctions from CSV import
Perfect for launching a large number of auctions with diverse reserve values.
3. Choose whether to 'Gate' your Dropit Auctions to logged in customers of yours only. Use the simple tick box to do this. (We recommend only using this feature if you require it, having this enabled means for someone to participate they must create an account or log in to an existing one with your store)
4. Select the reserve price (this is the minimum price the product can sell for via the auction)
**The start price is automatically set via the existing price of the product
5. Select the start date and time (of the first auction if you are setting up bulk)
6. Select how many minutes in between each Dropit auction. (for bulk auction set up only)
6. Click 'Create Auction'
How to delete an auction
1. Via your Shopify admin go to apps > Dropit
2. Go to scheduled auctions
3. Select the garbage bin icon on the auction you want to delete
**The start price is automatically set via the existing price of the product
4. Confirm
1. Identify the products in your Shopify store that you want to set up as Dropit Auctions. Select them, and in the top right corner, click export to CSV
2. Open the downloaded file, you will get a large amount of columns and information but for the import we only need 1-2 columns of product information:
- Handle (to identify product)
- Variant SKU (optional, only if the product you are auctioning is a variant of a parent product, we need this to identify which variant)
TIP: You can use your ‘Price’ and ‘Cost’ columns to assist in determining your ‘Reserve’
3. Go into the Dropit Shopify app and click on ‘Bulk Auctions from CSV’
4. Go into the Dropit Shopify app and click on ‘Bulk Auctions from CSV’. As per the image below, we recommend clicking to download our CSV template to make for and easy auction import process
5. Open the example.csv file and it should look like the following. The template comes with some ‘fake’ data as an example of how your data should look, please delete this when adding your data leaving only the header row (Row 1)
6. Copy over your 'Handle' and 'Variant SKU' (if required) columns from your product export and enter in your reserves. Save your file once you have entered the necessary data.
When entering the reserve you have 2 formats to choose from:
Format 1: number in the store's base currency
Format 2: percentage of the retail price e.g. if the start price (retail price) is $200 and you enter 20%, the reserve will be 20% of $200 which is $40
NOTE: If you are entering reserves as a number, please ensure the number in the cell is not set to ‘Currency’ and using a currency $ symbol. It needs to be formatted as a ‘General’ cell and a number entered as per the image above and below.
TIP: If you want to run 1 or many NO Reserve Dropit Auctions, just enter 0 in the reserve column
7. Go back into the Dropit app and select the date and time of the first auction.
NOTE: The minute and hour numbers are scrollable
8. Pick how many minutes you want in between each auction.
For example if your first auction is set for 6:30pm and you choose 3, the second auction will be 6:33pm, the third auction will be 6:36pm and so on
9. Find your saved CSV file and drag and drop it in, you can also click to open your folders and select it.
10. The app will identify the number of successfully
11. After you have clicked 'Create auctions' you can scroll down, and under 'Scheduled auctions' you should see the list of auctions you just imported.
TIP: If you would like to remove any, sinply click the rubbish can.
12. Visit the page you integrated the app on and you should see all of your auctions loaded there ready to go.
