Adding your Instagram, Facebook or Twitter widget to your Avactis store is easy. Follow these steps to create your widget.
Once you've created your widget, follow the appropriate steps below to add it to your website.
The area on your Avactis pages where you could add your widget consist of 3 columns, i.e. left_column, center_column and right_column. The principle is used for adding your widget to your front page (index.php as shown below) as well as to your product_list.php page. We will get into those details in the tutorial.
The Avactis on-line documentation provides a lot of information regarding managing your pages (a lot more than we need). You can view this on Avactis Page Manager.
Please note that similar to some other stores / websites / blogs that we have tutorials on, Avactis does not display your widget in edit mode, you can view your live site after you have saved your changes.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along we will explain the difference.
Log in to your Avactis Store.
On your dashboard under Design, and select Page Manager.
On the Page Manager page select the page you want to add the widget to under PAGE OPTIONS.
For the Front Page (Home Page) you will use the index.php page but for the Products Page you will use the product_list.php page. The home.php file is used for the Customer Home page (logged in customers), so if you plan to add your widget to that page feel free to select the home.php page.
There is no differences between adding your widget to these pages, what we explain in this tutorial will be applicable to all pages.
There are 3 areas where you can add your widget (as we mentioned earlier in the tutorial).
Please take note that the left_column and the right_column areas have limited width available (basically 50% of the center_column area) and for the Grid display this is therefore not very practical (see the following example when the widget is added to the left_column area). For the Slideshow display this can be used due to the fact that only one item is displayed at a time.
Grid display in left_column
Slideshow Display in left_column
Using the Grid display we should rather have it displayed in the center_column. This is the area we will use in our tutorial. Adding it to the other columns is done in exactly the same way.
To add your widget we will add a block to the center_column area.
Click on add block and in the list of available blocks, select the Welcome Text block.
Replace the existing Block content text with your snippet. To make adding this a bit easier you can stretch the content area by dragging the bottom right corner. You can add a title in the Block title text block, but this will not be displayed with your widget, it is only used for identifying it in the list of blocks when added to the center_column. By default it will be called Welcome Text.
Click on Save. On the Page Manager page move the newly added block to where you want it to be displayed (by default it is added to the bottom of the list of blocks) and click on Save Changes.
View your live store. Your page should display as follows.
You will notice there is no Header for your widget, no space between the top menu and the widget as well as no space between the widget and the CATEGORIES area on your page. To change this we will add some HTML code to the snippet.
In the example we have added a short welcome text, a header as well as a Horizontal line at the bottom of the widget.
Return to the Page manager, make sure the index.php page is selected and click on the edit option for the newly added block.
Note that in this edit mode you can only make the content area longer not wider but it works quite well. Make the changes to the content area and click on Save.
Click on Save Changes and view your live store.
Your page should display as follows.
The above was done with the Grid display. For the Slideshow display we have to make few other changes to the snippet content. Adding the snippet process stays the same so we won’t go into those details again.
If you have added your standard unmodified Slideshow Display widget code to your store page then your widget will now be displayed as follows on your store page.
Not very practical I should think (a bit small and left justified). As with the Grid Display, with the standard snippet you cannot change the justification of the widget. To change the appearance of your Slideshow widget we will be making some changes to the contents of your snippet.
Remove the class="snapwidget-widget" line in your snippet. This will allow you to change the size of the displayed widget. Be careful not to remove anything else from the snippet.
Add a height:100%; attribute after the width attribute in the iframe part of your snippet. Because your Slideshow display is always in a rectangle area you must set the width and the height to the same proportion else your displayed thumbnail will be stretched out of proportion.
Encapsulate the widget in a <div>…</div> area so that we can set the display size of your widget as well as center justify the widget.
Applying the above, we can thus set the size of the displayed widget to 2x the actual size (see the Thumbnail Size as set up on your SnapWidget dashboard), in this case 2 x 100px = 200px.
and center justify the widget.
This will then display your widget as follows:
You could also add a border to the widget to make it even more prettier. Add the border atrribute to the starting <div> tag. In this case we have added a red border. You can adjust these settings as you go along to suit your needs.
This will then display your widget as follows:
If you don’t want your widget displayed center justified you can just remove the margin:auto attribute of the style part of the <div> tag.
Remember to click on Save Changes on the Page Manager page after each change you make to the inserted code.
Happy selling with Avactis and SnapWidget! 😀