Tutorial
- Creating sub-menus
- Displaying featured collection on the homepage
- Moving toolbar, search and social links into the layout
- Showing products on sale
- Associating product images with product variants
Creating sub-menus
With this theme you can create menus from two to three levels. In Versatile Ribbon Style demo, the first-level starts in a drop-down menu, the two-level and three-level menu generatesĀ a sidebar menu. Those menu levels comes with a breadcrumb at the top of the collection or product page.
To create a menu with two levels, follow this step:- Assign a subcategory from one of the items of the link list which its name is contained in the main menu link list parent in your product tag with its corresponding link item collection. For example: Shop is a link in the main menu link list parent and its link list has two items: Bread and Desserts. Bread contains three subcategories: Basic bread, Buns and rolls and Sweet bread. From the products option in the Shopify Admin, edit or create a product and assign or enter the subcategory Basic bread or Buns and rolls or Sweet bread. Then, assign the collection Bread.
- Go to your website to see the final result.
To create a menu with three levels, follow these steps:
- Create a new link list with the same nameĀ as one of the link items of the link list which its name is contained in the main menu link list from the navigation option in the Shopify Admin. For example, Create a link list and name it Dessert. Dessert is a link item of Shop link list which is the link item of the main menu link list. Then, add three link items: Cakes, Cookies and Tarts.
- Create a collection for each link item created on the new link list from the Collections option in the Shopify Admin. As this is a child collection, prefix it with the handle of its parent collection. For example, create a collection for Cakes, Cookies and Tarts. For each collection created, prefix it with the handle of its collection parent "dessert".
- Assign a subcategory from one of the link items of the new link list created in your product tag with its link item collection. For example: Cookies link item from the Desserts link list contains four subcategories: Bar Cookies, Drop Cookies, Molded Cookies and Sandwich Cookies. From the products option in the Shopify Admin, edit or create a product and assign or enter the subcategory Bar Cookies, Drop Cookies, Molded Cookies and Sandwich Cookies. Then, assign the collection Cookies.
- Go to your website to see the final result.
Displaying featured collection on the homepage
To display featured collections on the homepage, you need to create a link list of your collections from the Navigation option in the Shopify Admin. The link list can have any name and the link items points to a collection.
Once you created the link list, you will see it on the drop-down of "link list to use for collection" from the Theme Settings.
Moving toolbar, search and social links into the layout
To provide more control of your design, Versatile theme gives you the possibility to move the toolbar, search and social links in different parts of your layout. From the Theme Setting in your Shopify admin, you can configure the layout positions for the toolbar, social links and search.
Toolbar can be placed above or inside the header.
Social links can be placed in the header, footer or unplaced.
Search can be placed in the toolbar, header, navigation or unplaced.
Showing products on sale
To display a "SALE" banner on your product image, enter a number greater than the current price on "Compare at price" field.
From the Theme Settings in the Collection View section, you can modify the background and text color of the "SALE" banner.
Associating product images with product variants
To match your product variant with your product image, you need to enter the same title of the product variant in your product image's ALT text. To see the illustration, visit Versatile Store Style tutorial of this section.