[Sander T.]

I've included the Buy Now button on my website, but it's loading after the page has loaded. Obviously, this is the most important button on the page. Is there a way to increase the speed to load this button?

Link to my page is: https://study-stars.com/course/marketing-fundamentals/
The Buy Now button is loaded under the Apply Now button. It's still a test environment.

Another question: Is it also possible to use a button I created on my Wordpress site and add the script, so it's loaded at the same time as the rest of the page and is in the same design?

[Emma C.]

Originally Posted by Sander Tan

I've included the Buy Now button on my website, but it's loading after the page has loaded. Obviously, this is the most important button on the page. Is there a way to increase the speed to load this button?

Link to my page is: https://study-stars.com/course/marketing-fundamentals/
The Buy Now button is loaded under the Apply Now button. It's still a test environment.

Another question: Is it also possible to use a button I created on my Wordpress site and add the script, so it's loaded at the same time as the rest of the page and is in the same design?

Hi there!

My name is Emma and I am from Ecwid Customer Care team. Thank you for reaching out!

I have checked your website page via https://study-stars.com/course/marketing-fundamentals/ and I see that you have added the Ecwid Buy now button there.

Let me start off with its loading speed. The thing is that the website content surrounding the button is the static one.

For example, if we compare the two buttons on this page – Apply now and Buy now – we will see that the when we click the Apply now button, we are simply taken to another website page. In other words, the button is a decoration that has only the link assigned to it.

While the Ecwid Buy now button is a script which triggers the whole e-commerce widget to make it work. That is why it can take a little more time to appear on a page compared to a static button.

At the same time, I would like to thank you for drawing our attention to it – I have passed your feedback to our technical team so that we could improve the loading speed of the Buy now button.
When I have any news on that, I will update you to the email associated with your Ecwid account.

As for the using the Ecwid script for your own custom button, the loading speed of this button won't change because it will still be a script which takes its time to load.

I assume that the main purpose of using the custom button is to change the look of the initial Ecwid Buy now button. If so, then it can be customized with the help of the CSS codes.

For example, I have come up with the one that will make your button as aligned and wide as the Apply now one, screenshot: https://take.ms/vilFg

Here is the CSS code for it:

.ecwid.ecwid-SingleProduct-v2 .ecwid-btn--addToBag {width: 920px; margin-left: -165px;}

You should paste it to your existing CSS theme below the other codes(Ecwid dashboard > Design > click Edit theme).

Hope this helps. if you have any further questions or need assistance, feel free to contact us via this form: https://support.ecwid.com/hc/en-us/requests/new

We will be happy to help!

[Sander T.]

Thank you so much! I will use the css code to style my buttons.
I look forward to hear when there are updates that will make the button load faster.

[Sander T.]

Originally Posted by Emma C.

As for the using the Ecwid script for your own custom button, the loading speed of this button won't change because it will still be a script which takes its time to load.

I assume that the main purpose of using the custom button is to change the look of the initial Ecwid Buy now button. If so, then it can be customized with the help of the CSS codes.

For example, I have come up with the one that will make your button as aligned and wide as the Apply now one, screenshot: https://take.ms/vilFg

Here is the CSS code for it:

.ecwid.ecwid-SingleProduct-v2 .ecwid-btn--addToBag {width: 920px; margin-left: -165px;}

You should paste it to your existing CSS theme below the other codes(Ecwid dashboard > Design > click Edit theme).

I've used the code and it works well on a desktop, but not on mobile. Is it also possible to make it work on smaller screens?

[Edward M.]

Hi

I'm Edward from the Ecwid Team.

Thank you for your reply!

You can adjust the CSS parameters for the mobile view only using this CSS code:

@media screen and (max-width: 768px) {
html#ecwid_html body#ecwid_body .ecwid.ecwid-SingleProduct-v2 .ecwid-btn--addToBag {
    width: 375px;
    margin-left:-30px;
}
}

in this code max-width: 768px defines the screen width when the CSS code applies. So you can use this approach to adjust the buttons to different screen widths.

Note that: all the CSS codes should be added to the same CSS theme in your Ecwid store, one by one.

Hope this helps!

Let us know if you have any questions.