March 30, 2020

Setting up your Ecwid storefront | Adobe Muse eCommerce

This tutorial is going to be an outline of everything that comes with the Ecwid (Premium) widgets. First I’ll show you what comes in the download. So when you purchase the widget, you’re going to get 6 individual downloads. You’re going to get a Search Widget, a Navigation widget, a group of Storefront widgets, a group Shopping Cart widgets, and a group of Add to Cart widgets. You’re also going to get a buttons coupon and this will allow you to download anything inside the buttons category for free. To add the widget to Muse all you have to do is open the widget and it will automatically import into the library. So we’re going to start with the Storefront widgets. So you drag the storefront and drop it onto the page. Okay, so with the way that the widget is currently set up, there are a total of 7 widgets. You have the main storefront widget, then you have Global, Product Grid, Buttons, Top of the Store, Text, and Headers. The reason why the widget is set up like this rather than being all smashed into a single widget is because if there are any updates or there any bugs in any of the widgets, rather than making you update the entire widget, you only have to update the section where the feature was added or the bug was removed. Now you’re probably wondering why the widgets are grouped together in the way that they are. The reason why I’ve grouped them together this way is because the 3 on the left, as well as the Main storefront, so total of 4, so these 4 widgets are the ones that are absolutely necessary. At the very least, every storefront needs to have these 4. I’ll quickly run through what each of these 4 widgets do. The first one, the Main storefront, this one is where you’re going to put your Ecwid store ID and this is going to be the one that you use to customize most of the font sizes and colors. I’ll put a link in the description that goes to a video that covers that more in depth, or again you can click the icon that should have just appeared in the top right corner. Then the next of these 4 widgets is Global and Global covers a wide range of features inside the store. The features inside Global cover a bunch of different specific sections of the store but didn’t have enough features for that specific section to warrant a unique widget. I do not have a tutorial for the Global widget yet however when I do, I will put a link in the description and I’ll make sure that an icon appears in the top right corner if the video becomes available. Product Grid refers to the section of the storefront where all the products are laid out and I’m actually going to show you in a live site so you can see what this widget is customizing. So this is the section that the widget is customizing and that includes each view; the Grid View, the List View, and the Table View. This is the widget that you’ll use to customize the amount of products that appear in the List View, how many products appear in the Table View and how many products appear in each column or row in the Grid View. This widget is also the widget that you’ll use to customize any of the URLs. If you want to change the page that opens when a specific product or a specific category is clicked on, you’re able to customize that in here. This widget also gives you the ability to customize the images in a cool way. It allows you to add a border radius to the images if you wanted to turn any of your square images into circular images you can easily do that just by adding a Border Radius here. I’ll show you real quick what that looks like. So now the square category images, and this also applies to the product images, the images are now made circular just by adding the Border Radius. Then the last of these 4 is Buttons. This widget gives you a ton of customizations over your storefront’s buttons. So in this first section you’re able to remove some of the buttons. This next section allows you to customize the button icons. If you want, you can just remove all of them, and you can remove the icons by toggling these off. If you leave them toggled on, each button has a bunch of different icon options available to match whatever the theme of your store is. This next section is the font and this is the only other widget, other than the Main storefront widget, that has a font customization section and it is specifically for the buttons. So first you have the font weight, and this will allow you to make the font bold, or you can make it thin. For the buttons and for the size, you have two different size customizations. That’s because there are two different sizes of buttons inside the storefront. Next you have dimensions and dimensions allows you to customize the size of each button option. Styling is basically going to give you complete control over the way that the button looks from the color of the text in the normal, hover, and active state to the color the background, color of the border, and so on. Then the last section is plugins and plugins allows you to change the URL that the ‘Back to Store’ button takes you to. That is it for the for mandatory widgets for the storefront. Next is Top of the Store. Top of the Store gives you control over Ecwid’s automatic scrolling behavior, and I will put a link in the description that will go to a video that discusses that widget more in depth or there should be a pop-up that shows up in the top right corner if you want to jump to it right now. The top of the Storefront widget isn’t necessary, but if you experience any frustration with the automatic scrolling of Ecwid, this widget will fix it for you. These last two widgets are more a matter of preference. Text will allow you to customize some of the default text inside the store if you are not a paid Ecwid user. However, if you are paid Ecwid user, I highly recommend using the free Ecwid app that will allow you to customize all of the text inside the store. You can access that app either by searching for it inside the app store or you can actually just click right here and it will take you to the Storefront Label Editor. So, if you do use this widget just make sure that you remove the Text widget from the storefront. Then the last one you have is Headers and Headers gives you more control over the header text of the store.

Leave a Reply

Your email address will not be published. Required fields are marked *