- Duration: 2 weeks long
- Time commitment: 4-8 hours per week
- Language: English
- Video transcript: English
- Platform: Shopify
Work Outline
- Custom Theme Development
- Mega Menu Creation
- Shopify Section Ready Theme Structure
- Slider Creation
- Product page Color swatch, Size variant Functionality
- Cart Drawer Functionality development (which called ajax add to cart)
- Currency Option , Product page filter
- Mobile Responsive supported
Project Details :
Rothirsch is a Swiss company selling daily use products, delivering worldwide. While launching, they have been looking for a shopify developer team and found us online. After communicating with us they believed that we are the team they have been looking for and offered us the total responsibility of their shopify theme development. It is always a pleasure to help start a business and stay along the way to grow. We took the responsibility with confidence and the result of our team effort is revealed now. Rothirsch’s design team provided us with a stunning PSD theme file and we did the rest. Here are some major tasks that we covered in the way to the final development for shopify Ecommerce:
Home page:
Home page, most often the landing page is what creates the first impression to the target customers. So it requires special concentration to have a unique look and design for better establishment of a brand image.
Rothirsch’s home page is decorated with a mega menu, a full screen (size?) manual image slider in the header, a brief description about the team with a beautiful iconic image, a product collection part, email subscription panel and a footer with shipping policy, return and exchange policy and privacy policy.
Collection page/ Shop page:
The shopify collection page lists the products within a collection. This example includes product images with product titles, prices, and vendors, as well as a collection title and description for the collection as a whole.
Rothirsch has a collection page that includes all the products they offer. Collection page allows to show 50 products per page, and the rest of the products will move on to the second page automatically through pagination.
Product details page:
A product page on a shopify website helps customers decide whether or not to buy. Shopify offers multiple tabs to include different specs and features to help answer questions, provide reviews, allow product comparison, and facilitate the buying process.
Product information may vary based on its type. Here on this website we used 3 tabs to show different information for each product .
PSD to Shopify Theme Development:
If you want to design your own theme exactly as you imagined your online store to be, and at the same time want to use shopify ecommerce functionalities, we can do that for you. Shopify has a strong theme development feature to convert personalized psd themes to shopify.
Rothirsch team came with a well designed PSD theme that we converted to shopify.
Section ready theme:
At a high level, sections are modular components of a Shopify theme that merchants can customize. Sections contain content and settings for specific areas of a Shopify store, such as the basic elements of a product page, or a slideshow component. Within these sections, developers have access to a range of different setting types, from text inputs and image pickers, to custom HTML and menus, that merchants can customize from the theme editor and populate with their content.
Mobile responsive Theme development:
Due to the skyscraping uses of mobile devices you must ensure that your website is designed to adjust to a range of devices and screen sizes so that the users can read and interact conveniently. Mobile CSS is an essential element in any website to ensure that it can be viewed on any kind of device.
All the websites we developed including this one are mobile devices friendly.
Custom Slider section:
Image sliders are a popular way to slideshow the products you sell on your website. They are also fairly easy to create. Using a slider can be a great way to showcase your wares, but you need to make sure that the slider works for your target audience.
In this website we used a manual image slider in the header section to focus on the product varieties customers can choose from..
Collection page filter functionality development (Tag based filter ):
As we have discussed earlier that the collection page lists all the products within a collection, there should be a way to filter the products so that the customers can find the products they are looking for easily.
We have installed a new app on this Shopify store that will help customers filter the store’s collections.
Cart Drawer Functionality development (which called ajax add to cart):
Cart drawer functionalities is a part of the product page that works similar to the shopping cart in a brick and mortar shop. It allows customers to save their chosen items in the cart and buy them all together when they are done shopping which gives them a seamless customer experience.
We have set up a cart drawer for the Rothirsch store loaded with all the features to enhance the customer service as well as to improve the conversion rate.
Product page Color swatch, Size variant:
When there are more than one option to a single product like size, color etc, there should be options so that customers can select the options or variants of the product they want. Product variants usually offered in the product details page.
With Shopify each product variant can be assigned a different color, size, shape, or other attributes that, when combined, give you the flexibility to create the perfect product page for your online store. You can also manage inventory for each variant from the Inventory page.
Using Shopify’s metafields, you can make this process simple by adding references to your product variant metafields in your theme.
Here in this website we have added Size variant for some products where needed.
Quick check out button:
According to the Baymard Institute, 26 percent of US online shoppers have abandoned an order in the past quarter solely due to a ‘too long / complicated checkout process’.
The Check out or Buy now button usually shows on the product page. But now the dynamic checkout buttons are available anywhere of the themes that ensure a streamlined checkout process no matter which page the buyer is on the site.
The user experience on a store’s cart and checkout pages is extremely important for determining if the sale will be completed or not.
Product page Tabs option:
Easily add beautiful, fully customizable tabs to your product page. Optimise sales by giving your store a sleek new professional UI/UX. Organise your Product descriptions, shipping info and other key info using smart, easy to navigate tabs.
Product Page Tabs give your customers more information up front, without the need to search your website for all their answers. Under every single item, you’ll have the most important questions a consumer has on their mind: When is it coming? When will it get here? Can I trust you? As well as a slew of other information. Use them wisely and your conversions will
skyrocket!
Mega menu development without apps:
There is a well planned mega menu in Rothirsch.
Mega menu is a new type of responsive ecommerce system. It’s a mega menu that appears on a website when a user scrolls down the page. Mega menu is the best choice for an ecommerce website because it allows you to reduce the size of the product page. You can add your products from the top of the page, and add a text link to the product’s detail page from other areas on the page. It also provides you with a strong eye appeal, and a well-structured design.
Currency Functionality:
You can use Shopify’s currency functionality to set the default currency for your store, and you can use it to change the currency of your store at any time. You can’t change the default currency of your store by modifying your store’s theme – It’s up to you to change the default currency of your store if you want to – If you don’t set a default currency for your store, then Shopify will automatically use the currency of your store’s hosting provider.
We have integrated a social communication profile linked with the online store so that customers can share their views and comments with their friends and family.
An Online store can only be successful when it can reach its target customers and convert them into successful purchases. And an Search Engine Optimizaiton (SEO) friendly website can help a lot achieving this goal. Shopify itself is SEO friendly. Beside in every aspect of our development process, we care for your site’s SEO, we care for your business success.