Placement method for Vintage themes

This section can be found on the Widget placement page when a Vintage theme (a theme without support for Online Store 2.0) has been selected.

If you have any issues with the instructions below, don't hesitate to contact us using the chat widget on the admin page or by sending us an email at support@buunto.com.

Automatic widget placement

The automatic placement has been tested on the most common Shopify themes: Debut, Narrative, Minimal, Simple, Brooklyn, Supply, Boundless, Venture and Express.

If you use another theme, the app will try to insert the date picker, but unfortunately, the result isn't guaranteed. Often, the widget won't show up at all. If that's the case, then it is required to use the Place manually option.

If you want to change the placement of the date picker, then please use the Place manually option as well.

Manual widget placement

This is a little bit more technical but this should let you place the date picker exactly where you need it.

You need to provide the location of a reference element in the page via a CSS selector, where you want to place the date picker relative to that element (Before/After the element or within the element at the beginning or the end).

Ensure you're providing a selector that always finds a single element.

Here is an example of how to do this, but there are a multitude of cases. It might be a bit difficult to do if you don't have a technical background.

1. Navigate to the page you want to display the date picker. We want to add the date picker above the Subtotal line in our example.
2. With Google Chrome, we right-click on the Subtotal element and then click Inspect
3. In the DOM inspector on the right, you should be able to find out if there are any classes or IDs on that element. In our case, we can see that we should be able to use the cart-subtotal class as a unique way to identify that element. So our CSS selector is: .cart-subtotal.

   

   Important: make sure that the element that you pick is within the <form> element. Otherwise, the date picker won't show up.

4. We can now set our CSS selector and then select the appropriate option for the Widget position

   

5. Here is the final result: