Categories
Product Page Shopify Tech

Use all_products in a Shopify Theme

In this liquid Shopify post, we’ll be looking at a way to access product information using all_products. Here’s a quick example:

{{ all_products["product-handle"].id}}

Note

all_products uses product handle as its arguement. While creating the product the handle is created automatically, but if the product title changed the handle is not updated automatically it needs to be changed and do the changes wherever neccessary.

By using all_products one can access any product related property:

all_products["product-handle"].handle
all_products["product-handle"].tags
all_products["product-handle"].template_suffix
all_products["product-handle"].title
all_products["product-handle"].type
all_products["product-handle"].url
all_products["product-handle"].variants
all_products["product-handle"].vendor
all_products["product-handle"].id
all_products["product-handle"].featured_image
all_products["product-handle"].images
all_products["product-handle"].image
all_products["product-handle"].available
all_products["product-handle"].collections
all_products["product-handle"].compare_at_price_max
all_products["product-handle"].compare_at_price_min
all_products["product-handle"].compare_at_price_varies
all_products["product-handle"].content
all_products["product-handle"].description
all_products["product-handle"].first_available_variant
all_products["product-handle"].options
all_products["product-handle"].price
all_products["product-handle"].price_max
all_products["product-handle"].price_min
all_products["product-handle"].price_varies
all_products["product-handle"].selected_variant
all_products["product-handle"].selected_or_first_available_variant

When to use all_products

all_products makes a great option when you have need of outputting a single, or small number of products, that won’t frequently change.

You can explore more by going through this article in detail

Categories
Product Page Shopify Tech

Add 3 or more specific related products to a product page using only Liquid

We’ll be looking at a way to access product information for adding specific related products on a product detail page. 

We can achieve this by using all_products

Let us have a quick look at what’s happening. the syntax is pretty simple, all_products takes product handle as its arguement.

For this week’s Liquid Shopify tutorial, we’ll be looking at a way to access product information using all_products and metafields to add specific related products.

EXAMPLE for related products.

The logic for this code is pretty simple

  • get the metafield
  • split the metafield value
  • loop the array
  • use all_products to reference a product, and show title on the page.
{%- comment -%}
  Grab product handles from metafield.
  Loop the handles, showing the product title.
  The metafields fields value to be stored:
  Namespace: related
  Key: products
  Value: (comma separated String value)
{%- endcomment -%}

{%- if product.metafields.related.products != blank -%}
  <ul>
    {%- assign relatedProductArray = product.metafields.related.products | split:',' -%}
    
    {%- for relatedProductValue in relatedProductArray -%}
    {%- assign b = all_products[relatedProductValue] -%}
    <li><a href="/products/{{ relatedProductValue }}">{{ b.title }}</a></li>
    {%- endfor -%}
  </ul>
{%- endif -%}

Also look at the post Create customizable products

Categories
Cart Product Page Shopify Tech

Create customizable products/add 1 or more custom fields in Shopify without an app

Sometimes you need to let your customers customize a product before checkout on your Shopify store by adding custom fields. For instance, you offer monograms, or you need to let them choose from other custom options.

There are apps that can do this, but they are mostly expensive and they bloat your store by adding extra scripts and slows down your site.

Fortunately, a lot you can do to offer customized products without paying for an app or hiring a developer. Plus, these methods only requires a tiny amount of code (no JavaScript), so your site doesn’t get unnecessarily slowed down.

Steps for the Custom fields

Below is the example of the types of custom product options you can set up. You can create any combination of the options shown below, including text inputs (small or large text areas), checkboxes, file uploads, drop-down selects, and radio buttons.

Custom Fields
View live demo →

1. Create a new product template

In your Shopify Dashboard, go to Online Store > Themes > … > Edit HTML/CSS.

Create customizable products/add 1 or more custom fields in Shopify without an app 7

In the Templates section, click “Add a new template.”

Create customizable products/add 1 or more custom fields in Shopify without an app 9

In the window that appears, choose product from the template & name it ‘ custom ‘.

Create customizable products/add 1 or more custom fields in Shopify without an app 11

Click on the Create template button.

After this, go to products from the dashboard, open particular product you want to customize & choose template ‘ custom from right bottom side of the product dashboard.

Create customizable products/add 1 or more custom fields in Shopify without an app 13

Note: if your theme uses section instead of creating a product template create the section template and the functionality will still work the same

2. Add code for the form fields

Now the question arises where to add the code? Well the code need o be inside the form tag

You can add the code wherever you want the fields to appear on the site. I recommend adding it above the quantity field.

In some themes, you’ll not find the form in the template file, you can find it in the snippets section and look for a Snippet called “product-form,”

In the themes which works on sections, check in the Section titled “product-template.liquid”.

Create customizable products/add 1 or more custom fields in Shopify without an app 15
For the Themes which uses section

You can add the custom fields code just above the highlighted text below

Create customizable products/add 1 or more custom fields in Shopify without an app 17

add the following code:

{% if template contains 'custom-1' %}

[replace this with your custom fields]

{% endif %}

Small Text

<div class="line-item-property__field">
  <label for="customize-text">Customize Text</label>
  <input id="customize-text" type="text" name="properties[Customize Text]">
</div>

Radio Buttons

<div class="line-item-property__field">
    <label>Choose an option</label>
    <div>
      <input required class="required" type="radio" name="properties[Choose an option]" value="Option 1"> 
      <span>Option 1</span>
    </div>
    <div>
      <input required class="required" type="radio" name="properties[Choose an option]" value="Option 2">
      <span>Option 2</span>
    </div>
    <div>
      <input required class="required" type="radio" name="properties[Choose an option]" value="Option 3">
      <span>Option 3</span></div>
    </div>
</div>

Large Text(Custom Message)

<div class="line-item-property__field">
   <label for="custom-message">Custom Message</label>
   <textarea required class="required" id="custom-message" name="properties[Custom Message]">
   </textarea>
</div>

Checkboxes

<div class="line-item-property__field">
   <label>Optional features</label>
   <div>
     <input required class="required" type="checkbox" id="Feature-1" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature 1">
     <span for="Feature-1"> Feature 1</span>
   </div>
   <div>
     <input required class="required" type="checkbox" id="Feature-2" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature 2">
     <span for="Feature-2"> Feature 2</span>
   </div>
   <div>
     <input required class="required" type="checkbox" id="Feature3" hidden-data="Optional-Features" onchange="fillHidden('Optional-Features')" value="Feature3">
     <span for="Feature3"> Feature3</span>
   </div>
   <input type="hidden" id="Optional-Features" name="properties[Optional Features]">
   <script>
    function fillHidden(hiddenname) {
    var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
    var hiddenfield = document.getElementById(hiddenname);
    hiddenfield.value = ""
    var i;
    for (i = 0; i < checkboxes.length; i++) {
      var x = checkboxes[i];
      if(x.checked){
        if(hiddenfield.value==""){
          hiddenfield.value = x.value;
          }else{
          hiddenfield.value = hiddenfield.value + ", " + x.value; 
          } 
        }
      }
    }
  </script>
</div>

Dropdown select

<div class="line-item-property__field" style="margin: 0 0 20px;">
   <label>Choose an Option</label>
   <select required class="required" id="choose-an-option" name="properties[Choose an Option]">
     <option value="Option 1">Option 1</option>
     <option value="Option 2">Option 2</option>
     <option value="Option 3">Option 3</option>
   </select>
</div>

File upload

<div class="line-item-property__field">
  <label for="custom_photo">Photo (JPG or PNG)</label>
  <input required id="custom_photo" type="file" name="properties[Photo]">
</div>

Note: Kindly note that the file upload will not work if the cart is of drawer functionality / popup (ajax) cart update.

Customize cart to show the custom options

Some themes already have the necessary code present on the cart page to show the line item properties. To check and see if your theme already have this, just try adding the product in cart which has the line-item properties if the data is shown, then its already present.

if its not then next step is waiting for you 🙂

1) In your Theme Editor, open the cart.liquid template.

2) Find the code {{ item.product.title }}. Just below it, add the following code:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}

Voila its done, Now you can test the baby out!

Incase of any query do comment down below, will surely get back to your queries if any.

Categories
Panel Discounts Shopify

Create 1 or more discount codes

Create fix value or percentage discount codes

Steps for creating discount codes

  1. Login into your shopify store, navigate to discount section on the left sidebar.
  2. Then click on Create discount button on top right corner of page.
  3. You will be given 2 options – a) Discount code b) Automatic discount
  4. Click on option a i.e. Discount code
  5. You will be redirected to Create discount code page
  6. Enter the name of the discount code or else click on Generate code link on top right of that section (it will create a random discount code for you)

Types

You will see 4 types of discount you want for your store.

  1. Percentage
  2. Fixed amount
  3. Free shipping
  4. Buy X get Y
Create 1 or more discount codes 19
Types of discount

If you select 1st option the next section you will see is ‘value’

  1. Enter the % discount in the box
  2. then just below it you will see another subsection called ‘applies’ select from the 3 options specified in below figure according to your requirement.

Below is the image for ref.

Create 1 or more discount codes 21
Extra info for % discount option

If you select 2nd option the next section you will see is ‘value’ but with fixed value as text-box

  1. Enter the fixed value discount in the box for e.g. if you want Rs. 500 off so you will write 500 in the text-box specified in the image below
  2. then just below it you will see another subsection called ‘applies’ select from the 3 options specified in below figure according to your requirement.
Create discount
Extra info for Fixed amount discount option

Create free shipping discount codes

If you want to give your customer 3rd discount typcke i.e. free shipping, you can do so by following steps.

The steps for it are as follows:

  • From the 4 options listed in the type section select the 3rd Free Shipping ( check below pic for reference )
Create 1 or more discount codes 23
Free Shipping

If you select Free Shipping as type of discount, the next section you will see is ‘Countries’ with 2 sub-sections listed below:

  1. All Countries / Selected Countries – 2 options choose as per your requirement.
  2. Shipping Rates – where you have the provision exclude shipping rates over a certain amount. ( Enter the amount in the textbox provided )

check below pic for the reference:

Create 1 or more discount codes 25

Now comes the common section which is common to all 4 types of discount. Below is the list:

  • Minimum Requirements
  • Customer eligibility
  • Usage limits
  • Active dates

Common Sections for all 4 types

Minimum Requirements:

This section provides us with 3 options which are:

  1. None – If you have no requirements to enable the discount.
  2. Minimum purchase amount (₹) – If you choose this, it provides an empty textbox for the amount to enter which applies to an entire order ( the discount code will only work if minimum total amount of x is spend )
  3. Minimum quantity of items – If you choose this, it provides an empty textbox for the minimum number of items to enter which applies to entire order ( the discount code will only work if the minimum x quantity of items is in the cart )

Below is the pic for reference:

Create 1 or more discount codes 27
Create 1 or more discount codes 29
Create 1 or more discount codes 31

Customer eligibility

This section also provides us with 3 options which are:

  • Everyone – The discount code can be used by any customer.
  • Specific groups of customers – The discount code can be used only by the specific group of customers. You need to choose the group from the select box which comes when you choose this option. ( To create group of customers click here to know the steps. )
  • Specific customers – The discount code can be used only by the specific customers you choose from the select box which comes when you choose this option.

Below is the pic for reference:

Create 1 or more discount codes 33
Create 1 or more discount codes 35
Create 1 or more discount codes 37

Usage limits

This section is for the numbers of times the use of discount coupon. It provides us with 2 checklist which are:

  • Limit number of times this discount can be used in total
  • Limit to one use per customer

Choose from the above listed checklist based on your requirements.

Below is the pic for reference:

Create 1 or more discount codes 39
Usage Limits

Active dates

This section is for the date and time when you want the discount code to get active for the customers. It also has the provision for end date as well.

Below is the pic for reference:

Create 1 or more discount codes 41
Active date
Create 1 or more discount codes 43
Active date with end date

After entering all the necessary data, you can now save the discount code. Now your customers will be able to use the discount code.

Duplicate already created discount

Categories
Discounts Panel Shopify

Shopify Discount Panel

For any e-commerce site Discount section plays a very important role in their sales.

Be it a percentage discount in Rs., Dollars or any other country currency. One can also create code for free shipping discount.

Discount Section

You can also see how to create automated collections in your admin

Categories
Panel Orders Shopify

Create/Draft Order manually through admin panel

You can create orders for your customers and send them invoices from the Shopify admin, this section can be used when payment has been done but order has not been created due to any technical issues or network issues.

Steps to Create/Draft Order:

  • Login to your shopify admin
  • From your Shopify admin, from the left side panel go to Orders & Click Create order button from top right of the panel.

Add Products

Steps:

  • Open draft order from the Drafts page in your admin.
  • In Order details section, enter name of the product that you want to add to your order, or click Browse products to view a list of your store’s products and collections. You can also create a custom item for the order by clicking Add custom item:(for ref. see pic below)
Add Products
  • Check the individual products or variants that you want to include in the order.
  • Click Add to order. To remove a product from the order, click the X button beside it in Order details section.
  • Check the quantity of products you have added to the order. Add one to it if its 0.

Add a customer to order

Steps:

  • Open the draft order from the Orders page in your admin where you want to add the customer to.
  • In Find or create a customer section, start entering the name of an existing customer or enter the name of a new customer if that customer is not there in the list.
  • Click the customer to assign them to the order.
  • Fill in the applicable fields in Create a new customer.
  • Click Save customer. This customer is now saved to your store.
  • Click Save.(for ref. see pic below)
Add Customer

a. Apply discount to an item

Steps:

  • Open draft order from the Orders page in your admin where you want to add discount to.
  • Click price beside the item’s name in the Order details section:(for ref. see pic below)
Add Customer
  • Set the discount in currency format or a percentage of listed price (for ref. see pic below)
Add discount
  • There is also a box for reason, if you want you can write down the reason for the discount which is totally optional, you can leave it blank as well if don’t want to mention
  • After all this Click on apply.

b. Apply a discount to the entire order

Steps:

  • Click Add discount, just beside Note: to the right
Add discount
  • Set the discount in currency format or a percentage of listed total price. This discount is applied for entire order
  • There is also a box for reason, if you want you can write down the reason for the discount which is totally optional, you can leave it blank as well if don’t want to mention
  • After all this Click on apply.(for ref. see pic below)
Add discount

Add Shipping

Steps:

  • Assuming that you are already there in create order page
  • Click on the Add Shipping just below Subtotal
Add Shipping
  • A popup occurs having a having list of shipping rates, by default custom will be selected.
  • Select the shipping rate option of your choice.
  • If you want to go ahead with Custom, then enter the custom rate name and the shipping rate accordingly.
  • Click Apply.(for ref. see pic below)
Add Tax

Turn taxes on or off

Steps:

  • Assuming that you are already there in create order page
  • Click on the Taxes just below Add Shipping
Add Tax
  • A popup occurs having a checkbox saying charge taxes, by default it will be checked.
  • You can uncheck if you want particular to not charge taxes and click on apply button inorder to save the changes

Add Tags or Notes

Steps:

  • Assuming that you are already there in create order page
  • On the right hand column, just below find or create customer you will find Tags section
  • Enter the tag names separated by a comma based on their status whether they’re captured, paid, or fulfilled.
  • If you want to select tags from previously used tags, you can do so by clicking on View all tags. Click on Apply changes to add to the order after selecting the desired tag you want to use.
  • Then Click save

Add a note

  • There is also Note section on left side below the Add product section, for special instructions for the admin while fulfilling the order.

Hope this was helpful

Categories
Panel Collection Shopify

Creating & modifying 1 or more automated collections

Collections can be created in two different ways depending on the requirement and number of products. You can create up to 5,000 automated collections. Make a note that the collections here are referred to as categories.

As of latest updates a collection can have upto 60 conditions.

Create automated collections

Learn how to create and modify an automated collection through below video:

https://www.youtube.com/watch?v=j8-HSpmy6IE&feature=emb_title

Collection Types

You can create two types of collections:

  • Automated Collection
  • Manual Collection

Below are the steps to create collection in a store.

  1. Login into your store.
  2. Go to Products > Collections > click on Create collections button on extreme top right
  3. Enter the collection name in Title section
  4. Put the the description in the description section ( if the description contains Html tags so click on ‘<>’ on right of description section )
  5. Then you have options of collection type ( select according to the requirement )
  6. if Manual  – > Select the Manual option and then save it – > you will get browse search bar where you can select which product you want to display on the listing page.
  7. if Automated – > Select the Automated option and then just below it you will get conditions that can be used to display certain products on the listing page. ( most common used condition is  ‘Product Tag’ )
  8. The Tag used in the condition must be included as tag in the particular Product on the store.
  9. Collection Availability – this controls where you want the product to be listed and shown. ( right side of the panel )
  10. Add the image of the collection which will be displayed on the listing page. ( right side of the panel )