New App and Utility

 Here are the steps to activate Order notes on Cart page in your Shopify store - Go to Shopify admin Select online store > Themes Click on Customize button for current theme Select theme settings option from left menu Select the cart option Check the "Enable cart note" checkbox Here is a demo video of how to activate order notes on the cart page of your Shopify store. This tutorial video also contains the demo to change the label text for the order notes. In the end, we will discuss one of the way to add notes fields on a particular product of the Shopify. We are using Dawn theme 12.0.0 for this demo.

Shopify product variant metafields are custom fields that allow you to store additional information about each variant of a product. This information can be used to store product-specific details and display them in the product page of Shopify. Here are the steps to create Shopify variant metafield - Go to Shopify admin panel. Click on settings Select custom data option Select the variants option Click on "Add Definition" to add to definition of Shopify product variant metafield definition. Here is demo video for the above steps : https://youtu.be/yfFl3_p_hco

Here is a quick tutorial to create Shopify free trial and setup theme. Following are the steps - Go to the website www.shopify.com Click on Start free trial button Select the required options Sign up with your account on Shopify Login to your Shopify admin From the Online store > Themes, select the theme for your Shopify store. Here is the demo showing above steps: #shopify #shopifythemes Click here to subscribe our YouTube channel : https://shorturl.at/gmqCS ------------------------------------------------------------------------------------------------------------------- Also, check out our other video based on settings Global Custom CSS using he theme settings options - https://youtu.be/nPja-jHwmPc Links for our other useful Shopify tutorial videos - Changing text & color of Buy It Now button in Shopify: https://youtu.be/LVefRmat_g0 Adding Custom CSS in Your Shopify Theme: https://youtu.be/nPja-jHwmPc Display image in Product Template using Custom.liquid block Shopify : htt

We can hide any product from the Shopify internal search by using following steps - Go to Shopify admin Open settings > Custom data Create product metafield definition with  following values  namespace: “seo" key: “hidden” value: “1” type: “number_integer” Go to the product that you want to hide and set value to 1 for above created metafield. Here is a demo video to show above steps -   #shopify #shopifythemes Click here to subscribe our YouTube channel :  https://shorturl.at/gmqCS ------------------------------------------------------------------------------------------------------------------- Also, check out our other video based on settings Global Custom CSS using he theme settings options - https://youtu.be/nPja-jHwmPc Links for our other useful Shopify tutorial videos - Changing text & color of Buy It Now button in Shopify:  https://youtu.be/LVefRmat_g0 Adding Custom CSS in Your Shopify Theme:  https://youtu.be/nPja-jHwmPc Display image in Product Template using Cust

Here is a  Shopify Tutorial on How to add favicon in your Shopify We will discuss following two methods to add favicon in Shopify - 1. Add favicon using theme settings 2. Add favicon using custom code in theme.liquid Add favicon using theme settings Following are the steps to add favicon in Shopify using theme settings - Go to Shopify admin > Online store > Themes Click on the customize button and select theme settings option from left menu. Select Logo option  Go to favicon section Upload the favicon and click on save button Add favicon using custom code in theme.liquid Following are the steps to add favicon directly in the theme.liquid - Go to Shopify admin > Online store > themes Click on more options & select edit code Open the theme.lqiuid file In the head section add following code line : <link rel= "icon" href= "[your favicon url]" type= "image/x-icon" >           The demo of above video are shown in the below video along

Here is  Easy Step-by-Step Tutorial to change Font Size, Font Style and Font Weight in your Shopify store To change the font size in your Shopify store, here are the steps Go to Shopify admin Selected Online Store > themes  Click on the customize button for current theme From the left menu, click on theme settings Select the typography option Change the font size using the control Here is a demo video showing above steps - In addition to change font size, you will learn following topics in this video - 1. Modifying Font Style: Learn how to change your Shopify store's font style to match your brand's style and message. 2. Adjusting Font Weight: Enhance the visual impact of your content by refining font thickness. 3. Advance topic - extend font size control limit in Shopify #shopify #shopifythemes Click here to subscribe our YouTube channel :  https://shorturl.at/gmqCS ------------------------------------------------------------------------------------------------------------

Shopify Dawn theme provides Buy it Now button at product page for fast checkout. Sometimes we need the text from Buy It Now to be changed to something else. This can be done by using custom CSS code given below. Steps to change text & color of Buy It Now button of Shopify - Go to Shopify Admin Open the code editor Add below custom CSS code to change text & color of 'Buy It Now' button CSS code to change text & color of 'Buy It Now' button in Shopify - <style>      . shopify -payment-button__button--unbranded {      font- size : 0 !important; background : white !important; color : black !important;      }           . shopify -payment-button__button-- unbranded ::before { content : 'Your text here' ; position : absolute; visibility : visible; top : 0 ; left : 0 ; bottom : 0 ; font- size : 14px; display : contents;      } </style> Here is the demo video to show above steps in action - #shopify #shopifythemes Click

Step-by-Step Guide to create Buy 2 Get 1 Free Discount Offer for your Shopify store  Sometimes to increase sales on your Shopify store you want to given discount offer to your customer. Buy 2 Get 1 Free is one of such discount offer. This discount offer of Shopify will be applied automatically in your cart page. Here are the steps for setting up a "Buy 2 Get 1 Free" Discount offer in your Shopify store - 1. Go to your Shopify Admin panel.  2. Access the discount section and create a Buy X Get X free offer.  3. Configure the necessary settings for the Buy 2 Get 1 offer.  4. Check the online store for discount offer applied on the required product Here is a demo video showing above steps - #shopify #shopifythemes Click here to subscribe our YouTube channel :  https://shorturl.at/gmqCS ------------------------------------------------------------------------------------------------------------------- Also, check out our other video based on settings Global Custom CSS using he t

Edit Shopify theme default content Following  are the steps to remove 'Shipping calculated at checkout' text from product & cart pages - Go to Shopify Admin > Themes > Edit default content  Search for "Calculated at checkout" at the filter tab Remove the the text of the filtered content Save Now, go back to Shopify online store and check that "Shipping calculated at checkout" is removed from product page and cart page. Here is video you can see to checkout the demo of above steps - #shopify #shopifythemes Click here to subscribe our YouTube channel :  https://shorturl.at/gmqCS ------------------------------------------------------------------------------------------------------------------- Also, check out our other video based on settings Global Custom CSS using he theme settings options - https://youtu.be/nPja-jHwmPc Links for our other useful Shopify tutorial videos - Changing text & color of Buy It Now button in Shopify:  https://youtu.be

Sometimes we need to display images in the product page of Shopify as a part of product page template. That can be done using the Custom.liquid block. Display Image in Product Template using Custom.liquid Following are the steps the display image in Product Template of Shopify - 1. Upload image in the content section of Shopify 2. Copy the URL of uploaded image 3. Go to the theme and click on customize 4. Select the product template 5. Click on add block and select custom.liquid 6. Add the HTML for image with added image URL 7. Drag the custom.liquid block at desired location Using above steps an image was added in the product page of Shopify having Dawn theme. Here is a demo video showing he above steps in action: Related Posts from this blog: 1.  How to add custom css in Shopify theme? 2.  How to hide Specific Products From the Related Products in Shopify?

Sometimes we need to add some custom CSS in the Shopify theme to edit the default display of UI elements in Shopify frontend. This custom CSS option in available under the theme settings option in Shopify admin. Adding Custom CSS in Shopify theme  Following are the steps to add Custom CSS in Shopify theme - 1. Go to Shopify store admin. 2. Open themes and click on customize. 3. Select theme settings option. 4. Open the Custom CSS option 5. Put the custom css and enable custom css option 6. Click on the save button Above will update the Custom CSS at global level for the theme. Also, custom CSS is not applicable on checkout page of Shopify. Here is a demo video to show above steps in action - #shopify #shopifythemes Click here to subscribe our YouTube channel :  https://shorturl.at/gmqCS ------------------------------------------------------------------------------------------------------------------- Also, check out our other video based on settings Global Custom CSS using he theme s

Related Products section in Shopify Shopify provides "Related products" section which helps your store visitors to get details about more products that you offers.  These related products are assigned to any product using the Shopify's algorithm. We can manage related products using following 2 methods - Using Search & Discovery app Edit related-products.liquid and write custom code to hide any product  Here is a video that covers above details : Manage Related products in Shopify - Following topics are covered in this video - 1. What is related products section in Shopify?  2. How Shopify finds related products? 3. Methods to manage related products in Shopify? 4. Manage related products using Search & Discovery app. 5. Manage related products using custom code.

In this video we are going to show you how to edit Packing slip in your Shopify store along with demo of adding logo image in the packing slips Following topics are covered in this video - 1. Introduction to Packing slip. 2. Things included in packing slips. 3. Creating packing slip in Shopify admin. 4. Checkout the default template of packing slips. 5. Edit packing slip template by adding a logo image.

Recently Google Analytics is moved to Google Analytics 4. As a Shopify store owner it is important for you to analyse the traffic which is coming to your Shopify store. Here is a demo video for the beginners to setup Google Analytics 4 account and connect the same to Shopify online store. In this video we are going to show you how to setup Google Analytics 4 in your Shopify store.  Following topics are covered in this video - 1. Setup Google Analytics account. 2. Create Google Analytics 4 property in Google Analytics account 3. Generate Google Analytics tag Id for our Shopify Store. 4. Connect Google Analytics account in the Shopify Store. 5. Select Google Analytics 4 property in the Shopify admin. In are some useful links - Create Google Analytics account - https://support.google.com/analytics/answer/9304153 Set up the Google & YouTube channel on your Shopify store - https://help.shopify.com/en/manual/promoting-marketing/create-marketing/google/setup #shopify #shopifythemes Clic

HTML provides <video> tag to embed any video in the webpage. Here is a sample of video element usage that will embed a video in your web page: <!DOCTYPE html> <html> <body> <h1> The video element </h1> <video width= "320" height= "240" controls > <source src= "[url to your video]" type= "video/mp4" > Your browser does not support the video tag. </video> </body> </html> Autoplay video in HTML web page - For the desktop devices you can simply autoplay attribute in the video tag to autoplay the video once the webpage is loaded. Sometime, it can happen when our try to autoplay video in mobile browser then instead of autoplay it just shows you a blank thumbnail. In this case you will need to use muted attribute as well.   Here is sample code for the same :   <!DOCTYPE html> <html> <body> <h1> The video element </h1> <video w

 Sometimes we requires in get previous sibling element in the HTML code and perform some operations in it like inserting any other element or get the innerHTML of previous element. We can do this using 'previousElementSibling' property of JavaScript. Here is the sample HTML and JavaScript code for the same. Get Previous Sibling HTML element : <html> <body> <div id= "firstDiv" > </div> <div id= "SecondDiv" > </div> <script> //this line will return the first div let firstDivEle = document .getElementById( "SecondDiv" ).previousElementSibling; </script> </body> </html> Here is the example to insert any element in the preivous sibling HTML element - <html> <body> <div id= "firstDiv" > </div> <div id= "Secon