- Dessky

Most Successful Shopify Dropshipping Websites

July 1, 2022 in Blog, Collections

dropshipping-websites

If you’re seeking for helpful insights into the most successful Shopify stores, as well as the secrets that have contributed to their success, you’ve come to the right spot!

Read More →

Add a cookie compliance banner in Shopify

March 27, 2021 in Code Snippets

Cookie HTML banner saved as snippet in snippets/cookie-banner.liquid : <style> #cookies-banner { display: none; justify-content: center; align-items: center; padding: 1em; position: fixed; bottom: 0px; width: 100%; background: #fff; border-top: 1px solid #dcdcdc; } </style> <div id="cookies-banner"> <span>This website uses cookies to ensure you get the best experience on our website.</span> <button style="margin-left: 1em;" onclick="handleDecline()">Decline</button> <button […]

Read More →

Display product filter in Shopify

February 19, 2021 in Code Snippets

Display product filter: <form class="filter-form"> {%- for filter in collection.filters -%} <details class="filter-group"> <summary class="filter-group-summary"> <div> <span>{{ filter.label }}</span> {%- if filter.active_values.size > 0 -%} <span>({{ filter.active_values.size }})</span> {%- endif -%} </div> </summary> <div class="filter-group-display"> <div class="filter-group-display__header"> <span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span> {%- if filter.active_values.size > 0 -%} <a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a> {%- endif […]

Read More →

JavaScript submission of the localization form in Shopify

September 25, 2020 in Code Snippets

Because your country or language selector is a custom element and there’s no submit button included in the form, you need to submit the form through JavaScript. class LocalizationForm extends HTMLElement { constructor() { super(); this.elements = { input: this.querySelector('input[name="language_code"], input[name="country_code"]'), button: this.querySelector('button'), panel: this.querySelector('ul'), }; this.elements.button.addEventListener('click', this.openSelector.bind(this)); this.elements.button.addEventListener('focusout', this.closeSelector.bind(this)); this.addEventListener('keyup', this.onContainerKeyUp.bind(this)); this.querySelectorAll('a').forEach(item => item.addEventListener('click', […]

Read More →

Display product collection in Shopify

August 28, 2020 in Code Snippets

Here is how to display a product collection in a template. <ul> {% for product in collections.all.products %} <li><a href="{{ product.url}}">{{ product.title}}</a> {% endfor %} </ul> Save it as collection-product-list.liquid.

Read More →

List products in Shopify

July 20, 2020 in Code Snippets

<ul> {% for product in collection-product-list limit: limit_count %} <li><a href="{{ product.url }}">{{ product.title }}</a> {% endfor %} </ul>

Read More →

Display unit price in Shopify

March 20, 2020 in Code Snippets

Display unit price for line item: {% if line_item.unit_price_measurement %} {{ line_item.unit_price | money }} {% if line_item.unit_price_measurement.reference_value != 1 %} {{ line_item.unit_price_measurement.reference_value }} {% endif %} {{ line_item.unit_price_measurement.reference_unit }} {% endif %} Display unit price for variant: {% if variant.unit_price_measurement %} {{ variant.unit_price | money }} {% if variant.unit_price_measurement.reference_value != 1 %} {{ variant.unit_price_measurement.reference_value […]

Read More →

Add a contact form in Shopify

February 22, 2020 in Code Snippets

Add a contact form to your theme to allow customers to get in touch with the merchant. {% form 'contact' %} {{ form.errors | default_errors }} <div class="first-name"> <label for="first-name">First name</label> <input type="text" name="contact[first_name]" id="first-name" /> </div> <div class="last-name"> <label for="last-name">Last name</label> <input type="text" name="contact[last_name]" id="last-name" /> </div> <div class="phone"> <label for="phone">Phone</label> <input type="tel" name="contact[phone]" […]

Read More →

Add reCAPTCHA in Shopify

December 2, 2019 in Code Snippets

The necessary code for the reCAPTCHA functionality is included through the content_for_header object. This means that if a merchant has reCAPTCHA enabled, but the content_for_header object is not present, then the reCAPTCHA functionality won’t be present. The reCAPTCHA functionality is initialized based on the presence of customer, contact, and blog comment forms, and is triggered […]

Read More →

Add menu in Shopify

June 20, 2019 in Code Snippets

To add menu to your theme, you can use the linklists object to find the menu that you want to output. The default menu is the Main menu, which can be accessed with it’s handle main-menu. {% for link in linklists.main-menu.links %} <!– menu content –> {% endfor %} And here is how to display […]

Read More →

Add product media in Shopify

January 16, 2019 in Code Snippets

In Shopify merchants can add media to their products, like images, 3D models, videos, and YouTube or Vimeo videos. To display product media on the product page, and your product page content is hosted in a product.liquid section, then you might do the following: Create a snippet called media.liquid to host your media display. Render […]

Read More →

Add country selector in Shopify

September 4, 2018 in Code Snippets

Add button and a popover containing each country option. {% if localization.available_countries.size > 1 %} <localization-form> {% form 'localization' %} <div class="disclosure"> <button type="button" class="disclosure__button" aria-expanded="false" aria-controls="CountryList"> {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }}) <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 […]

Read More →

Display price and discounts in Shopify

June 3, 2018 in Code Snippets

Display the price and discounts: {% for item in cart.items %} <!– item info –> {% if item.original_price > item.final_price %} <s>{{ item.original_price | money }}</s> {% endif %} {{ item.final_price | money }}) {% if item.line_level_discount_allocations.size > 0 %} Discounts: <ul> {% for discount_allocation in item.line_level_discount_allocations %} <li> {{ discount_allocation.discount_application.title }}-{{ discount_allocation.amount | money […]

Read More →

Add security badge to your theme in Shopify

May 26, 2018 in Code Snippets

<a href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure" title="This online store is secured by Shopify" target="_blank" rel="nofollow" > <img src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-white.svg" alt="Shopify secure badge" > </a>

Read More →

Customize robots.txt in Shopify

January 24, 2018 in Code Snippets

Shopify generates a default robots.txt file that works for most stores. However, if you want to make changes to the default file, then you can add the robots.txt.liquid template in order to make the following customizations: Add a new rule to an existing group Remove a rule from an existing group Add custom rules The […]

Read More →

Display search results filter in Shopify

December 26, 2017 in Code Snippets

Display search results filter: <form class="filter-form"> <input type="hidden" name="q" value="{{ search.terms }}"> {%- for filter in search.filters -%} <details class="filter-group"> <summary class="filter-group-summary"> <div> <span>{{ filter.label }}</span> {%- if filter.active_values.size > 0 -%} <span>({{ filter.active_values.size }})</span> {%- endif -%} </div> </summary> <div class="filter-group-display"> <div class="filter-group-display__header"> <span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span> {%- if filter.active_values.size > 0 -%} […]

Read More →

Show product recommendations in Shopify

December 6, 2017 in Code Snippets

In this snippet, the section content builds the general display by looping through each product returned through the products attribute of the recommendations object. Add this code to sections/product-recommendations.liquid <div class="product-recommendations" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4" > {%- if recommendations.performed and recommendations.products_count > 0 -%} <h2>You may also like</h2> <ul> {%- for product […]

Read More →

Add tag filtering in Shopify

November 11, 2017 in Code Snippets

To implement a tag filtering feature, you can loop through all of the product tags in the collection using the all_tags attribute of the collection object. {% if collection.all_tags.size > 0 %} <ul class="tag-filters"> {% for tag in collection.all_tags %} {% if current_tags contains tag %} <li class="tag-filters__item active">{{ tag | link_to_remove_tag: tag }}</li> {% […]

Read More →

Add hreflang tags in Shopify

October 27, 2017 in Code Snippets

An hreflang tag is a link element that identifies a localized URL of a website. You should add a unique hreflang tag for each language or region URL that exists, and they should be included in the , which is commonly found in theme.liquid. <head> <!– head element content –> <link rel="alternate" hreflang="en" href="your-store.myshopify.com" /> […]

Read More →

Add SEO meta in Shopify

October 23, 2017 in Code Snippets

Add SEO metadata in your theme using HTML and Liquid. <head> <title> {{ page_title -}} {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%} […]

Read More →

Display single product collection in Shopify

October 8, 2017 in Code Snippets

Here is how to display a single product collection in a template. <ul> {% for product in collection-product-list %} <li><a href="{{ product.url}}">{{ product.title}}</a> {% endfor %} </ul>

Read More →

Add language selector in Shopify

September 17, 2017 in Code Snippets

Language selector allow customers to manually choose their preferred language. Code below adds button and a popover containing each language option: {% if localization.available_languages.size > 1 %} <localization-form> {% form 'localization' %} <div class="disclosure"> <button type="button" class="disclosure__button" aria-expanded="false" aria-controls="LanguageList"> {{ localization.language.endonym_name | capitalize }} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6"> <path […]

Read More →

Display cart discounts in Shopify

May 13, 2017 in Code Snippets

Display between the subtotal and total if a discount applies to the cart as a whole. Subtotal: {{ cart.items_subtotal_price | money }} {% if cart.cart_level_discount_application.size > 0 %} Discounts: <ul> {% for discount_application in cart.cart_level_discount_applications %} <li> {{ discount_application.title }}-{{ discount_application.total_allocated_amount | money }} </li> {% endfor %} </ul> {% endif %} Total: {{ cart.total_price […]

Read More →