The standard way of embedding Google Forms is to use an iframe, which is sufficient. The more preferable way of course is by manually extracting the form’s HTML fields and re-coding it according to your theme’s HTML structure. Not only will it match your theme nicely, but you can also insert some custom JS validation on the fields as needed. Another plus is that Google Forms captures form submissions in a convenient spreadsheet format.

The Steps

The first step is to create two web pages in BigCommerce that will become our form page and success page when users submit the form. The form page is a custom template file that will contain our form HTML codes while the success page is simply a generic page. Take note of the success page URL.

Next, build our form in Google Forms with the most minimalist styling. Once tested and published, view its source to get the form codes and re-code the form into our custom template file — in the HTML structure we like while preserving the field names and the <form> action (and method). Next is some code alterations.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"style="display:none;" onload="if(submitted) {window.location='SUCCESS_PAGE_URL';}"></iframe>


<form action="https://docs.google.com/forms/d/1CsZt9s0vVegFb3-Qa3162Ri7A91ggx6S9B6qvBZcyJY/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
...your form fields...
</form>

Add line 1 and 2 right before our form tag and replace the correct success page URL in line 2.

Next, add target="hidden_iframe" onsubmit="submitted=true;" attributes to the <form> tag so that the form submits into the hidden <iframe> we created in line 2.

Finally, give it a test run. It is advisable to validate the form fields with JS to ensure the form is indeed being submitted successfully.

Although this guide is written for BigCommerce, the implementation steps are generic enough to be used on any platforms where you have HTML and JS editing access. Hope it helps.

Need help making your BigCommerce store stands out from the competition? Get in touch.

The post Embedding Forms in Bigcommerce Using Google Forms appeared first on Stampede: the strategic design & technology company.

But why stop at that, right? In fact, we went ahead and designed a wide range of product sashes and ribbons for you. They’re all in editable vector format so you can scale them up, flip them to different corners and change their colors to suit your website style.

This work is licensed under the Creative Commons 4.0 so feel free to use it in your personal and commercial work.

Enjoy!

Download E-Commerce Product Sashes and Ribbons (PSD)

E-Commerce Sashes by Stampede Design is licensed under a Creative Commons Attribution 4.0 International License.

The post Freebie: E-Commerce Product Sashes & Ribbons appeared first on Stampede: the strategic design & technology company.

Sample of product sashes.

In BigCommerce, exclusive product sash features are not built-in but they can be added using some clever jQuery tricks. Specifically, we need to tell jQuery to read the page for certain “triggers” or “conditions” and show the appropriate sash based on them. The key to product sashes is they have to appear in product listing pages (like category, homepage, search result) and the product details page. This means the “triggers” have to be present in all these pages for jQuery to detect.

On Sale Sash

In the following example, I am going to show how to add the most common of all product sashes, On Sale. Firstly, we need to set the discounted price for the appropriate products. If this was done right, the products will show up in the shop with a strike-through line on their original retail price. This element will become the “trigger” for the On Sale sash. So we just have to tell jQuery, if this element exists, show the On Sale sash. Below are Javascript codes for the category and product details pages.

Product Category Page

$("#CategoryContent .ProductList li .RetailPriceValue").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
});

Product Details Page

if($('.DetailRow.RetailPrice').is(':visible')) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
}

Any Miscellaneous Sashes

A slightly trickier scenario is to show product sashes like Bestseller and New, which we don’t really have a way to configure via the BC admin. Even though BC has product tags and custom fields, these data don’t show up in the product category pages. Fortunately, we have something else to use, the main image alternate text. In BC admin, it’s the Description box of the main product image. You need to enter a unique identifying keyword in the Description box and thanks to jQuery, reading the presence of this keyword is a breeze. This method will allow you to show any kinds of product sashes.

Enter the keyword into the Description field of the main image.

For showing a Bestseller sash, enter the keyword Bestseller. I personally prefer to enter the actual product name followed by the keyword to keep the semantics right, like 5ft Christmas Tree – Bestseller. Here’s the code for showing the Bestseller product sash.

Product Category Page

$("#CategoryContent .ProductList li .ProductImage a img[alt*='Bestseller']").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
});

Product Details Page

if(ProductImageDescriptions[0] && ProductImageDescriptions[0].indexOf("Bestseller") >= 0) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
}

The examples I provide here only contain the necessary jQuery code snippets to make the product sash works. It’s not really a step-by-step beginners tutorial. You would need CSS to style the product sash nicely. Don’t forget about the sash graphics too, they are transparent PNGs. I can also foresee that my codes are totally template-dependent. However, if you are familiar with jQuery selectors I am sure you will be able to understand the gist and tweak the codes accordingly to fit your templates.

Give it a try and post your feedback below!

The post Add Product Sash/Ribbon in BigCommerce Using jQuery appeared first on Stampede: the strategic design & technology company.

Real quick, both services offer a wide array of base themes to get user started. It’s also worth mentioning that half of the themes on Shopify are premium themes.

The Common Traits

Both platforms use a system where the template HTML files are organized into views such as layout or snippets. They use different naming conventions but the general idea is layouts are the skeleton of the whole page and snippets are the bits of content loaded into the page. For example, a layout file could be for homepage or product category page, while a snippet is another file controlling the product loop that can be called from both layout files. Each platform has its own syntax for invoking these files and user can add new layouts and snippets. This system makes it easy to reuse repetitive codes and keeping your code tidy. Making little modifications like adding an FB Like box or a Mailchimp signup form is a piece of cake.

Both platforms also has a built-in HTLM/CSS code editor with basic key features such as a file browser and list of recently opened file. However, the BigCommerce editor has an extra handy feature which lists all the files dependent to the currently viewed file for quick access.

Now we shall compare them.

BigCommerce (BC) vs Shopify

Before we go any further, let me just break the news that Shopify hit a home run with this one. The winning formula is Shopify themes are made to be customized in the first place. Two key features that stood out are Theme Settings extension and Liquid programming language.

Theme Settings extension is fairly interesting. It allows the theme developer to tweak the settings or configuration fields of any themes. As an example, if the shop owner decided he needs to use an alternative logo when the website is viewed on a mobile phone, the theme developer can simply add a new upload field into the settings page in addition to the default logo upload field. The new variable will automatically be accessible in the template and the alternative logo can be output and controlled using CSS.

While BC templates only contain static calls to other template files, Shopify has its own template programming language called Liquid. Liquid comes with basic programming functions such as variables assignments, for-loops, conditional statements as well as a handful of cool helper functions. The code can be used both in HTML and CSS files. Here is a very nice cheat sheet.

With Liquid, a certain degree of logic can be implemented into the template such as giving different CSS class to elements based on the page currently in view. A little more advanced example is using product tags to put ribbon/sash on products in category pages. In my recent project, I tagged products with bestseller and used the following code to produce a Bestseller sash. While this can be implemented in BC using clever Javacsript tricks, I found that the tags system in BC to be a bit limited.

{% for mytag in product.tags %}
   {% if mytag == 'bestseller' %} 
      <span class="circle sd-bestseller">Bestseller</span>
   {% endif %}
{% endfor %}

Custom Bestseller product sash. On Sale was built-in.

The next thing I love about Shopify is the dedicated manager for Menus or Navigation in the admin panel. Admins can create as many menu groups as they like in addition to the default Main Menu. Then simply use the Liquid for-loop in the appropriate template file to render the menu (also in any way they like). This is how it looks in its simplest form. Of course, with a little bit more code you can also highlight the active menu item.

<ul>
   {% for link in linklists['footermenu1'].links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
</ul>

Once the menu structures are implemented in the template this way, it will be very easy for store admins to add or remove menu links without having to alter the template file directly.

Another feature that works very well with the menu manager is Smart Collection. A collection is Shopify’s way of saying category. A smart collection is somewhat a dynamic category where products are automatically assigned based on the rules defined to the category for example, if a product has a specific tag or if it falls between a specific price range. A menu can be made to link to the smart collection which gives a “product filter” sense of interaction when it is placed strategically on the page.

The next exciting feature Shopify has to offer is Apps to extend the functionality of your online store. There are hundreds of them but a particular one that has proved to be essential is the meta fields app, which allows the user to define additional generic text fields to products. Outputting these extra text can be done effortlessly using simple template tags. With custom meta fields, designers would have far more design flexibility when customizing the theme.

BC’s Redeeming Features

The one limitation of Shopify that I noticed is the checkout pages are off-limits to HTML modifications. Therefore, you won’t be able to place any special text or move the layout around. This could be due to the fact that a code mistake can cause the whole checkout process to break. CSS changes is still permitted though. BC on the other hand allows their checkout pages HTML structure to be modified.

One little bonus feature of BC is the template files can be accessed via FTPS or WebDAV. This can be really useful in circumstances where you need to make a directory-wide search or batch search and replace task using your local IDE.

Final Words

Working with BC and Shopify have been a great learning experience. But if I had to choose which one I enjoyed more, it has to be Shopify!

The post Customizing BigCommerce and Shopify appeared first on Stampede: the strategic design & technology company.