DEV Community: My Code Magic

How to create a custom header menu in Shopify

My Code Magic — Fri, 08 Jan 2021 19:35:05 +0000

A nested navigation or nested menu is a popular solution for effectively organizing collections, products, and pages. This example will output a nested menu of links in an unordered list up to three levels deep, all of which can be easily updated using the Shopify Admin. Nested navigation uses the Shopify linklist object.

Place the following code in the Sections/header.liquid file, or wherever you wish the nested navigation to appear.
If used in a section, you can also create a settings option in the section schema, and replace the for-loop in this example with ``` {% for link in linklists[section.settings.main_linklist].links %} ``` where main_linklist is the id of the schema setting. This setting would specify a link_list picker, and the default value would be set to main-menu.
Add relevant classes and styles to create dropdown functionality via CSS.

https://shopify.github.io/liquid-code-examples/example/nested-navigation

Please note: We have intentionally limited CSS and JavaScript and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.

1 Create a new template page in your Shopify store

My Code Magic — Fri, 25 Dec 2020 16:41:32 +0000

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Templates directory, click Add a new template.

Choose a type option for your new template. For example, for an alternate page template, select page. Give your template a meaningful name, which will make it easy to find when you are assigning it in the admin.

Click Create a template. Your new template will open in the code editor, and the file will be populated with the default code.

Edit your new template as needed.
Click Save. 👍

I hope This information is help to create template page for your store.
Also visit our website ❤️ mycodemagic 🙂

Top 5 Javascript Carousel Libraries

My Code Magic — Wed, 09 Dec 2020 17:58:22 +0000

1. Swiper

https://swiperjs.com/

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

2. Owl Carousel 2

https://owlcarousel2.github.io/OwlCarousel2/

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Owl Carousel has been chosen as the number one jQuery plugin by hundreds of developers. Now its time for a new version that comes with lots of new features and an even more user-friendly API.

3. Slick Slider

https://kenwheeler.github.io/slick/

Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc...

4. ItemSlider

https://github.com/codrops/ItemSlider

A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

5. blueimp Gallery

https://blueimp.github.io/Gallery/

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support, and on-demand content loading and can be extended to display additional content types.

I hope This information is help to use Silder for your website. also comment me whitch slider you use and most usefull Slider library name....

Also visit our website mycodemagic

Top Free Icon libraries for programmers

My Code Magic — Fri, 04 Dec 2020 17:35:30 +0000

1. Flaticon

https://www.flaticon.com/

3711000+ Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT. Thousands of free icons in the largest database of free vector icons!

2. Ionicons

https://ionicons.com/

Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.

3. Font Awesome

https://fontawesome.com/

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

4. Ant Design Icons

https://ant.design/

A design system for enterprise-level products. Create an efficient and enjoyable work experience.

5. Boxicons

https://boxicons.com/

Boxicons is a simple vector icons set carefully crafted for designers and developers to use in your next project. No attribution required.

6. Material Icons

https://material.io/resources/icons/

Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.

I hope This information is help to use icon for your website. also comment me whitch icon you use and most usefull icon library name....

Also visit our website mycodemagic

How to Check and Generate Meta Tags for Your Website

My Code Magic — Sun, 29 Nov 2020 19:52:55 +0000

In this session, I’m going to introduce you to a simple, yet very useful tool called HeyMeta. If you’re interested to see what your website’s sharing profile looks like, and you’d like to make sure the meta tags you’re using are correct, Hey Meta is just what you need.

Let’s Start

Get Your Meta Tags in HeyMeta

Now Check Your Meta Tags

Check the effectiveness of your website’s current meta tag setup by entering the URL in the input field. You’ll be shown a social card preview (what’s likely to be shown on social networks, sharing apps, etc.) and the title, description, featured image of the URL in question.

If your web page doesn’t have any meta tags for these items at all, nothing will be shown.

Generate Correct Meta Tags

If your page appears to be missing details or shows incorrect (or sub-optimal) metadata you can use Hey Meta to generate correct tags for you. Enter the information you’d like to display in the fields shown:

The same can be done for the website description, URL, and featured image. The generated tags will be displayed in the previews, and the markup will look something like this:

<!-- HTML Meta Tags -->
<title>My Code Magic - Easy For All Web-Designer</title>
<meta name="description" content="Explore the all new effective design, content, themes, and Templates for Web-Designer. Also we can work UIUX-Design, Web-Designe, App-Design and Graphic Design.">

<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="My Code Magic - Easy For All Web-Designer">
<meta itemprop="description" content="Explore the all new effective design, content, themes, and Templates for Web-Designer. Also we can work UIUX-Design, Web-Designe, App-Design and Graphic Design.">
<meta itemprop="image" content="http://mycodemagic.com/assets/images/logo-icon.png">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="http://mycodemagic.com">
<meta property="og:type" content="website">
<meta property="og:title" content="My Code Magic - Easy For All Web-Designer">
<meta property="og:description" content="Explore the all new effective design, content, themes, and Templates for Web-Designer. Also we can work UIUX-Design, Web-Designe, App-Design and Graphic Design.">
<meta property="og:image" content="http://mycodemagic.com/assets/images/logo-icon.png">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Code Magic - Easy For All Web-Designer">
<meta name="twitter:description" content="Explore the all new effective design, content, themes, and Templates for Web-Designer. Also we can work UIUX-Design, Web-Designe, App-Design and Graphic Design.">
<meta name="twitter:image" content="http://mycodemagic.com/assets/images/logo-icon.png">

<!-- Meta Tags Generated via http://heymeta.com -->

Here you’ll see the native HTML meta tags like <title>, Twitter tags, and the Open Graph tags like <meta property="og:title"> which allow for proper social sharing. These tags can then be placed in the <head> of your HTML document.

Make sure your meta tags are displaying your website details properly!

Create Custom Scrollbar

My Code Magic — Fri, 27 Nov 2020 19:28:50 +0000

Set the SCROLLBAR width
Here is Code

::-webkit-scrollbar {
  width: 20px;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}

Set the SCROLLBAR track
Here is Code

::-webkit-scrollbar-track {
  background-color: #EDF2F4;
}

Set the SCROLLBAR thumb
Here is Code

::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background: #2B2D42;
  border-left: 3px solid #EDF2F4;
  border-right: 3px solid #EDF2F4;
}

Now i am sure you can Create Successfully Am I Right ?

Thanks for watching guys also apply a custom scrollbar to your Website I hope you understand everything steps.
Also visit our website mycodemagic

DEV Community: My Code Magic

How to create a custom header menu in Shopify

1 Create a new template page in your Shopify store

I hope This information is help to create template page for your store. Also visit our website ❤️ mycodemagic 🙂

Top 5 Javascript Carousel Libraries

1. Swiper

2. Owl Carousel 2

3. Slick Slider

4. ItemSlider

5. blueimp Gallery

I hope This information is help to use Silder for your website. also comment me whitch slider you use and most usefull Slider library name....

Also visit our website mycodemagic

Top Free Icon libraries for programmers

1. Flaticon

2. Ionicons

3. Font Awesome

4. Ant Design Icons

5. Boxicons

6. Material Icons

I hope This information is help to use icon for your website. also comment me whitch icon you use and most usefull icon library name....

Also visit our website mycodemagic

How to Check and Generate Meta Tags for Your Website

Let’s Start

Get Your Meta Tags in HeyMeta

Now Check Your Meta Tags

Generate Correct Meta Tags

Make sure your meta tags are displaying your website details properly!

Create Custom Scrollbar

Now i am sure you can Create Successfully Am I Right ?

I hope This information is help to create template page for your store.
Also visit our website ❤️ mycodemagic 🙂