by Cozmot | Oct 9, 2020 | Magento2
show fax field in Magento 2 store.
As fax is an outdated medium of communication, you may disable the fax field in the checkout step.
But different business has different requirements. Some customers may use fax machines, particularly who want an invoice hard copy quickly.
So, it is no harm in collecting their fax numbers. You can follow the below steps to configure the fax field in the registration form in Magento 2 storefront.
Steps to Show Fax Field in Magento 2:
- Login to Magento 2 admin panel
- Navigate to Stores > Settings > Customers
- Under Customer, select Customer Configuration
- Expand Name and Address Options
- Set Required in the field “Show Fax”
- Save the configuration
That’s it.
The fax field is now displayed as the required field where the customer has to enter the address. For example: with the shipping address at the checkout step as shown below:
Any doubts? If so, do mention them in the Comments section below. I’d be happy to help.
Also, do not forget to share the tutorial with the Magento Community via social media.
Thanks.
]]>
by Cozmot | Oct 9, 2020 | Shopify
Shopify Support v. Shopify Experts
One common point of confusion is the difference between Shopify’s official support and Shopify Experts. The key difference, however, between these two is important to understand.
Shopify Support team members, also referred to as gurus, are employed by Shopify and officially trained on the Shopify platform.
On the other hand, Shopify Experts are completely independent from Shopify. Shopify doesn’t have any official way of certifying or training Experts and therefore has no control over the work and services provided.
However, in order to be listed as an Expert on Shopify’s website, the Expert does have to meet certain minimum criteria in terms of experience with the platform.
While Shopify Experts and Shopify Support can help out with many of the same areas, Shopify Experts typically are able to provide more extensive assistance, especially in the areas of customization, development and design.
Shopify Support, meanwhile, typically won’t be able to assist with designing your site or making customizations to your store or theme. Instead, gurus focus on helping merchants understand how the Shopify platform itself works.
Theme v. templates v. layouts
A Shopify Theme is a general, overarching term that refers to the files that control the look and feel of a Shopify store. From a technical standpoint, a Shopify theme combines HTML, CSS, JavaScript, Liquid and image files into what shoppers see on screen, or the “front end.”
Often, however, there’s confusion between a Shopify themes, templates and layouts.
In the Shopify system, layout files are used to control the overall layout or composition of the repeating elements of the site, such as the header, footer and other areas that appear on all or most pages. Most Shopify themes only have a single layout since multiple layouts is typically a more advanced feature.
A layout file will also have a special Liquid tag that tells Shopify where to output the specific content of the page, which, in turn, is controlled by templates.
More specifically, Shopify templates refer to specific files that are outputted inside of a layout. All Shopify themes contain a base set of templates that control the layout of the homepage, collection pages, product pages and other pages such as contact, about or gallery type pages.
A Shopify theme can have an essentially unlimited number of templates. For example, creating a new separate template is often the best way to create special layouts for certain product types, such as items requiring personalization.
Collections v. categories v. subcategories
The use of the word “categories” is actually a bit of a misnomer for Shopify users.
Officially, Shopify products are always organized into what Shopify calls collections, not categories. There’s also no way to create a hierarchy with collections — in other words there’s technically no such thing as a subcategory or subcollection in Shopify.
That said, it’s still possible — and fairly straightforward — to create a hierarchical relationship between collections by using Shopify’s built in navigation system.
For example, a store owner can “nest” links to specific collections under links to others to create a subcollection or subcategory. It’s also possible to filter a collection by tag and direct shoppers to what is essentially a subset of a larger group.
For example, a menu link to a “Jeans” collection could actually be a link to a more general “Bottoms” collection that has been filtered to show only products that have a “jeans” tag.
The lack of hierarchal organization for Shopify collections can be a bit confusing from a store owner’s perspective because all collections will appear within the same master list of collections in the Shopify admin.
Also keep in mind that many users have a tendency to think of collections as folders similar to the folders you have on your computer’s hard drive. However, this is a bit inaccurate because a single product can belong to one or more — even hundreds — of collections, unlike folders, which typically only allow a file or object to be located in a single folder at any one time.
Note that collections can also be used to organize products in non-hierarchical ways. For example, many Shopify themes use collections to determine what items appear on the homepage or in another part of the shop, such as a more custom version of the “related images” section for a given product.
Vendors v. product types v. tags
Shopify offers three additional ways of organizing and classifying products: by vendor, product type and tag.
However, many store owners are confused by the differences between these and how they should be used.
Vendors is probably the most straightforward of these three labels, and is typically used to associate, as you might expect, a vendor, designer or manufacturer with a product.
It’s typically best to restrict the use of the vendor feature to these types of uses since many themes use the vendor label for features such as filtering and browsing (it’s also possible to use the vendors feature to show different size charts for each vendor in your store). It’s also important to remember that, in Shopify, products can only have a single vendor — so it’s not possible to label a product with more than one vendor.
If you don’t want to use the word “vendor” it’s easy to change it to something more appropriate for your business such as “brand” or “manufacturer” — though the word “vendor” will continue to be used within your admin panels.
Product type, meanwhile, is another distinct identifier that each product can have. Like vendors, products can only have a single product type. Product type is a helpful way to further organization products and, like vendors, is often used by themes for filtering or sorting features. Like all of these labels, product type is also helpful for you, as the store owner, to help organize and locate specific products.
The final label, tags, is perhaps the most flexible. Tags are unique in that a product can have one or more tag, unlike vendor or product type. Tags have a wide variety of uses and many themes make use of them for related product functionality or for, like the other labels, filtering and sorting.
The one downside to tags, however, is there’s no way to group them. For example, you can’t say that the tags “green” and “red” are colors, while the tags “silk” and “linen” are fabrics.
Shopify’s built in search tool also heavily relies on tags, so it’s important to keep this in mind when adding tags.
All of these labels are extremely useful when using automatically generated collections since they can all be called upon as criteria for items to be included or excluded from a particular collection. This can be incredibly powerful if you need to create highly specific collections.]]>
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
by Cozmot | Oct 8, 2020 | Shopify, Shopify Partner
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
, products, and pages. A Shopify link list is a simple collection of links, and these items can be created to point to a collection, page, or product within Shopify, or to a URL outside of the store’s domain.
Link lists are used for a variety of different use cases. In this tutorial, we will cover how to use link lists in a Shopify theme to create a nested navigation using an unordered list. By using link lists and Liquid, we’ll have full control over the menu from within the admin, giving flexibility to the merchant running the store.
Create a development store
Before we start let’s set up a development store that we can work with. That way we can test, break, and fix things as we build, and once we’re happy with our code we can move it into production.
Creating a nested navigation
In 2017, Shopify added the ability to create a nested navigation menu, up to three levels deep from a single page, by using a new menu editing interface. Previously, menus were created using multiple menus, and the handle for each menu to tie it to its parent menu link.
At the time of writing this article, all newly created stores have the new nested menus user interface, where you can easily drag, drop, and nest menu items, meaning you no longer have to link handles to menu names.
While it’s common to include the navigation in a layout file, the default one being theme.liquid, you can test out the nested navigation concept in any template.
Creating navigation menus
We’ll begin by creating a new menu, our parent menu, by heading to the Navigation tab in the Shopify Admin, which resides under the Online Store linkin the sidebar.
All new stores have a predefined default menu called “Main Menu”. To add items to the list, simply click the add another link button, and give your new item a “link name” and a destination. The select drop down will allow you to easily link to internal sections, such as a particular product or collection. Alternatively, you can enter your own URL (either internal or external) by choosing “web address” from the options.
Once we have this in place, we can start to consider the Liquid code we’ll need to output this in our theme.
You can drag and drop nested menu items to create a multi-level navigation, and with some JavaScript and CSS easily style it into a “super-menu” or “drop-down menu”.
Outputting the menu
In order to output the menu in a theme file, we’ll need to know the handle of the menu. Handles are unique identifiers within Shopify for products, collections, link lists, and pages.
Let’s begin by outputting all the items from the Main Menu link list. We can use a simple for loop we’ve used many times before to output the link list items in turn:
|
<ul> |
|
{% for link in linklists.main-menu.links %} |
|
<li><a href= “{{ link.url }}“>{{ link.title }}</a></li> |
|
{% endfor %} |
|
</ul> |
The key thing to pay attention to here, is the for-loop that’s been included around each <li>.
|
|
{% for link in linklists.main-menu.links %} |
We are using the variable link to hold the data relating to each item in the link list, as we loop over all the items. This keyword link could be anything, it’s just a variable for the for-loop to output data for the menu. In order to access link data, we need to access all the links in the link list with a handle of main-menu, hence linklists.main-menu.links.
Remember, the default Main Menu that exists in a Shopify store has the handle of main-menu, which is why it’s being used above. If our menu had a handle of social-media, the syntax would be refactored as:
|
|
{% for link in linklists.social-media.links %} |
Each link item has properties which include:
In the example above, {{ link.url }} will output the url we entered or generated in the Shopify Admin, and {{ link.title }} will output the link text specific to that url.
You might also like: How to Manipulate Images with the img_url Filter.
Multi-level navigation
Now that we have the basic Liquid structure in place for a single level menu, we need to consider how to create a sub-menu for our top level items. Firstly, we need to head back to the Shopify Admin and create our first sub-menu.
It might not be 100 percent clear initially, but every link in a link list, in addition to the menu itself, has a unique handle that we have access to in Liquid.
Let’s have a look at an example. If our main-menu has three levels of links as follows:
What’s great about using nested menus in Shopify is that nested menu items can be obtained directly from their parent link using Liquid. This greatly simplifies the markup required to render a nested menu — meaning you don’t need to know the handle of the parent to render its children.
Here’s an example of how we can use these related handles to output a three level deep nested menu:
|
<ul class=“parent“> |
|
{% for link in linklists.main-menu.links %} |
|
<li><a href=“{{ link.url }}“>{{ link.title }}</a> |
|
{% if link.links != blank %} |
|
<ul class=“child“> |
|
{% for child_link in link.links %} |
|
<li><a href= “{{ child_link.url }}“>{{ child_link.title }}</a> |
|
{% if child_link.links != blank %} |
|
<ul class=“grandchild“> |
|
{% for grandchild_link in child_link.links %} |
|
<li><a href= “{{ grandchild_link.url }}“>{{ grandchild_link.title }}</a></li> |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
</li> |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
</li> |
|
{% endfor %} |
|
</ul> |
You’ll notice that we’re now introducing an if statement in our refactored example, directly after we output the first level of our main menu:
|
|
{% if link.links != blank %} |
This if statement checks to see if a child-link for the current link item in our loop exists. If it does exist, the template moves forward and loops over all the items in the sub menu.
Additionally, in this example we handle child_link sub-menu and a grandchild_link sub-menu the same way, by checking with an if statement to see if there’s a child-link for the current link item, and if it does exist, the template loops through and outputs the sub-menu.
In the example above, child_link is just a for loop variable we use to represent the current item in the loop; it could easily be replaced with sub_link, and grandchild_link with sub_sub_link. We’ve used child and grandchild in this case to illustrate the hierarchy of the nested navigation a bit more clearly.
Final touches
I think it’s important to mention one extra link property that will be very useful when creating menus — link.active and link.child_active. These are both boolean properties (true/false) that allow you to easily tell if the current page is active, as well as if it’s nested items are active. The syntax is as follows:
|
|
{% if link.active %} class="active {% if link.child_active %}child-active{% endif %}"{% endif %} |
In this example, we’ll add a CSS class of active if the current page URL is the same as the list item, and a class of active-child if the current page is also part of the active nested item. Here’s the full code example for completeness:
|
<ul class=“parent“> |
|
{% for link in linklists.main-menu.links %} |
|
<li {% if link.active %}class=“active {% if link.child_active %}child-active{% endif %}“{% endif %}><a href=“{{ link.url }}“>{{ link.title }}</a> |
|
{% if link.links != blank %} |
|
<ul class=“child“> |
|
{% for child_link in link.links %} |
|
<li {% if child_link.active %}class=“active {% if child_link.child_active %}child-active{% endif %}“{% endif %}><a href= “{{ child_link.url }}“>{{ child_link.title }}</a> |
|
{% if child_link.links != blank %} |
|
<ul class=“grandchild“> |
|
{% for grandchild_link in child_link.links %} |
|
<li {% if grandchild_link.active %}class=“active {% if grandchild_link.child_active %}child-active{% endif %}“{% endif %}><a href= “{{ grandchild_link.url }}“>{{ grandchild_link.title }}</a></li> |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
</li> |
|
{% endfor %} |
|
</ul> |
|
{% endif %} |
|
</li> |
|
{% endfor %} |
|
</ul> |
Start nesting those menus!
. Having the ability to create an array of list items that can be changed in the admin gives you lots of flexibility. We’ve seen theme developers use them far beyond menu structures. However, knowing how to create nested navigation that can then be styled with CSS is a great tool to have at your disposal.
This is a simple yet powerful way to display product-specific content within emails, and could potentially save clients from customer frustration if products require installation or other post-purchase actions. Even if clients simply want to send a friendly message for certain products, it’s a perfect way to introduce creativity into email notifications.
The URL variables here will need to be replaced with a code snippet that appends text to the URL so that it includes the discount. This snippet of code would look like this: