July update: One-page checkout and discount rules

July update: One-page checkout and discount rules

Last night, a large update took place. The promised one-page checkout as well as discount rules were added to your online store. In this blog post, you can read how to use these new tools.

Warning: In connection with a CSS Update, your checkout can still be displayed wrongly. This morning, we updated our servers and suggest that you renew your cache (Ctrl - Shift - R or cmd - Shift - R). In case you are using a partner theme, it cans till have the old CSS look. Please contact the partner who made the theme. They have been informed about this update in advance.

The new Checkouts and the discount rules have been developed by us. Our customer support is available for your questions (preferably through out ticket system).

One-page checkout

Many of you requested this feature and we are happy to present it today. The one-page checkout enables you to offer all checkout elements – such as payment and shipping methods – on one single page. Your customers will need less mouse clicks to finish the order process. This blog post lists all the benefits of a one-page checkout.

You will find the one-page checkout through GENERAL > Settings > Checkout & Payment Methods > Checkout in the left menu of your back office.

one-page-checkout

In the next step, you can activate the one-page checkout by setting its switch to ‘ON’.

instellen-one-page-checkout

Visitors and customers of your online store can now pay on one single page, as shown below.

one-page-checkout-seoshop

But there is more!

In addition to the one-page checkout, we have also developed a one-step checkout. In the one-page checkout, as discussed just now, all elements – such as payment and shipping methods – are listed underneath each other. In the one-step checkout, they are listed next to each other. The one-step checkout can also be activated using the Settings menu.

instellen-one-step-checkout

To keep things well-organized for your customers, not all fields will be activated simultaneously. This implies that customers first will have to enter invoice data, before choosing a shipping method. When the invoice data fields have been completed, the shipping method fields are activated automatically.

one-step-checkout-seoshop

To test the different checkouts (without activating them), you can use the following URLs. Paste your shop name in place of the"xxxxxxxxx". Before you test this, please put an item in your checkout. This way, you can instantly see if you have to make adjustments in your CSS code without risking customers seeing this.

https://xxxxxxxxx.webshopapp.com/checkout/onestep/

https://xxxxxxxxx.webshopapp.com/checkout/onepage/

Checkout dashboard

Now that you know how to activate the various checkouts, we would like to show you how to measure results.

Statistics

At the top of the page you will see a bar containing leads, conversions, bounce and abandonment. But first, allow us to briefly explain these concepts.

  • Leads - The total number of visitors/customers that entered the order process, including those who have not completed it.
  • Conversion - The percentage of visitors that completed the order process.
  • Bounce - The number of visitors/customers that have left the order process in the first step.
  • Abandonment - All visitors/customers that leave the order process before completion. The difference with ‘Bounce’ is, that this may also occur at a later stage.

checkout-dashboard1

Settings

At the right side, you can configure checkout settings, by clicking the hyperlink underneath the checkout in question.

checkout-dashboard2

A/B Testing Checkout

When you are using our M package, you can assess checkout results as follows: Select a checkout. Use it for several weeks and measure its results. Have you received sufficient orders to draw a conclusion? If so, activate the next checkout and repeat the process. Based on statistics, you will now be able to assess which checkout is suitable for your online store.

If you have an L or XL package, you can conduct A/B testing on the available checkouts. This means you can simultaneously activate two checkouts, which the system will display at random to your customers. This will enable you to even better assess which checkout is suitable for your online store!

Would you like to know the benefits of A/B testing your checkout? Then read the ‘A one-page checkout or rather a multi-step checkout?’ blog.

Discount rules

Starting today, you will have many more opportunities to give discounts to your customers. For example, you can offer a ‘2 for the price of 1’ bargain, or give discounts to loyal customers. We will explain here how to do this.

In your back office, you will now find the Discount rules option, below the SALES caption. When you click the green plus icon, a drop-down menu will appear.

kortingsbundels-dropdown

In this menu, you can choose from several discount rules. To keep things well-organized, you can also add a title, enabling you to easily retrieve a discount rule.

You will now see the screen listed below.

kortingsbundels-dashboard

The following settings are important here:

  • Status - Tick this checkbox to activate the given discount rule within your online store. If you do not do this, the discount rule will not be available.
  • Stop after this rule - In some cases, you might not want discount rules to be applied simultaneously. By ticking this option, the next discount rule will not be applied upon activating the discount rule in question.
  • Start date / deadline - The period in which the discount rule is valid.
  • User limit - The number of times the discount rule in question may be used. Note: When you leave the default ‘0’ value, no limit applies!
  • Used - Here you will see how often the discount rule in question has been used.
  • Discount - Here you can configure elements that specifically apply to the discount rule in question.

Please note that discount rules and coupon codes do not work simultaneously. As soon as a discount rule is activated and applied with orders, customers will no longer be able to enter coupon codes, as you would be giving too much discount then.

Also, always make sure that the most important discount rules are listed at the top, thus ensuring proper application of the ‘Stop after this rule’ tool.

kortingsbundel3

Custom designs

Are you using a custom design? Then you will need to modify the code below by yourself in order to activate the discount rules. We have already done this for these themes: Standard, Passion, Magastorez, Mall, Electronics, Boutique, Playful, Conform, Absolut.

Look for this code:

{% if product.discounts %}
  <div>
    {% for discount in product.discounts %}
      <li>
        {{ 'Buy $1 for $2 each and save $3' | t (discount.quantity, discount.price | money, discount.percentage | percentage) }}
        {% if discount.unit and shop.settings.legal.mode == 'strict' %}
          ({{ discount.unit.price | money }} / {{ discount.unit.unit }})
        {% endif %}
      </li>
    {% endfor %}
  </div>
{% endif %}

And add what's displayed here in bold.

{% if product.discounts or product.discount_rules %}
  <div>
    {% if product.discounts %}
      {% for discount in product.discounts %}
        <li>
          {{ 'Buy $1 for $2 each and save $3' | t (discount.quantity, discount.price | money, discount.percentage | percentage) }}
          {% if discount.unit and shop.settings.legal.mode == 'strict' %}
            ({{ discount.unit.price | money }} / {{ discount.unit.unit }})
          {% endif %}
        </li>
      {% endfor %}
    {% endif %}
 
    {% if product.discount_rules %}
      {% for discount_rule in product.discount_rules %}
        <li>{{ discount_rule }}</li>
      {% endfor %}
    {% endif %}
  </div>
{% endif %}

Now, you are able to offer your customer discounts like"2 for the price of 1" or"Free shipping for purchases over 50€"

Please know that all discount rules are still under construction. Our developers are also busy developing a"Bundel" feature.

Conclusion

Do you still have questions after reading this blog post? Then please read our manual!