How to remove header links in Magento 2

/in , /by

How to remove header links in Magento 2

Please follow the below instructions :

Step 1 :- Go to app/design/frontend/VenderName/ThemeName/Magento_Theme/layout/default.xml

Step 2 :- Copy below Code

<referenceBlock name="wish-list-link" remove="true"/>
<referenceBlock name="catalog.compare.link" remove="true"/>

Step 3 :- Paste this code in default.xml before body tag () and save it.

It will remove the links from the header

How to remove compare link on Magento2 header

/in , /by

How to remove compare link on Magento2 header

To remove the compare link from the header in Magento 2, you can follow these steps: First, create a custom module if you haven’t already. Inside your module, create a di.xml file under app/code/[Vendor]/[Module]/etc/frontend/ and use the Magento\Catalog\Block\Product\Compare\Link block class to remove the compare link. You can achieve this by adding the following code to your di.xml file:

<type name="Magento\Catalog\Block\Product\Compare\Link">
<arguments>
<argument name="template" xsi:type="string">Magento_Catalog::empty.phtml</argument>
</arguments>
</type>
This code will effectively remove the compare link from the header by overriding its template with an empty file. After that, clear the Magento cache using the command php bin/magento cache:clean. This will ensure that the changes take effect, removing the compare link from your store’s header.

CSS Media Queries for iPads & iPhones

/in , , , , , , /by

Sometimes we got very confusion while developing responsive work. When we apply the breakpoints for iPad and iPhone that does not works properly. As per my experience while searching on the Internet I found some useful information regarding the media queries. I applied those and that works fine for me. So today I am going to add the media queries here for the same.

iPad Media Queries

iPad Media Queries (All generations – including iPad mini)

 

iPad in portrait & landscape


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}

iPad in landscape


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}

iPad in portrait


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

Retina iPad in landscape


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in portrait


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad mini Media Queries

iPad mini in portrait & landscape


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}

iPad mini in landscape


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}

iPad mini in portrait


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

iPad mini Resolution


Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)

Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)

Device-pixel-ratio: 1

iPhone Media Queries

iPhone 6 Media Queries

iPhone 6 in portrait & landscape


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}

iPhone 6 in landscape


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 6 in portrait


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }

How to Change Magento 2 Favicon

/in , /by

Today I will show you how you can change favicon on magento2 site. Follow the below steps :

1- go to Content -> Design -> Configuration
2- Click on HTML Head settings tab
3- Upload your favicon and save configuration.
4- Refresh the Cache

How To Get Base, Media, Link Url In Magento2

/in /by

How To Get Base, Media, Link Url In Magento2

To get the base URL, media URL, and link URL in Magento 2, you can use Magento’s built-in functions to retrieve these URLs programmatically. To get the base URL, use the following code:

$baseUrl = $this->_url->getBaseUrl();
For the media URL, which points to the media directory where files like images are stored, you can use:
$mediaUrl = $this->_mediaDirectory->getAbsolutePath('media');
To get a specific link URL for a page, product, or category, you can use:
$linkUrl = $this->_url->getUrl('path_to_resource');

You can access these values through the constructor by injecting the necessary dependencies, like \Magento\Framework\UrlInterface for the base URL and \Magento\MediaStorage\Model\File\Storage\Database for media URLs.

These methods provide a flexible and dynamic way to retrieve URLs based on your Magento 2 configuration.

How to Enable Template Path Hints in Magento 2

/in /by

How to Enable Template Path Hints in Magento 2:

Go to Magento 2 admin panel and login with your credentials.
Go to Stores –> Configuration.
Select Developer option from the Advanced tab at the end.
Open Debug dropdown and set Enabled Template Path Hints for Storefront to yes.

Click to Save Config.

How to Change Magento 2 Logo

/in /by

Here are the steps that you will follow to change Logo in Magento 2

Go to your Magento 2 admin.
Go to STORES > Configuration > Design > Header
Click Choose file and select your logo
Click Save Config