Basic Features for a successful Startup Launch with Shopify

Introduction

Launching a startup successfully requires more than just an appealing homepage—it thrives on dynamic, interactive, and functional elements that turn visitors into loyal customers. In this article, we not only cover the basics of customizing your Shopify theme with Liquid and JavaScript but also explore additional features. These include advanced product filtering, an optimized checkout process, integration of useful apps, mobile optimization, enhanced analytics, and social media integration. Such measures improve user experience and boost conversion rates.

‍

Dynamic Theme Customization Using Shopify Liquid

To highlight fresh products, you can dynamically display a “New” badge for items added within the last week.

{% comment %} Display a "New" badge for products added within the last week {% endcomment %}
{% assign one_week_ago = 'now' | date: "%s" | minus: 604800 %}
{% for product in collections.frontpage.products %}
  <div class="product-card">
    <h2>{{ product.title }}</h2>
    {% if product.created_at | date: "%s" > one_week_ago %}
      <span class="badge badge-new">New</span>
    {% endif %}
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

Explanation:
The code calculates the timestamp for one week ago and loops through the products on the front page. If a product was created within this time period, a “New” badge is conditionally displayed.

‍

Interactive Welcome Message with JavaScript

Enhance the user experience by greeting new visitors with a welcome message when they first visit your site. The following script shows a one-time alert on entry:‍

<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (!sessionStorage.getItem('welcomeShown')) {
      alert("Welcome to our brand-new store!");
      sessionStorage.setItem('welcomeShown', true);
    }
  });
</script>

‍Explanation:
This script checks if a welcome message has already been shown during the current session. If not, it displays an alert and sets a flag to avoid showing the message again.

‍

Advanced Product Filtering and Sorting

A key aspect of a successful online store is making it easy for customers to find products. By implementing advanced filtering and sorting features, visitors can quickly locate what they’re looking for.

Example: Dynamic Filtering with Liquid and JavaScript

Use Liquid to generate filter options from product attributes, and combine it with JavaScript to dynamically update the page without a reload:

‍liquid:

<!-- Liquid: Generate filter list -->
<ul id="filter-list">
  {% for tag in collection.all_tags %}
    <li><a href="#" data-tag="{{ tag }}">{{ tag }}</a></li>
  {% endfor %}
</ul>

<div id="product-list">
  {% for product in collection.products %}
    <div class="product-card" data-tags="{{ product.tags | join: ' ' }}">
      <h2>{{ product.title }}</h2>
      <p>{{ product.price | money }}</p>
    </div>
  {% endfor %}
</div>

html

<!-- JavaScript: Dynamic Filtering -->
<script>
  document.querySelectorAll('#filter-list a').forEach(function(link) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const tag = this.getAttribute('data-tag');
      document.querySelectorAll('#product-list .product-card').forEach(function(card) {
        if(card.getAttribute('data-tags').includes(tag)) {
          card.style.display = 'block';
        } else {
          card.style.display = 'none';
        }
      });
    });
  });
</script>

Explanation:
This code generates a list of all product tags and enables visitors to click on a tag to dynamically display products matching that tag. Combining Liquid and JavaScript improves user-friendliness and reduces loading times.

‍

Optimizing the Checkout Process with Shopify Scripts

A seamless checkout process is crucial to avoid cart abandonment. Shopify Plus offers Shopify Scripts, which allow you to customize the checkout experience.

Example: Discount Script in Ruby (Shopify Scripts)

ruby

# This script grants a 10% discount if the cart exceeds a specified threshold
DISCOUNT_THRESHOLD = 10000  # Amount in cents
DISCOUNT_PERCENTAGE = 10

Input.cart.line_items.each do |line_item|
  if Input.cart.subtotal_price >= Money.new(cents: DISCOUNT_THRESHOLD)
    discount = line_item.line_price * (DISCOUNT_PERCENTAGE / 100.0)
    line_item.change_line_price(line_item.line_price - discount, message: "10% Discount")
  end
end

Output.cart = Input.cart

Explanation:
This Ruby script checks the cart’s subtotal and automatically applies a discount when a defined threshold is exceeded. Such incentives can encourage higher spending and improve conversion rates.

‍

Integration of Shopify Apps for Extended Functionality

Shopify offers a wide variety of apps that can extend your store’s functionality. Examples include:

• Marketing & Email Automation: Apps like Klaviyo allow you to create personalized email campaigns.
• Reviews & Customer Feedback: Integrate customer reviews directly into your store with apps such as Yotpo or Judge.me.

Explanation:
These apps are typically integrated via simple installations and settings adjustments in the Shopify admin area. For instance, you can set up automated follow-up emails or dynamically display product reviews.

Mobile Optimization and Responsive Design

A significant portion of online traffic comes from mobile devices, so ensuring that your store works optimally on all screen sizes is critical.

Example: Responsive CSS Media Queries

css

/* Standard layout for desktop */
.product-card {
  width: 30%;
  margin: 1%;
  float: left;
}

/* Adjustments for mobile devices */
@media (max-width: 768px) {
  .product-card {
    width: 100%;
    margin: 0 0 20px 0;
    float: none;
  }
}

‍Explanation:
Using CSS media queries, you can dynamically adjust the layout based on screen size. This ensures that product displays and other content remain clear and user-friendly on mobile devices.

‍

Enhanced Analytics and Conversion Tracking

Beyond Shopify’s built-in analytics, you can use additional tracking tools like Google Analytics or Facebook Pixel to analyze visitor behavior in detail.

Example: Google Analytics Event Tracking

html

<script>
  // Track a click on a "Buy" button
  document.querySelectorAll('.buy-button').forEach(function(button) {
    button.addEventListener('click', function() {
      gtag('event', 'click', {
        'event_category': 'E-Commerce',
        'event_label': 'Buy Button'
      });
    });
  });
</script>

Explanation:
By adding custom event tracking, you can monitor key user interactions in real time. This insight allows you to identify potential improvements in the sales process and optimize accordingly.

‍

Social Media Integration and Marketing Tools

Integrating social media is another lever for increasing sales. Share your products directly on platforms like Facebook, Instagram, or Pinterest by incorporating social sharing buttons.

Example: Social Sharing Buttons

html

<div class="social-sharing">
  <a href="https://www.facebook.com/sharer/sharer.php?u={{ shop.url }}" target="_blank">Share on Facebook</a>
  <a href="https://twitter.com/intent/tweet?url={{ shop.url }}" target="_blank">Share on Twitter</a>
  <a href="https://www.pinterest.com/pin/create/button/?url={{ shop.url }}" target="_blank">Pin it</a>
</div>

Explanation:
These simple links enable visitors to share your products on their preferred social media channels, potentially increasing reach and driving more traffic to your site.

‍

About UNHYDE®

UNHYDE is a Munich-based web development agency dedicated to pushing boundaries in web development, user experience, and digital marketing. Our mission is to create high-performing digital platforms that drive meaningful customer engagement and measurable business growth. We operate internationally and are a recognized Shopify Partner agency, having successfully launched countless websites and webstores worldwide.

‍

We're here to help !

For more insights or if you're ready to take your website to the next level, feel free to reach out to us at UNHYDE®, the web design agency. We’re always here to collaborate and craft tailored solutions that meet your unique needs.