Stop Guessing.
Instant CSS Selector
Suggestions in DevTools.

The post CSS Selector Lens: The DevTools Extension That Instantly Suggests CSS Selectors for Chrome & Firefox appeared first on Shopify Freelancer | Wordpress Freelancer.

😤 The Problem Every Shopify Developer Knows

Every Shopify developer, theme designer, and store owner has wasted time on this exact workflow: open Shopify Admin → Online Store → Themes → click the three-dot menu → Preview → copy the URL from the address bar. Then do it again for the next store. And again the next day.

Shopify theme preview URLs are long, unique, and impossible to memorise:

https://yourstore.myshopify.com/?preview_theme_id=123456789

There is no built-in browser tool to save and recall these per store — until this Shopify Chrome Extension and Shopify Firefox Add-On came along.

Preview Links for Shopify Stores is a free Chrome Extension and Mozilla Firefox Add-On that works as a dedicated preview link manager for Shopify themes. Save unlimited named links per store and access them in one click from your browser toolbar — no Admin navigation required.

👥 Who Is This Chrome Extension & Firefox Add-On For?

⚡ Full Feature Breakdown

This Chrome Extension for Shopify and Mozilla Firefox Add-On for Shopify is purpose-built for one job and does it exceptionally well. Here is every feature in detail.

1. 🌐 Automatic Shopify Store Detection

The moment you click the extension icon in Chrome or Firefox, it reads your active tab and automatically identifies which Shopify store you are on — no manual input needed. It handles three URL types:

A live status badge at the top of the popup always confirms which store’s links you are viewing — whether you are using the Chrome Extension or the Firefox Add-On.

2. 🔗 Save Named Theme Preview Links Per Store

Add as many preview links as you need for each Shopify store. Each saved link holds:

• Theme Name — a label you choose (e.g. “Dawn 5”, “Holiday Banner”, “Client Staging v3”)
• Preview URL — the full Shopify theme preview link

Links are organised per store automatically. Switch stores, the popup updates. No filters, no manual switching — whether you are in Chrome or Firefox.

3. 📋 One-Click Copy with Visual Confirmation

Every link card has a Copy button. One click puts the preview URL on your clipboard instantly — ready to paste into Slack, email, or a client ticket. A visual “Copied” state on the button confirms it worked. No guesswork.

4. 🚀 Open in New Tab or New Window

Each saved link has two direct launch options available in both the Chrome Extension and the Mozilla Add-On:

• Open in New Tab — launches the preview URL in a new tab without closing the popup
• Open in New Window — perfect for side-by-side theme comparison across two monitors

5. 🗑️ Delete Links Instantly

Each link card has a delete button. Removing a link triggers a smooth fade-and-slide animation and the list refreshes instantly — no page reload, no confirmation dialogs in the way.

6. 🔄 Smart Custom Domain Support

Shopify stores on custom domains (e.g. www.yourbrand.com) are fully supported in both the Chrome Extension for Shopify and the Firefox Add-On for Shopify, through two methods:

• Auto-detection — the extension scans the page’s inline scripts for the standard Shopify.shop JavaScript variable present on all Shopify storefronts and maps the domain automatically. A green “Auto-detected” badge confirms success.
• Manual mapping — if auto-detection isn’t possible, a one-time prompt lets you type the store handle. The mapping is saved permanently — you never have to do it again.

7. 💾 Persistent Local Storage — Works Offline

All links are stored in the browser’s native storage.local API — the same secure mechanism used by both Chrome Extensions and Mozilla Firefox Add-Ons. This means:

• Links are available instantly, even offline
• Data survives browser restarts and extension updates
• No account, no login, no server — your data never leaves your device
• Unlimited stores, unlimited links

8. 🎨 Premium Dark-Mode UI

The popup uses a polished dark-mode interface with the Inter typeface — clean, compact, and distraction-free. Designed to get you in and out in under two seconds, whether you are using it as a Chrome Extension or a Mozilla Firefox Add-On.

🛠️ How to Use This Shopify Browser Extension

1. Install the Chrome Extension for Shopify from the Chrome Web Store, or the Mozilla Firefox Add-On for Shopify from Firefox Add-Ons (AMO) — both linked below.
2. Navigate to any Shopify store — admin panel, .myshopify.com, or a custom domain.
3. Click the extension icon in your Chrome or Firefox toolbar. The store is detected automatically.
4. Add a link — enter a theme name and paste the preview URL, then click Save Link.
5. Use your links — copy to clipboard, open in a new tab, or open in a new window.
6. Switch between stores freely. The popup always shows only the links for your current active store.

🔒 Privacy & Security

This Chrome Extension and Mozilla Add-On was built with a strict privacy-first approach:

• Zero data sent to any server — all storage is local to your browser
• No analytics, no tracking, no telemetry of any kind
• Minimal permissions — only storage, tabs, activeTab, scripting, and windows
• The content script only scans for Shopify.shop in inline scripts — it never reads form fields, passwords, or personal data

📦 Download the Free Shopify Chrome Extension & Firefox Add-On

Approved and listed on both official browser stores. 100% free, no account required.

❓ Frequently Asked Questions

Is this Chrome Extension for Shopify free?

Yes — completely free. No paid plans, no premium tiers, no subscriptions. Both the Chrome Extension and the Mozilla Firefox Add-On are free to install and use forever.

Does this Shopify Firefox Add-On work on custom domains?

Yes. Both the Chrome Extension for Shopify and the Mozilla Firefox Add-On for Shopify automatically detect Shopify stores on custom domains using the standard Shopify.shop JavaScript variable. If auto-detection fails, a simple one-time manual prompt lets you link the domain to your store handle permanently.

Can I manage multiple Shopify stores?

Yes. Links are stored per store automatically in both the Chrome Extension and the Firefox Add-On. When you visit a different Shopify store, the popup shows only that store’s links. There is no limit on the number of stores or links.

Will my links be saved after a browser restart?

Yes. Data is stored in the browser’s native local storage and persists across restarts and extension/add-on updates. Links are removed only when you manually delete them or uninstall the Chrome Extension or Mozilla Add-On.

Does the Chrome Extension also work on Brave, Edge, or Opera?

Yes. Because it is built as a standard Chrome Extension, it works on any Chromium-based browser. Install it from the Chrome Web Store and it runs identically on Brave, Microsoft Edge, and Opera — no extra configuration needed.

Is the Mozilla Firefox Add-On officially approved?

Yes. This Mozilla Firefox Add-On for Shopify is reviewed and officially listed on addons.mozilla.org. The Chrome Extension for Shopify is equally approved and listed on the Chrome Web Store.

Is my Shopify store data safe?

Absolutely. Neither the Chrome Extension nor the Mozilla Add-On sends any data to external servers. Everything is stored locally in your browser. There is no tracking, no analytics, and no network requests of any kind.

Stop repeating the Admin → Themes → Preview roundtrip. Install this free Chrome Extension for Shopify or Mozilla Firefox Add-On for Shopify today and get every theme preview link one click away — forever.

The post Preview Links for Shopify — Free Chrome Extension & Mozilla Firefox Add-On appeared first on Shopify Freelancer | Wordpress Freelancer.

Instead of just definitions, let’s walk through how these units actually behave in real projects—and which one you should rely on most of the time.

Understanding the Core Difference

At a high level, all three units are relative, but they are relative to different things:

• em → relative to the parent element

• rem → relative to the root (html)

• vw → relative to the viewport width (screen size)

That single difference changes everything in how they behave.

em: Flexible but Can Get Tricky

The em unit scales based on its parent’s font size. This makes it powerful for components, but also easy to misuse.

.parent {
font-size: 20px;
}

.child {
font-size: 2em; /* 40px */
}

Now imagine nesting:

.child {
  font-size: 2em; /* 40px */
}

.grandchild {
  font-size: 2em; /* 80px */
}

This compounding effect is where things can go out of control in complex layouts.

Where em works well:

It shines inside self-contained components where you want elements to scale relative to each other—like buttons, cards, or modals.

rem: The Reliable Default

If you want consistency across your entire project, rem is your best friend.

It always refers back to the root (html) font size:

html {
  font-size: 16px;
}

h1 {
  font-size: 2.5rem; /* 40px */
}

No matter where the element sits in the DOM, the value stays predictable.

This is why most modern CSS systems prefer rem for typography and spacing.

vw: Built for Responsiveness

vw is tied directly to the screen width.

.container {
  width: 90vw;
}

This means your layout automatically adapts:

• Larger screen → bigger layout

• Smaller screen → smaller layout

It’s perfect for fluid designs, but using it alone for text can cause issues—text may become too small on mobile or too large on wide screens.

A Practical Base Setup

Here’s a clean starting point that works for most websites:

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

.container {
  width: 90vw;
}

This gives you consistency + responsiveness without complexity.

Modern Best Practice: Using clamp()

One of the most practical techniques in modern CSS is combining rem and vw using clamp().

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

What’s happening here:

• Minimum → 1.5rem (24px)

• Fluid → 4vw (scales with screen)

• Maximum → 3rem (48px cap)

This ensures your text is always readable and never extreme.

More Real-World clamp() Examples

Responsive Heading

h2 {
  font-size: clamp(1.25rem, 3vw, 2.5rem);
}

Paragraph Text

p {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}

Section Spacing

.section {
  padding: clamp(1rem, 5vw, 4rem);
}

Container Width

.container {
  width: clamp(300px, 80vw, 1200px);
}

Why clamp() is Better Than Media Queries (Sometimes)

Instead of writing multiple breakpoints like this:

@media (max-width: 768px) {
  h1 { font-size: 24px; }
}

You can often replace it with one clean line using clamp().

Less code, smoother scaling.

So, Which One Should You Use?

In real-world projects, the answer isn’t choosing one—it’s combining them smartly.

• Use rem for typography and spacing

• Use vw for layout and responsiveness

• Use em only when component-level scaling is needed

• Use clamp() to balance everything

If you stick to one rule:

Default to rem, enhance with vw, control with clamp().

Final Thoughts

Good CSS isn’t about using fancy units—it’s about choosing predictable, scalable patterns.

Start simple:

• rem → foundation

• vw → responsiveness

• clamp() → control

Once you get this combination right, your layouts become much easier to manage as your project grows.

The post Difference Between em, rem and vw in CSS (With Examples) appeared first on Shopify Freelancer | Wordpress Freelancer.

1. First of all when you heard about new thing, then you get many question in mind, that how it will work, how it will look, will it give best results etc..etc.. So for that Logmatic.io providing you free trial for 14 days. You can signup and use it free for 14 days and check all features and results. We know after signup for free trial you will love it because it have lots of features which you cant ignore.
2. Important is it is very easy to setup, you dont need to process or configure any log, data, events. You just send any type of logs to Logmatic.io and it will process that log, event for you. In short you will not need any agent to process your logs.
3. Many automated integration examples available for Logmatic like Windows, Linux, Heroku or docker logs, devices with iOS, code language with PHP Symfony or Ruby on Rails, browsers with JS library, servers with Apache & NGINX.
4. You will find for other platforms you need to put provided code on your server, but for Logmatic no need to put any Logmatic.io code to your server.
5. It works with Apache, Ngnix, Firewalls, Syslogs, Key/value patterns. If you are working with nodejs then your nodejs logging can be effectively done by Logmatic.io.
6. To investigate user can use many complex queries like AND, OR, exclusions, Wildcards. It have very powerful investigate capacity.
7. Granular level bring down to log level. It also show you real time search and real time log.
8. Best things for user is it provide beautiful, dynamic dashboards for data visualization. There are many things available on dashboard are pie charts based on counts / sums / averages / percentiles / calculated metrics, Time series & filtered metrics, geo flow charts, maps, pivot table. By a single click it will show you lots of log, data, filtered data which is very useful.
9. Logmatic have alert system too by which you can get alerts for log analyses, search queries, user thresholds via email, Slack, Pagerduty, HipChat.
10. For developers, they can integrate Logmatic to other apps, CRM, and BI tools via RESTful API.
11. Developers can run and deploy test from user interface, it can easily recognize Operating system,Smart phone Devices, Web browsers etc..

Video for Dynamic Dashboard :

Video of Investigation :

Video of Data collection :

Logmatic is best log and event management plaform avaulable out there. Its feature are very useful and easy to use. Its design is cool. They have alomost eveything a log and event management platform should have. Signup and try it! We are sure you will surely like it. If you are using this then let us know your experience in comments or have any query then ask in comments!

The post Logmatic.io – Data Analyzer Platform for Log and Events appeared first on Shopify Freelancer | Wordpress Freelancer.

<meta name="format-detection" content="telephone=no">

Put above meta tag in “<head>” tag of your webpage and then you will see that default link on telephone number will be removed.

I hope this post solve your time and issue. Let me know if you have any thoughts in comments.

The post Remove Styling Of Telephone Numbers From Web Page appeared first on Shopify Freelancer | Wordpress Freelancer.

Now I am working alone as PHP Freelancer and I have to solve this error from myself. So I knew that this error came because of W3 Total Cache plugin, Even you uninstalled this plugin you can get this error. So I was just amazed that I uninstalled plugin but still I am getting error related to this plugin.So after searching I found that we need to remove somethings related to w3 total cache plugin manually.

So below are one file and one folder which you have to remove manually to get rid of this error :

1. Folder: /wp-content/cache/

2. File: /wp-content/advanced-cache.php

Delete these one folder and one file from your wordpress site and Voila!~ You will see error solved.  This will surely solve your issue.

If you have any other problem related to this then you can post in comment or if you have any other easy solution write down in comments.

The post Solution of Fatal error: Call to undefined function w3tc_button_link() appeared first on Shopify Freelancer | Wordpress Freelancer.

If you got a condition where you want to show social icons but you want to show it outside loop then you can use it as shown below :

<?php
    $social_sharing_toolkit = new MR_Social_Sharing_Toolkit();
    echo $social_sharing_toolkit->create_bookmarks();
?>

Also if above solution not working for you it means your global variable for post data not set and thats why it is not getting post data and hence not working. So in that case you can use below code snippet in which you can pass post link and post title.

<?php
    $social_sharing_toolkit = new MR_Social_Sharing_Toolkit();
    echo $social_sharing_toolkit->create_bookmarks('{your-link}', '{your-title}');
?>

So in above snippet you need to replace ‘{your-link}’ with your post link variable and ‘{your-title}’ variable with post title variable. So this is way by which you can use social sharing toolkit plugin outside loop.

If you are facing any issue to use this plugin then write down in comments I will try to help you.

The post WordPress Use Social Sharing Toolkit Plugin Outside Loop appeared first on Shopify Freelancer | Wordpress Freelancer.

So we will take simple example in which there are six div tags three div have id ‘red’ and other three have id ‘green’, on page load we will simple make background color red for id ‘red’ divs and green for id ‘green’. So below is html :

<div id="red">1</div>
<div id="green">2</div>
<div id="red">3</div>
<div id="green">4</div>
<div id="red">5</div>
<div id="green">6</div>

Now below is jQuery code :

$(function() {
 $('[id="red"]').css('background-color', 'red');
 $('[id="green"]').css('background-color', 'green');
});

So above code will make all red id div to red and green id div to green color. We have used attribute here by using id to go through each id. Usually we use simple ‘#’ with id like this :

$(function() {
 $('#red').css('background-color', 'red');
 $('#green').css('background-color', 'green');
});

mostly we use above code but above code only make first div red and first div green and dont do anything with other elements, So to go through each element with same id we can use attribute as I shown in second code.

Usually in html there shouldn’t be multiple elements with same id but if you got any case in which you have multiple elements with same id you can use this code it will work smoothly.

Below is jsfiddle in which you can see live preview of above code :

I hope this code will help you. If you have any thoughts or suggestion you can post them in comments.

The post How To Work With jQuery Multiple Elements With Same Id appeared first on Shopify Freelancer | Wordpress Freelancer.

So I am taking one example, So I can explain all things easily. We have one ul with five li elements and below ul we have one link with id ‘test’. Now when page loads, on base of link we will select first li of above ul and make first li background color RED.Here is our HTML :

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<a id="test">Select First li from above ul</div>

Below is jQuery to select first li on the base of a link with id “test” :

$(function() {
   $('#test').prevAll("ul").children("li:first").css('background-color', 'red');
});

Now you can see in above code we just call jquery code when page load to select first child element of previous element. So when page load jQuery will get to previous ul then find first children of selected ul by using ‘children(“li:first”)’ and then make its background color RED.

Here is jsfiddle to see this example result live :

If you want to select first child of previous element by click on link or button then you can call click event and then use above code accordingly. I hope this code help you and save your time. If you have any other idea or trick to achieve same result then do let us know in comments.

I am PHP Freelancer, Hire PHP Developer India and PHP Freelancer India. If you have any projects related to WordPress or PHP you can contact me.

The post How To Get or Select Child Element Of Previous Element In jQuery appeared first on Shopify Freelancer | Wordpress Freelancer.

So First we will fetch latest 5 posts then use loop and then get featured image for each post and then show it. So below is code to achieve it :

<div id="header_right">
<?php query_posts('showposts=5'); ?>
<?php while (have_posts()): the_post(); ?>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),  'medium' ); ?>
<a href="<?<span class=">php echo get_permalink(); ?>"><img alt="" src="<?php echo $image[0]; ?>" /></a>
<?php endif; ?>
<?php endwhile;
wp_reset_query();
?>
</div>

Above code will show 5 featured images from latest 5 posts. In above code line number 2 used to query latest 5 posts and then we simply start while loop to go through each posts. In 4th line we checked that current post have featured image attached or not? If post will not have featured image then it will skip featured image for this post and then check for next post. In 5th line we are using ‘wp_get_attachment_image_src’ wordpress function to get featured image link or url. You can pass ‘thumbnail’,’large’,’full’ instead of  ‘medium’. For more information check ‘wp_get_attachment_image_src‘.Next in 6th line we simple each image url in image tag. In 7th and 8th line end if and end while loop. Line number 9 is important to reset the loop because we customize parameters.

So in this way we can make a section in WordPress to show featured images from latest posts. I hope this posts will help someone. If you have any questions regarding this or want any help regarding this you can post in comment.

I am PHP Freelancer, Hire PHP Developer India and PHP Freelancer India. If you have any projects related to WordPress or PHP you can contact me.

The post How To Get List Of Featured Images From Latest Posts In WordPress appeared first on Shopify Freelancer | Wordpress Freelancer.