Hello @shimul508 ,
To add menus in Shopify, follow these steps:
-
Log in to Your Shopify Admin Dashboard: Visit the Shopify website and log in to your account.
-
Navigate to the Navigation Settings: In the Shopify admin dashboard, go to “Online Store” and then click on “Navigation.”
-
Create a New Menu: Click on the “Add menu” button to create a new menu.
-
Name Your Menu: Enter a name for your menu. This name is for internal reference and won’t be visible to your customers.
-
Add Menu Items: Click on the “Add menu item” button to start adding items to your menu. You can add different types of menu items, such as links to collections, products, pages, or blog posts.
- To link to a collection: Choose “Collection” from the dropdown menu and select the collection you want to link to.
- To link to a product: Choose “Product” from the dropdown menu and select the product you want to link to.
- To link to a page: Choose “Page” from the dropdown menu and select the page you want to link to.
- To link to a blog post: Choose “Blog” from the dropdown menu and select the blog post you want to link to.
- You can also add a custom link by choosing “Custom link” from the dropdown menu and entering the URL and link text.
-
Organize Menu Items: Drag and drop the menu items to arrange them in the order you want them to appear in your menu.
-
Save Your Menu: Once you’ve added all the menu items and organized them, click on the “Save menu” button to save your changes.
-
Assign Menu to Navigation: After saving your menu, you need to assign it to a navigation area on your website. Under “Menu settings,” select where you want to display your menu (usually the main menu or footer menu).
-
Save Changes: Click on the “Save” button to apply your changes.
-
Preview Your Store: Visit your Shopify store and preview how the menu looks on your storefront. Make any necessary adjustments if needed.
That’s it! You’ve successfully added menus to your Shopify store.
And about Theme Upgradation
After reviewing your site on Google PageSpeed Insights, it received a good score overall. However, there is an issue with the Largest Contentful Paint (LCP) metric, mainly because the slides take a significant amount of time to load. Addressing this will require technical adjustments, as there are specific conditions to meet for optimization.
One of the most common recommendations I found is “Defer offscreen images”. This is an indication that all of the site’s image assets are loading at once.
So you can use a lazy load for these images.
- To defer the loading of offscreen images on your Shopify site, you will have to modify your Theme (theme. liquid file) to leverage the lazySizes library. Here’s how:
- Download the lazy sizes Javascript library from here and upload it to your theme’s /assets folder.
- Note(once check ‘lazy sizes Javascript library’ in assets repo. has available or not)
- Add the following lines to your theme. liquid just before the tag:
<script src=****“{{ ‘lazysizes.min.js’ | asset_url }}” async**=“async”></script>**
- Change the image tags in your theme by adding the class “lazyload” to the image tags and changing the src attribute to the data-src attribute.
{% for img in product.images %}
{% assign img_url = img | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ %}
<img class=“lazyload”
src=“{{ img | img_url: ‘300x’ }}”
data-src=“{{ img_url }}”
data-widths=“[720, 1080]”
data-aspectratio=“{{ img.aspect_ratio }}”
data-sizes=“auto”>
{% endfor %}
We’ve had the best success for our clients by working with our developers to implement the lazy sizes because it’s quite complicated for non-technical people.
You need to work on the following points:
- Pass core web vitals (important)
- Reduce JS Payload.
- Use Critical CSS.
- Reduce Large Image Sizes
- Migrate Tracking Codes To Google Tag Manager
- Compress Images
- Limit Third-Party JavaScript & Shopify Apps
- Preload Web Fonts.
- Use a standard web font.
Theme Upgrade:
Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization.
You can improve your website speed score by fixing these issues.
If there is anything that needs to be clarified or included, please let us know. We will surely help you.
Have a nice day!
