“Advanced Etsy Widget” Documentation v2.2.0
Advanced Etsy Widget
Last updated: 2021-08-01
Email: [email protected]
Thank you for purchasing my widget. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
- Installation of Widget
- Using the Widget and Control Panel
- Filling in "Etsy API Key" and "Shop Name"
- Other Widget Options
- CSS Files and Structure
- Sources and Credits
- Changelog
- Upgrading from an old version
A) Installation of Widget - top
This widget is a WordPress PLUGIN. To begin, login to your WordPress admin area, and click "Plugins" on the left-hand sidebar.
- Go to your WordPress Admin Area (usually something like your-website.com/wp-admin)
- In the left-hand sidebar, click "Plugins".
- Click the "Add New" button.
- Click the "Upload Plugin" button.
- Click the "Browse" button.
- At the same level of this readme file is a zip file named "advanced-etsy-widget.zip" - select this file and upload it.
- Click "Install Now" button.
- Click "Activate Plugin" button.
- The widget will now be available as a widget in your WordPress widgets (Appearance > Widgets > Advanced Etsy Widget)
B) Using the Widget and Control Panel - top
- Go to your WordPress Admin area, and click "Appearance > Widgets" on the left-hand sidebar.
- You should see "Advanced Etsy Widget" near the top of the available widgets:
- Drag the widget to one of the widget areas on the right-hand side of the screen. The options panel will now show:
- The MOST IMPORTANT options, that are required, are the "Etsy API Key" and the "Shop Name" in the Advanced Section. See part C of this documentation for details on how to fill these in. The rest of the options are detailed in part D of this documentation.
C) Filling in "Etsy API Key" and "Shop Name" - top
Etsy API Key:
- Visit https://www.etsy.com/developers
- In not logged in, Click "Register as a Developer" and Sign in with your Etsy login. If you’re already logged in, skip to step 3.
- Click "Create New App":
- On the "Create a New App" page, fill in the:
- Application Name (What you typedoes not matter – just make something up)
- Describe your Application (What you type does not matter – just make something up)
- Application Website (your blog address/URL)
- What type of application are you building? (Buyer Tools)
- Who will be the users of this application (Just myself or colleagues)
- Is your application commercial? (no)
- Will your app do any of the following? (Do not select any of these items)
- Click "Read Terms and Create App" button.
- Read the terms, if you agree, click "Create App" button.
- Copy the "Key String" from the Etsy website into your Widget settings:
Shop Name:
- Visit https://www.etsy.com
- Login with your Etsy username and password.
- In the top header bar, click the "Shop" icon.
- In the address bar of your browser, find the part after "/shop/"
- This is your shop name - put this into your widget settings.
D) Other Widget Options - top
- A - Title - The title of the widget.
- B - Show: Featured Listings, All, or a particular shop section - Show the items that you have marked as "Featured" in your Etsy store, show listings from all of your listings, or only show listings from a particular shop section.
- C - Number of Items to show - The number of items to show in your widget.
- D - Title Line - "One Line" will only show one line of text and then ellipses (...) - just like how Etsy search works. Full title will show the entire title that is on the Etsy listing. "None" will show pictures only.
- E - Show price on items - check this to show the item price below the title.
- F - Currency Symbol - Either before or after the price number, you can show a symbol.
- G - Show Link to Shop - Check this box to show a link to your shop at the bottom of the widget.
- H - Shop Link Text - If the "Show Link to Shop" (above) is checked, this is the text that will be the link to your shop.
- I - Etsy API Key - The API Key you copy/paste from etsy.com/developers that allows this widget to access your Etsy listings.
- J - Shop Name - The name of the Etsy shop from where to display products.
- K - Cache Time - The cache time is now long the widget will wait between getting the new shop listings for your store. This reduces the number of calls to the Etsy API you make toward your 5000 per day limit, as well as speeds up your Blog! 1 minute is recommended. If you have posted new items to Etsy and you would like to clear the cache manually, just click the SAVE button in at the bottom of this widget control. If you get API errors, increase this.
- L - Image Size - The size of the image from Etsy to display in the page. Smaller will reduce the page size for your users. Use the smallest that still looks good. When using 'Grid' mode (below) this will not control the size of the image.
- M - Show as Grid - If this is checked, this allows the display of products in a grid with multiple items per row.
- N - Number of items per row - If showing as grid, this is the number of items that show on each row.
- O - Spacing between items in grid (px) - The distance, in pixels, between each item in the grid.
- P - Show Border - Shows a border around each shop item in your widget.
- Q - Border Color - If the "Show Border" (above) is checked, this is the color of the border. This can be any HTML color name or hex color code. If using a hex color code, make sure you prepend with a "#" symbol (EX: "#000000").
E) CSS Files and Structure - top
There is minimal CSS applied when this widget is added to the page. You can find the CSS file in `css/widget.css`. The widget comes with several class hooks that you can use to attach your custom CSS to if you need to:
- Entire Widget - "advanced-etsy-widget-class"
- Widget Title - "widget-title"
- Individual Listing Items - "advanced-etsy-widget-listing"
- Div wrapper around image - "imageWrapper"
- Listing Title - "listingTitle"
F) Sources and Credits - top
This theme uses no outside sources or other libraries.
G) Changelog - top
- 2.2.0 - 2021-08-01 - Fix issues to work with more recent WordPress versions (v5.8).
- 2.1.0 - 2021-02-15 - Fix issues to work with more recent WordPress versions. Fixes to allow multiple instances of the widget on the same page.
- 2.0.2 - 2021-02-10 - Minor update - fix a few bugs.
- 2.0.0 - 2021-01-11 - MAJOR UPDATE. New "Grid" feature. Fixed bugs and improved performance with the latest WordPress releases.
- 1.3.1 - 2018-03-04 - Fixed bug related to when a shop "section" is chosen it was incorrectly showing inactive listings.
- 1.3 - 2018-01-15 - added ability to choose the image size ("Advanced" section). Added ability to add border and set border color.
- 1.2 - 2015-10-11 - bug fixes, allows more than 100 items in list, and option to display product price
- 1.1 - 2014-12-10 - added ability to show listings from a single shop section.
- 1.0 - 2014-08-07 - initial widget
H) Upgrading from an old version - top
To upgrade from an old version of the plugin, follow these steps
- Go in your WordPress Admin area to `Appearance > Widgets` and note down the current values that are in the widgets you are using. You may need to re-create these in the last step.
- Go in your WordPress Admin area to `Plugins > Installed Plugins`. Find "Advanced Etsy Widget" in the list, and click "Deactivate" and then "Delete".
- Go to "Add new" at the top of the page.
- Follow the Installation of Widget instructions above.
- Go in your WordPress Admin area to `Appearance > Widgets` and re-add your widgets with the settings that you noted down in step 1.
Once again, thank you so much for purchasing this widget. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Gavin Rehkemper