I’m building my first site with RapidWeaver, Foundation and Stacks. I’m currently integrating an Ecwid store. I want to have 3 products on the home page which people can immediately add to their basket should they wish to do so. The 3 products are inside HTML containers with the code pasted from each product ‘Buy Now’ screen inside the Ecwid browser control panel.
The problem I have is that the Ecwid basket button appears behind the page content and thus the user is unable to click on the basket. If I remove most of the content from the screen so that nothing overlaps the basket icon then I can click on the basket.
Is there any way to ensure that the Ecwid basket is always on the top layer? How do I control the ‘draw order’ of the components of the page?
Any help would be appreciated - apologies if this is well basic too. Loving the Weaver tho - Cheers!
The site isn’t live yet, I’m getting it knocked into shape now and I’ll have a go at making it live on the weekend.
As for CSS, thats not something I’ve dived into yet. Looks like I’ll have to bite the bullet and get involved. I have seen references to z-index a few times and there is a fair amount on the forums for other specific plugins with layering issues etc.
Push comes to shove I’ll make a different design choice until I get a handle on the CSS.
once you have the page on a web server someone will be able to see the code and help you with the Z-index.
the other option is within Ecwid its self, they have a code snippet for a “mini cart” that you could place elsewhere on the page (below the products for example) search for mini-cart in their knowledge base
I found a page on the knowledge base about adding a shopping bag to any custom site. I plugged in my store ID, generated the code and now I can drop that into an HTML container. I now have a shopping bag at the bottom of the page. Not super pretty but at least it works and now I can monkey about with placement etc. I need to look at all the other code snippets available whilst I get into CSS.
Thanks a lot Scott, you are indeed a pro!
For others struggling with similar issues … go here: -
This is definitely something we’d like to look into and fix. The shopping bag in floating mode is supposed to flot above everything else. As soon as you can provide a link to your website, please let me know — I will have a look.
Hey Matt - In addition to my post here last night …
Also, I’m using Joe Workman’s Quickpics Instagram and Tip Tip plugins. It connects fine to Insta but interestingly the tool tips on the Insta pictures on the home page also appear behind the content. The strange thing is that I made the site live last night and it was working in the browser. Very odd. I did upload to the server a few times with changes - could it be that something went wrong on one of the FTP’s from Rapidweaver to affect the draw order?
Sorry, it seems like I am late — you must have fixed it already. Did yo apply a custom CSS code to fix it? I see it displayed correctly now on your site. Screenshot: https://d.pr/free/i/98OGmy
Also, the tips over the instagram posts are displayed right.
Good to hear from you. I’m glad it’s working for you although on my MacBook pro it’s still incorrect in both Safari and Chrome. I phoned my brother and he says it’s behind the other screen elements on his iPad and he can’t touch the basket to see the contents. Looks like something very odd is going on. I’m going to call a couple of friends tomorrow morning to see if there is a pattern. I’m pretty sure it was working when I first published the site but after a couple of revisions this issue occurred. Right now I have no idea what is causing it but if a completely unrelated person with an iPad has the problem then something isn’t as it should be. Super frustrating!
Oh, and whilst I’m here, any danger ECWID can integrate with the shopping on Instagram? I don’t have Facebook and don’t wish to be forced into using it just to get shopping working inside Insta. It would make Ecwid a super powerful alternative to an FB shop. 8)
I’ll ping tomorrow once I’ve had a few people try the site. If I get really stuck I’ll paste the basket HTML snippet into a container at the bottom of the page to get it onto the same ‘layer’ as the other screen elements and switch off the tool tips for the insta pics.
Thanks you for time though Matt - apart from these issues I’m loving the RW and Ecwid combo!
Ha, that’s odd. I am now reproducing the problem myself, too. Might be some kind of cache, I don’t know.
Anyway, now as I saw the problem, I was able to find the reason. The thing is that when your site loads in browser, some javascript code adds ‘z-index’ property to major part of “stacks” elements on the page. For example, if you check the page HTML source, you can find this block on the page: <div id='stacks_out_34_page7' class='stacks_out'>
No problem with it. But when it loads in browser and dynamic Javascript part of the site is executed, extra style is added to it, so it becomes: <div id="stacks_out_34_page7" class="stacks_out" style="overflow: visible; z-index: 9999;">
Mind the “z-index” part. That is the problem. It basically says “I am the top element on the page no matter what, unless there is an element with z-index 10000 or more”. That affects other elements on the page — the Ecwid minicart and Instagram posts tips in particular — which are sent to a deeper “layer” of the page and thus become unclickable.
There are two solutions here:
[Recommended] Find out what plugin or theme code forces this z-index property on the blocks and fix it so it won’t affect any other elements on the page.
Add a workaround CSS code that will increase z-index for the Ecwid minicart. Here is the code, you can add it to any CSS file on your site or to a custom CSS theme in your Ecwid account: html#ecwid_html body#ecwid_body div.ec-minicart.ec-minicart--fixed { z-index: 11000; }
The drawback of the second approach is that you will have to add a similar code for each new component of the page so it won’t be affected. So, the first way is better.
Ecwid allows to sell on Instagram using the Instagram product tags. This means your Instagram subscribers will see product tags right on the posts you publish, click them and go to your site to buy them.
As to Facebook accounts, I am sorry, but you will have to create one to use the the Instagram shopping feature. The thing is Instagram is actually using Facebook shop products in background. So, you will need to upload your products to your Facebook account to list them on Instagram. The good news is that, as I said, the two use the same products set which means once you are done with the process, you will have two more places with your products: Facebook and Instagram. They both will be automatically synchronized with your online store and you will manage them in your Ecwid dashboard.
One other note is that Instagram is currently a bit picky when it comes to approving sellers — when you upload your products and have your Instagram account ready, they will be reviewing your account. Whether you can sell on Instagram or not will depend on their decision. This is something sellers often struggle with right now. But it’s getting better as Instagram continue rolling out this new program to more countries and more sellers.
Thank you so much for your help. I spent some time over the weekend getting to grips with the issue and it’s fixed! The magic number you gave me of 9999 was the key. Before running a reductive process of sequentially deleting parts of the site and uploading to find the offender, I looked through all of the plugin options for all of the elements of the site and I found a z-index of 9999 set in the YuZoolThemes Navigation plugin. After a few attempts the floating elements worked with a z-index of 1000 for the nav bar. Happy days.
Thank you too for your advice on Insta and facebook - looks like I’m going to have to bite the bullet on Facebook. The more sales & promo channels the better. I’m on it!
In general the Ecwid integration is excellent, I’m very happy with it so far. The best part is the code generator for ‘Buy it now’ content. For people like me that don’t know how to code it’s a game changer. It could do with a few more options like a ‘grid’ function to show say 3 products with things like ‘Random product’ and ‘Latest products’.
Thanks for your help Matt - I will continue to promote the benefits of using Ecwid to one and all!
