Tutorials

How to add related products using product tag in Debut theme

Shopify Debut is a free theme developed by Shopify. In my opinion, this theme is good for starter shop with multi homepage section, product section,… almost everything is controlled from section. But it still lack some important functions which are needed by almost shop owner. As you all know, you can make it easy for customers to continue shopping, and drive conversions for your clients by positioning recommended products in a visible, and appropriate location on a product page.

How to Build a Customizable Logo List section on your Shopify Homepage

A necessary section for almost all Shopify Store can be named is Logo List or Logo Bar module. This section will highlight the businesses that a store deal with and assert themselves as a trustworthy and in-demand company. A highly visible, deliberately placed logo bar establishes credibility for your clients, and allows for brand storytelling through imagery, rather than text. In this tutorial, I will guide you to create this section for your Homepage.

How to automatically reset Countdown Timer on your Shopify Theme

Previously, I showed you How to add a simple Sales Countdown Timer to your Shopify Theme. This tutorial guided you to add countdown sale with a defined date. This type of coundown is useful when using to display deals from some special occasions in year, for example Black Friday, Christmas or New Year. You might need to remove it after Sale time. Today, we are going to upgrade that countdown up to make it automatically reset every day.

How to add custom properties to Product page on Shopify

As we all know, Shopify allows merchants to create maximum 3 product variant options, such as Size, Color or Materials. If you want to collect more information on your Product page, Shopify has a wonderful feature called Line Item Properties. These properties you can display with any form format like input text, textarea or select dropdown. These data will be added to cart belong with product data and appear in orders data too.

Zooming product card image on hover with Shopify Debut Theme

A store with animation when mouse in/mouse out product grid card image always attracts customer more than the others. In this tutorial, I am going to show you how to do it on Shopify Debut Theme. Zooming product card image on hover with Shopify Debut Theme Step 1: Edit your CSS From Shopify Dashboard, navigate to your Theme editor Find your theme style file, in Debut theme it is assets/theme.scss.liquid.

How to add a simple Sales Countdown Timer to your Shopify Theme

Countdown timer is a popular featured appear on almost store. It is a powerful technique to push online shoppers into making faster decisions on purchases they are thinking about. However, it’s not something that Shopify enables you to implement out of the box. Therefore, the most efficient method to add a countdown timer in Shopify is to use an app. In this tutorial, I would like to show you how to add a simple Sale Countdown Timer to your Shopify theme.

How to add a custom notification bar on Shopify theme

Based on my experience while working with Shopify theme, most of them has ability to show/hide Header bar / Top bar / Notification bar. This element is very necessary, it helps you display useful and relevant information to their online shoppers. Today, in this tutorial, I would like to show you how to add a simple one without any app. How to add a custom notification bar on Shopify theme Step 1: Add a new theme snippet The very first step adding new snippet to your theme.

How to auto change currency based on location in Shopify

Nowadays, there are few store selling products on one region with one language and one currency only. Shopify themselves have a tutorial to guide how to add multi currency to Shopify Theme. But today, I would like to tell you a bit further about how to auto change currency based on location in Shopify. How to auto change currency based on location in Shopify 1. Adding new snippet and include it From Shopify Dashboard, navigate to your Theme editor

How to edit style (CSS/SCSS) in your Shopify theme

Some of my tutorials here in my blog or even on other Shopify source require you to edit theme style (CSS/SCSS) in your theme. If you have not ever edited or worked with it before, you might get a small hesitate. So in this article, I just simply show you how to find and edit theme style file. How to edit style (CSS/SCSS) in your Shopify theme 1. Access Theme editor area From Shopify Dashboard, navigate to your Theme editor

How to Build a Customizable FAQs page using section in Shopify

FAQ or Frequently Asked Questions is a very common page, needed in every store. In many paid Shopify theme, we have already had this page enable. But almost of them does not have. Today, in this tutorial, I am going to show you how to build a FAQs page using section in Shopify without any app. Live DEMO Every part in this page will be controlled via Shopify page section which is most customizable and easy to edit to customer.