Shopify Code Snippets

Get started with Code Snippets

Code Snippets is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

# Basic Documentation

Description__

    Get site URL
    https://shopify.dev/themes/tools/theme-kit

    Install themekit using command
    choco install themekit

    after run command check themekit in your system at location
    C:\Program Files\themekit

    go to System Environment Variable
    click on path and create new with  =  C:\Program Files\themekit

    Create config.yml
    and add this code 
    development:
    password: [your-theme-kit-password]
    theme_id: "[your-theme-id]"
    store: [your-store].myshopify.com

    go to Apps section in your store
    create new app there with name themekit
    and give theme template read write access to app

    open cmd and run command for download theme on local
    theme download 
    theme watch
    theme watch --allow-live

# Get Basic Things

Description__

    include css/js/assets in liquid | asset_url access your assets folder
    {{ 'your-script.js'  | asset_url | script_tag }}
    {{ 'your-styles.css' | asset_url | stylesheet_tag }}
    {{ 'your-image.jpg' | asset_url | image_tag }}

    ===============

    Include header , footer & sections in liquid
    {% section 'header' %}
    {% section 'footer' %}
    {% section 'testden-sec' %}

    Create snippet and paste your HTML code there then call at where your schema defined using
    {% include "gallery-html" %}

    ===============

    1. Print page title in liquid
    {{ page.title }}

    ===============

    2. Print page content in liquid
    {{ page.content }}

    ===============

    3. Print page handle in liquid
    {{ page.handle }}

    ===============

    4. Print product title in liquid
    {{ product.title }}

    ===============

    5. Print product description in liquid
    {{ product.description }}

    ===============

    6. Print product price in liquid
    {{ product.price | money }}

    ===============

    7. Money without currency
    {{ product.price | money_without_currency }}

    ===============
        
    8. Get product handle
    {{ product.handle }}

    ===============

    9. Get product absolute URL
    {{ product.url }}

    ===============

    10. Get site URL
    {{ shop.secure_url }}

    ===============

    11. For commment in liquid files
    {% comment %}
    Your Comment
    {% endcomment %}

    ===============

    13. Plus Addition
    Adds a number to another number.
    {{ 18 | plus: 2 }}

    ===============

    {% assign a = 10 %}
    {% assign b = 15 %}
    {{ a | plus: b }}

    ===============

    14. Minus Addition
    {{ 18 | minus: 3 }}

    ===============

    15. Multiplication 
    {{ 5 | times: 3 }}

    16. max_blocks for blocks
    There’s a limit of 16 blocks per section. You can specify a lower limit with the max_blocks attribute:
    ===============
    "max_blocks": 5,

    ===============
    {% %} == Loops 
    {{}} == echo
    {% assign age = 24 %} create var in liquid
    {{ age }}
    ===============

    # In shopify url name is called Handle (like in WP called Permalink)

    ============
    Useful links
    ============

    Basic dynamic schema 
    ===============
    <a href="./basic-schema.html">Check Here</a>

    Basic dynamic schema for gallery
    ===============
    <a href="./basic-schema-for-gallery.html">Check Here</a>

    Pure Card Gallery
    ===============
    <a href="./pure-card-gallery.html">Check Here</a>

    https://www.youtube.com/watch?v=1cQca9E1fCQ&list=PLozpfQW4uw21RcDXeUTrAf1_-P7cP6HmL&index=16

    ===============

    https://shopify.dev/themes/architecture/sections/section-schema

    ===============

    https://shopify.github.io/liquid/basics/introduction/

    ==============

    https://www.shopify.com/partners/blog/how-to-create-your-first-shopify-theme-section
    ===============


    https://community.shopify.com/c/shopify-design/product-pages-allow-pre-orders-for-products/m-p/625914/highlight/true#M160624

    ===============

    Product pages - Get customization information for products

    ===============

    https://community.shopify.com/c/shopify-design/product-pages-get-customization-information-for-products/m-p/616525

    ===============

    Ui-elements-generator

    ===============

    https://ui-elements-generator.myshopify.com/pages/line-item-property

    ===============

    How to add Products Reviews (using App)
    App Name :- Products Reviews
    Download and install then follow steps show in app.

    ===============

    Product pages - Add tabs to product descriptions
    Open link mentioned below and follow steps:-
    https://community.shopify.com/c/shopify-design/product-pages-add-tabs-to-product-descriptions/td-p/615138

    ===============

    Add Product to Cart without Page Load Shopify
    Open link mentioned below and follow steps:-
    https://community.shopify.com/c/shopify-design/product-pages-stay-on-the-product-page-after-adding-products-to/td-p/616440

    ===============

    Install Collapsible Accordion Tabs on Shopify Products in Liquid |
    Open link mentioned below and follow steps:-
    https://www.envision.io/blogs/ecommerce-pulse/28832705-how-to-add-an-faq-accordion-to-your-shopify-store

# Create an Array in Liquid

Description__

    {% assign fruits = ["orange", "apple", "peach"] %}
    {% assign fruits = "orange,apple,peach" | split: ',' %}
    {% for fruit in fruits %}
        {{ fruit }}
    {% endfor %}

# Create custom menu in shopify

Description__

    Paste code in header.liquid
    <header class="liquid">
        <nav role="navigation">
            <ul>
            {%- for link in linklists.main-menu.links -%}
                <li>
                <a href="{{ link.url }}" {% if link.active %}aria-current="page"{% endif %}>
                    {{ link.title }}
                </a>
        
                {%- if link.links != blank -%}
                    <ul>
                    {%- for child_link in link.links -%}
                        <li>
                        <a href="{{ child_link.url }}" {% if child_link.active %}aria-current="page"{% endif %}>
                            {{ child_link.title }}
                        </a>
        
                        {%- if child_link.links != blank -%}
                            <ul>
                            {%- for grandchild_link in child_link.links -%}
                                <li>
                                <a href="{{ grandchild_link.url }}" {% if grandchild_link.active %}aria-current="page"{% endif %}>
                                    {{ grandchild_link.title }}
                                </a>
                                </li>
                            {%- endfor -%}
                            </ul>
                        {%- endif -%}
        
                        </li>
                    {%- endfor -%}
                    </ul>
                {%- endif -%}
        
                </li>
            {%- endfor -%}
            </ul>
        </nav>
    </header>

# Condition/Statements

Description__

    ===== Simple If-Else ======

    {% assign myAge = 24 %}
    {% if myAge == 24 %}
        Your Age is {{ myAge }}
    {% else %}
        You are not awesome!
    {% endif %}

    ===== and operator ======

    {% assign myAge = 24 %}
    {% if myAge == 24 and myAge < 20 %}
        Your Age is {{ myAge }}
    {% else %}
        You are not awesome!
    {% endif %}

    ===== Switch Statement ======

    {% assign handle = "cake" %}
    {% case handle %}
        {% when "cake" %}
            This is a cake
        {% when "cookie", "biscuit" %}
            This is a cookie
        {% else %}
            This is not a cake nor a cookie
    {% endcase %}

# For Loop in Liquid

Description__

    {% for i in (1..10) %}
    {% if forloop.first %}
        Loop is One 

    {%  if forloop.last %}
        Loop is Last 

    {% else %}
        Loop is {{ i }} 

    {% endif %}
    {% endfor %}

# Display all product images in liquid

Description__

    {% for image in product.images %}
        <img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
    {% endfor %}

# Create Custom Theme settings in Config > settings_schema.json

Description__

    {
    "name" : "Custom Settings By Mv",
    "settings": [
            {
                "type": "paragraph",
                "content": "This is the custom settings by MV"
            },
            {
                "id": "custom_settings_title",
                "type": "text",
                "label": "Custom Settings Label",
                "default": "Title"
            },
            {
                "id": "theme_alignment",
                "type": "text",
                "label": "Custom Theme Alignment",
                "default": "left"
            }
        ]
    }

    //Then call at anywhere using 
    {{ settings.your_settings_id }}

# Display Product Tags

Description__

    <p class="tags-list">
        {% for tag in product.tags %}
            <a href="/collections/all/{{ tag | handleize }}">
                <span clsas="el-icon-tag">{{ tag }}</span>
            </a>
        {% endfor %}
    </p>


    //if condition in tags
    <p class="tags-list">
        {% for tag in product.tags %}
            {% if tag contains "personal_box" %}
                //execute code when tag personal_box is availale on product tags 
            {% endif %}
        {% endfor %}
    </p>

# Direct Checkout with one Click | Skip Cart Page Shopify

Description__

    In product template add this schema 
    {
        "type": "checkbox",
        "id": "enable_skip_cart",
        "label": "Enable Skip Cart Option",
        "default": false
    }

    
    //then add this above to add to cart button
    {% if section.settings.enable_skip_cart %}
        <input type="hidden" name="return_to" value="/checkout/"/>
    {% endif %}

# Display all product variants in liquid

Description__

    {% for variant in product.variants %}
        {{ variant.title }}
    {% endfor %}

# Make section Dynamic (Basic Schema)

Description__

    {% comment %}
    //Call settings for dynamic section
    {% endcomment %}
    {{section.settings.custom_text_title }}
            

    {% comment %}
    //schema settings for make dynamic section
    {% endcomment %}
    {% schema %}
        {
        "name": "Custom Sec By MV",
        "settings": [{
            "id": "custom_text_title",
            "type": "text",
            "label": "Custom Label",
            "default": "Title"
        }]
        }
    {% endschema %}

    {% stylesheet %}
    {% endstylesheet %}

    {% javascript %}
    {% endjavascript %}

# Sections enable disable using checkbox (Paste in your settings)

Description__

    {
        "type": "checkbox",
        "id": "enableText",
        "label": "Enable Text",
        "default": true
    }

    {%- if section.settings.enableText -%} //enableText is id
        {% comment %}
            //Code that will execute if the checkbox is ticked in the theme customizer 
        {% endcomment %}
        
        {{section.settings.custom_text_title }}
    {%- endif -%}

# Configure Shopify Section with CSS (Paste in your settings)

Description__

    {
        "type": "select",
        "id": "textPosition",
        "label": "Position",
        "options": [
            {
                "value": "left",
                "label": "Left"
            },
            {
                "value": "center",
                "label": "Center"
            },
            {
                "value": "right",
                "label": "Right"
            }
        ]
    }

    Then configure in css using
    <div style="text-align: {{ section.settings.textPosition }}">{{section.settings.custom_text_title }}</div>

# Presets are default configurations of sections for Home Page

Description__

    //Paste after = "settings": [],
    "presets": [
        {
            "name": "custom-text",
            "category": "Custom"
        }
    ]

    //Gallery display for home page
    "presets": [
        {
            "name": "Custom Gallery",
            "category": "Custom",
            "blocks" : [
                {            
                    "type" : "gallery"
                },
                {
                    "type" : "gallery"
                }
            ]
        }
    ]

# Make Image Field (dynamic)

Description__

    {
        "id": "customImage",
        "type": "image_picker",
        "label": "Custom Image"
    }
    //then display at any where
    {% if section.settings.customImage %}
        <img src="{{ section.settings.customImage | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
    {% endif %}

# Create Gallery using blocks (schema for block)

Description__

    {
    "name": "Custom Gallery",

        "blocks": [
            {
                "type": "gallery",
                "name": "Gallery",
                "settings": [
                {
                    "id": "galleryImage",
                    "type": "image_picker",
                    "label": "Gallery Image"
                },
                {
                    "type": "checkbox",
                    "id": "galleryImageCheck",
                    "label": "Enable Gallery Image",
                    "default": true
                }
                ]
            }
        ]
    }

# Create Gallery with URL using blocks (schema for block)

Description__

    {
    "name": "Custom Gallery",

        "blocks": [
            {
                "type": "gallery",
                "name": "Gallery",
                "settings": [
                {
                    "id": "galleryImage",
                    "type": "image_picker",
                    "label": "Gallery Image"
                },
                {
                    "id": "galleryUrl",
                    "type": "url",
                    "label": "Gallery Image Url"
                },
                {
                    "type": "checkbox",
                    "id": "galleryImageCheck",
                    "label": "Enable Gallery Image",
                    "default": true
                }
                ]
            }
        ]
    }

# Display Gallery

Description__

    <div class="gallery">
        {% for block in section.blocks %} 
            <div class="gallery-item">
            {%- if block.settings.galleryImageCheck -%} 
                <a href ="{{ block.settings.galleryUrl}}">
                    <img src="{{ block.settings.galleryImage | img_url: '1024x1024' }}"/>
                </a>
            {%- endif -%}
            </div>
        {% endfor %}
    </div>

# Add custom text box on shopify Product

Description__

    *In the Templates directory, click Add a new template.
    *Choose product from the drop-down menu, and name the template customizable:
    *Click Create template. This creates a copy of your product.liquid template called product.customizable.liquid. The new file will open in the code editor.
    *Find the following line of code:

    {% section 'product-template' %}
    

    Replace it with:

    {% section 'product-customizable-template' %}
    *Click Save.
    *In the Sections directory, click Add a new section.
    *Name your new section file product-customizable-template. Click Create section. Your new file will open in the code editor.
    *Delete all of the default code so that the file is empty. Copy all of the content from your product-template.liquid file (in the Sections directory), and paste it into your new product-customizable-template file.
    Click Save.

    *After that you need to follow some steps available at 
    https://ui-elements-generator.myshopify.com/pages/line-item-property

# Product Template Related

Description__

    Add color swatches to products | Follow the url below
    https://community.shopify.com/c/shopify-design/product-pages-add-color-swatches-to-products/td-p/616427

    All Products Template :- Sections > collection-template.liquid
    Products Grid :- Snippets > product-grid-item.liquid