Question 1

styling the inventory list

Accepted Answer

Since every store has their own look and feel, and everyone has their own wishes for the styling, we've decided to leave any styling up to you. here are a few things you can do.

Remove dots from location list If you want to remove the dots from the location list, add this snippet to your theme.scss.liquid file (somewhere at the bottom): ```ul#tomitinventorylist { list-style-type: none; padding: 0; margin: 0; }

tomitinventorylist li {

margin: 0; padding: 0; }```

Color inventory Threshold If you use the 3 inventory threshold values (out of stock, low stock, high stock) you can use this css snippet to give the text some color: .tomItInventoryLocationHighStock{ color:#00b268; } .tomItInventoryLocationLowStock{ color:#f29500; } .tomItInventoryLocationNoStock{ color:#bc1f00; }

Question 2

Developer Javascript Events

Accepted Answer

If you are a developer, and want to use our app for custom functionality, you can access these events:

tomitVariantChanged Listen to this event to reparse data if you need to

tomitLoaded for instance If you would like to get inventory information for multiple products, you can use our object once it's loaded: document.addEventListener('tomitLoaded', function(e) { var productIds = ['123422,464117']; tomitProductInventoryInfo.getProductsInventoryInformation(productIds).then(function(e){ console.log(e); }); });

tomitProductLoaded

For instance, on a product page if you would like to get the product object with inventory information, you can listen for the tomitProductLoaded event:

Question 3

How do i use the app?

Accepted Answer

As soon as the Blog Product Spotlight app is installed, all your blog articles are being scanned on product links and all your current link can show up as pop-ups in your blog. when you've created a new article or edited an old article you will have to re-scan your blogs. to re-scan your articles you'll need to go to the settings page of the Product spotlight app.

when you are at the settings page click on the **re-scan articles **button and you are ready to go.

Question 4

How does it work

Accepted Answer

By using the Blog Product Spotlight app. you give your blogs a whole different experience. Placing links that go to the product pages has been possible for some time but with this app, visitors of your blog can view the product on the blog page itself and add it to their shopping cart without having to leave the blog page.

When customers hover their mouse over the link, they get to see the product themselves.

When customers click on the product they will see the description of the product. if there are variants, they can choose from them and they can add the product to their shopping cart.

You can then see in the app's dashboard how many people have viewed the product and added it to their shopping cart.

Question 5

Where can I find the PostNL API Key?

Accepted Answer

You can request a PostNL Test (Sandbox) API Key via https://developer.postnl.nl the required API's are:

Shipping
Labelling
Shipping
Location

With this key you will need to create a few test labels, to make sure everything works.

When you are done testing, you can get a Production API via the PostNL CIT Service Desk.

The telephone number of the CIT Service Desk is: +31 (0)88 225 56 51

Question 6

styling

Accepted Answer

Styling the Product Spotlight app

The product spotlight app allows you to add your own styling. in the settings of the app you can chose to enable/disable the standard styling. the standard styling is by default enabled. in the settings you can also add the css you want to. You need to be careful though cause the css you add in there can affect your blog page. because of that it's important that you specify the css with id's and classes. If you want to see which id's/classes are used where, use the inspector in your browser.

Here you can see an example of how we added some custom css and how it affected the pop-up modal.

objects

the css we created is made for two objects. One is the pop-up modal on your blog. The second object is the box that displays the products that were used in the blog. There is a chance that the object that displays the mentioned products doesn't need styling cause it's an optional feature. Incase you do use that feature we highly recommend you styling it (unless you are using the default styling. then it's already taken care of ).

Down here you can see the default css which you can disable or overwrite. ```.TomITproductGridItem{ width:25%; float:left; list-style-type:none; margin:0; padding:0; } .TomITproductGridItem

Frequently Read Articles

Browse All Categories