Shopify Section Rendering API allows you to dynamically update the content of sections on your store’s pages without fully reloading the page.

The Section Rendering API in Shopify is an API that allows you to dynamically update the content of sections on your store’s pages without fully reloading the page. This is especially useful for creating interactive elements like filters, cart updates, product variant switching, and more.

Key features of the Section Rendering API:

1. Asynchronous Updates: You can send a request to the server to retrieve updated content for a specific section. The server returns HTML, which can then be embedded into the current page without a full reload.
2. Performance Improvement: Since only a specific part of the page is updated, this can significantly enhance performance and the user experience.
3. Flexibility and Control: You can use this API to update individual sections of a page, giving you more control over how and when data on the page is updated.
4. Ease of Use: API requests are made via AJAX, and the resulting HTML is easily integrated into the DOM using JavaScript.

A practical use case for the Section Rendering API includes:

• updating the cart contents after adding an item
• filtering products on a collection page,
• changing a product variant on a product page where only specific sections are updated to reflect the new information.

This API helps create a more dynamic and responsive interface for users of Shopify stores.

You can see the example of using Shopify Section Rendering API in action below.

HTML

<div id="cart-section">
  {% section 'cart-template' %}
</div>

<button id="add-to-cart" data-product-id="{{ product.id }}">
  Add to Cart
</button>

JS

document.getElementById('add-to-cart').addEventListener('click', function() {
  const productId = this.getAttribute('data-product-id');
  
  // Add the product to the cart via AJAX
  fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: productId,
      quantity: 1,
    }),
  })
  .then(response => response.json())
  .then(() => {
    // Fetch the updated cart section
    fetch('/?sections=cart-template')
      .then(response => response.json())
      .then(data => {
        // Update the cart section with the new HTML
        document.getElementById('cart-section').innerHTML = data['cart-template'];
      });
  })
  .catch(error => {
    console.error('Error adding to cart:', error);
  });
});

This issue can stem from various causes, ranging from browser settings to server-side problems. In this blog post, we’ll explore several troubleshooting steps to help you resolve this error.

Originally published at blog.devmoek.com

Encountering an error while updating your shopping cart can be frustrating, especially when you have a lot of customers that in the midst of making an online purchase in your store. One of the common messages in Shopify is “There was an error updating your shopping cart. Please try again.”.

This issue can stem from various causes, ranging from browser settings to server-side problems. In this article, we’ll explore several troubleshooting steps to help you resolve this error.

When I tried to fix it myself, I found a bunch of opened questions in Shopify Community from people in different years from 2020 to 2023 about how to fix this issue. On of the method in this post helped me, so I’m sharing the whole list of steps I tried to fix the issue.

I will start from the basic fixes to complex. Below you can find each of them and jump further if need it.

Table of content

• Step 1: Refresh the Page
• Step 2: Clear Browser Cache and Cookies
• Step 3: Disable Browser Extensions
• Step 4: Try a Different Browser or Device
• Step 5: Update Your Browser
• Step 6: Check for Website-Specific Issues
• Step 7: Disable Ad Blockers and Security Software
• Step 8: Ensure Cookies Are Enabled
• Step 9: Check the Console
• Step 10: Check the Theme’s Code
• Step 11: Custom Code

Step 1: Refresh the Page

Sometimes, a simple page refresh can resolve the issue. Click the refresh button on your browser or press F5 ( CMD + R on mac) on your keyboard. This can help if the error was caused by a temporary glitch.

Step 2: Clear Browser Cache and Cookies

Cached files and cookies can sometimes cause conflicts with website functionality.

“Cookies and other site data” will log out you from all the sites you are logged in.

Step 3: Disable Browser Extensions

Extensions or add-ons can interfere with website functionality. Temporarily disable them to see if the issue is resolved.

Step 4: Try a Different Browser or Device

If the problem persists, try accessing the website using a different browser or device. This can help determine if the issue is specific to your current setup.

Step 5: Update Your Browser

An outdated browser can cause compatibility issues with modern websites. Ensure your browser is up-to-date.

Step 6: Check for Website-Specific Issues

Sometimes, the issue might be on the website’s end. Look for any notifications about site maintenance or known issues. You can also contact the website’s support team for assistance.

Step 7: Disable Ad Blockers and Security Software

Ad blockers and security software can sometimes block necessary scripts and resources needed for the website to function correctly. Try disabling them temporarily. As an alternative way here, you can switch your browser into incognito mode.

1. Locate the ad blocker extension and click on its icon.
2. Choose the option to disable it for the site you are visiting.

Security Software:

Refer to your specific software’s instructions to temporarily disable its web protection features.

Be careful disabling anti-malware software. It might be not safe in your case.

Step 8: Ensure Cookies Are Enabled

Cookies are essential for shopping cart functionality. Make sure they are enabled in your browser settings.

Information below require knowledge in Web Dev.

If you are not familiar with code or web development overall — ask a developer to help you.

Step 9: Check the Console

If none of the above steps work, the issue might be more technical. Checking the browser’s console can provide insights into what might be going wrong.

Step 10: Check the Theme’s Code

Take a look at the theme’s code for any errors. To do that, go to your theme and click Customize. Customizations or errors in the theme’s JavaScript or HTML could be causing the issue.

• Go to your Shopify admin panel.
• Navigate to Online Store > Themes > Actions > Edit Code.
• Check for any recent changes or errors in your cart.liquid and cart.js or relevant JavaScript files.

Check for any JavaScript errors or conflicting code that might be causing the cart update issue. If you’re unsure, consider reverting recent changes or consulting with a developer.

Step 11: Custom Code

If you have a custom code in your theme, or your theme is fully custom-built — that might be a problem. First things first, check the header. If you have a custom header, that 100% an issue.

There is some magic in the default header that makes the cart total value working well. So you have different approaches how to set the default header.

1. Customize the default header and implement your design & functionality.
   It takes time, but you will have a cleaner code.
2. Hide the default header (not a good fix, but sometimes faster is better). In this points you will have your custom header, and a default one, but the default header will be only in the code, so no one can’t see it.

These were my list of fixes. I hope you solved this issue now.

Are you looking to add more dynamism and visual appeal to your Shopify store? A marquee section might be what you need! This classic web design element is perfect for highlighting special offers, announcements, or key products in an engaging way.

Let’s dive into how you can add a marquee section to your Shopify store, and don’t miss the opportunity to grab an easy-to-integrate solution at the end of this post!

What is Marquee Section?

A marquee section is a scrolling text or image area that can capture the attention of your visitors as soon as they land on your page. It’s a versatile tool to convey important messages, promotions, or updates effectively. By incorporating a marquee, you make sure your key messages don’t go unnoticed.

Steps to Add a Marquee Section in Shopify

In this section I will talk about adding this marquee section. The marquee section was developed exclusively for Shopify.

1. Access Your Shopify Dashboard
   First, log in to your Shopify admin panel. This is where all the magic happens, from managing products to customizing your store’s design.
2. Choose the Right Theme
   Not all Shopify themes support marquees out of the box. Choose a theme that offers custom sections or is flexible enough for custom code integration.
3. Customize Your Theme
   Go to the ‘Online Store’ section and click on ‘Themes’. Here, you can either edit your current theme or choose to customize a new one. Look for options to add a new section or edit an existing one.
4. Adding Content to Your Marquee
   In the theme editor, you can add text, images, or links to your marquee section. Be creative but also concise — your marquee should be catchy, not cluttered.
5. Styling the Marquee
   Customize the appearance of your marquee. Adjust the colors, borders, and scrolling direction to match your store’s style and theme.

Advanced Customization Options

If you’re comfortable with HTML/CSS, the sky’s the limit! You can create more intricate designs or animations for your marquee. Alternatively, consider hiring a professional if you’re aiming for something more complex.

Don’t have the time?

Don’t have the time or skills to customize? No worries! You can find beautifully designed, ready-to-use marquee sections at SS&T. The marquee sections are easy to integrate and can significantly elevate the look of your Shopify store.

Conclusion

Adding a marquee to your Shopify store is a fantastic way to engage visitors and highlight important content. Whether you decide to customize one yourself or opt for a pre-designed solution, the impact on your store’s aesthetic and functionality can be substantial.

Choosing the right Shopify theme is crucial for the success of your online store. It’s not just about aesthetics. The right theme can significantly enhance user experience, boost sales, and reflect your brand’s unique identity.

Table of Contents

• Understand your brand and audience
• Key features to look for in a theme
• Possible mistakes
• Conclusion

Understanding Your Brand and Audience:

A Shopify theme should be a reflection of your brand’s personality and values. It’s essential to have a clear understanding of your brand identity. Equally important is knowing your target audience. What appeals to them? What kind of shopping experience are they looking for? Aligning your theme with both your brand and customer expectations is the first step towards e-commerce success.

Key Features to Look for in a Shopify Theme

A good Shopify theme should be responsive, fast to load, and easy to navigate. Look for SEO-friendly designs to boost your store’s visibility. Ensure the theme is compatible across different browsers and devices. Customization is key — your theme should allow you to tailor your store to meet your specific needs without extensive coding.

If you already have a theme that you would like to improve I can help you.

I have 4 years of experience developing websites and web applications. Latest 3 years I’m making custom themes and customizing Shopify stores.

Design and Aesthetics

First impressions matter. The visual appeal of your store can make or break a customer’s decision to explore further. Choose a theme with an appropriate color scheme, legible typography, and a clean layout. Flexibility in design is important, but remember, it shouldn’t come at the cost of performance.

Evaluating User Experience

User experience is paramount. Features like easy search functionality, efficient product filters, and a smooth checkout process are essential. Ensure that the theme provides a consistent and seamless experience across all devices.

Theme Support and Updates

Try to find a theme that comes with reliable customer support and regular updates. This ensures your store stays secure and incorporates the latest features and design trends. Themes from reputable developers often come with better support and update services.

Reviews and Ratings

Don’t forget to check reviews and ratings from other users. They can offer valuable insights into the theme’s performance, ease of use, and reliability.

Budget Considerations

While free themes can be a great starting point, premium themes offer more advanced features and customization options. Consider it an investment in your business’s future. However, always balance it with your budgetary constraints.

Making the Final Decision

Sum up your requirements, and compare the shortlisted themes against them. Take your time and ensure that your final choice aligns with your business goals, aesthetic preferences, and functional requirements.

Possible mistakes of choosing a Shopify theme

If it’s your first time choosing a theme, consider hiring a professional to help you.

If you have experience in development, you might know what is the clean code mean. So, when you bought a theme from a third-party developer, usually the quality of code isn’t so good. I’m not saying that the third-party themes are bad. The big problem for these themes is theme requirements.

-All official themes must meet all of the requirements to be published on the Shopify Theme Store. If a theme is missing any of the requirements in this list, then a submission will be rejected and a developer will need to make further changes to your theme before it can be resubmitted.

It means that official themes are verified by developers from Shopify. It’s a guarantee that the product was made with a good quality.

And as you may assume, the third-party themes may skip these important requirements, because they are selling outside of the official theme store.

Conclusion

Selecting the right Shopify theme is a critical decision that can significantly impact the success of your online store. Take into account your brand identity, customer preferences, theme features, design aesthetics, user experience, support, reviews, and budget before making your choice.

Need help?

If you are looking for help choosing a right theme for your business, let me know.

I made a bunch of Shopify stores and worked with a lot of different Shopify themes. I know what theme would fit your store perfectly.

Originally published at blog.devmoek.com

Also, we will fix a bug when you may see that after navigating between pages the footer is “jumping”.

Understanding Nuxt 3’s Component Architecture

Nuxt 3 is all about breaking things into smaller pieces called “components.” It’s a bit like building with Lego — you create different parts and snap them together to make something cool. Headers and footers are like those special Lego blocks that you can use over and over.

Using the Header and Footer

Once the header and footer are ready, we’ll make them show up on all pages using layout. Or, if you want, you can pick where it shows up — like on some pages and not on others. In that case, you will need to create different layouts.

Create a default layout

In my application I don’t need different layouts. I will have just one called default.vue. So, create a folder layouts in a root directory of your project and create a default.vue file. In that file we will have that piece of code:

<template>
  <div>
    <slot />
  </div>
</template>

Once we done with layout we need to make it visible on the page — add the layout to the app.vue file like so:

<template>
  <NuxtLayout>
    <Header />
    <NuxtPage />
    <Footer />
  </NuxtLayout>
</template>

I’m assuming that you already have Header and Footer in your project

Troubleshooting

If you paste the code above in your project and footer “jumps” to the top of the page when you navigate between pages, that’s because we need to make our page as a unique node. To make that we need to put our <NuxtPage /> into div.

<template>
  <NuxtLayout>
    <Header />
    + <div>
        <NuxtPage />
    + </div>
    <Footer />
  </NuxtLayout>
</template>

Now that glitch effect should be gone.

Conclusion

Headers and footers might seem like small things, but they’re super important in making a website look and feel just right. With Nuxt 3, it’s easy to make these parts and use them again and again.

Recently I said I’m working on a configurator in Shopify without any apps. And here’s an update. I’m attaching the screencast of how it works so far. It’s not 100% done and I found a couple of bugs recently. Anyway, the pre-build version is ready and I’m happy to share it with you.

The issues before starting

This configurator took a lot of time and resources.

The first issue was to properly design it. The design I got from the client was… not in good shape. There was nothing about the different conditions of the products. For example, out-of-stock, discounts, adding products to the cart error, etc. The design didn’t have it and I started to make it myself.

And the second one is to build it. In the process of making it live, if properly say when I started to debug it. I tested the prices, and the main question was “Are the prices shown correctly?”. On the fifth screen, I added the prices of the products that the user chose. In the design, prices aren’t included. I found it helpful to show the prices to the user again.

The working process

Firstly was made an HTML version. Secondly, I converted it to Liquid code. The problem with HTML is that the products and prices were hard-coded. And with Liquid code all the data is dynamic and customizable through the theme editor which is super cool!

The issue after starting

The main issue was to add multiple products to the cart. I thought about how to make it properly read the documentation (a lot). I read on Shopify discussions, and asked different developers about “how to add multiple products to the cart from one click?” — No luck at all. I tried it on my test Shopify store because thought maybe the problem was in a theme I worked on. But no, the problem was in me :) Later I got an idea and implemented this into the configurator.

The users can add multiple products to the cart now (not sure of the limit of how many products they can add, but 10 it’s 100%).

The solution

To add multiple products to the cart you need to send to the Cart API an items object with product ID and the quantity.

But be sure to send a variant ID of the product instead of product ID, if your product has variants.

items: [
  {
   id: 36110175633573,
   quantity: 2
  }
]

Here’s how I made a fetch request:

document.querySelectorAll("form.configurator-form").forEach((form) => {
  form.addEventListener("submit", async (e) => {
    e.preventDefault();

    // Show loading spinner
    const loadingOverlays = document.querySelectorAll(".loading-overlay");
    loadingOverlays.forEach((overlay) => overlay.classList.remove("hidden"));

    // Collect product data
    const productData = selectedProducts.map((product) => ({
      id: product.id,
      quantity: 1,
      variantId:
        product.variantId && product.variantId !== product.id
          ? parseInt(product.variantId)
          : undefined,
    }));

    const requestBody = {
      items: productData,
    };

    // Add products to cart
    await fetch(`${window.Shopify.routes.root}cart/add.js`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestBody),
    });

    // Get updated cart data
    const res = await fetch("/cart.json");
    const cart = await res.json();

    // Update cart count
    document.querySelectorAll(".cart-count-bubble").forEach((el) => {
      el.textContent = cart.item_count;
    });

    // Navigate to cart page
    window.location.href = "/cart";
  });
});

Overall

I like the project. It will be great for users to get the unique experience and build the box they want. That was a real challenge and I gained a lot of experience from this project.

Shopify Summer 2023 edition brings a host of new features and improvements, in this article I’ve posted the keys from the update, let’s find out what’s new.

Sidekick — AI Commerce Assistant

Sidekick is Shopify’s AI-enabled commerce assistant that helps merchants start, run, and grow their businesses. Sidekick can answer queries, perform tasks, create discounts, redesign stores, and generate content.

Shopify Magic

Shopify Magic combines AI with Shopify’s data to help merchants work faster, smarter, and more creatively. It can generate blog content, optimize email campaigns, provide help center answers, and suggest Inbox chat responses.

Online Store Editor Flex Sections

The new flex sections feature in the Online Store editor allows merchants to easily create custom layouts using drag-and-drop blocks without coding. Merchants can add, remove, and rearrange sections and customize them with their own content.

Shopify Collective

Shopify Collective lets merchants sell new products from Shopify brands without managing inventory or shipping. Merchants can curate complementary products to expand their product range effortlessly.

Shopify Subscriptions App

The new Shopify Subscriptions app allows merchants to offer their products as subscriptions, increasing recurring revenue and customer loyalty.

Improved Checkout

Shopify’s checkout has been enhanced with a one-page checkout, checkout extensions, and integrations to help merchants customize checkout and drive higher conversion rates.

New Developer Tools and APIs

Shopify has released over 20 new tools and APIs to help developers build customized commerce experiences and extend Shopify.

Other Updates

• New B2B features like volume pricing, PO numbers, and PayPal payments
• Custom email templates and high-volume pricing plans for Shopify Email
• Enhanced Shopify POS features for retail stores
• Streamlined order management tools like smart order routing and split fulfillments
• An updated visual design for the Shopify admin

What is Shopify?

Shopify is a popular e-commerce platform that allows businesses of all sizes to create and manage their online stores. It provides a variety of tools and features that make it easy to build and customize an online store, accept payments, manage inventory, and track sales. Shopify also offers a range of integrations with third-party apps and services, as well as built-in marketing and SEO tools to help businesses promote their online stores and reach more customers.

Shopify Development

If you’re interested in developing your own Shopify theme, there are a few key things you should keep in mind. First, it’s important to have a solid understanding of HTML, CSS, and JavaScript. These are the three core technologies that are used to create web pages and applications, and they are essential for creating a custom Shopify theme.

Once you have a solid grasp of these technologies, you can begin exploring the Shopify theme development environment. This includes using Shopify’s theme editor to customize the look and feel of your store, as well as using Liquid, Shopify’s templating language, to create dynamic content.

Some of the key features you’ll want to consider when developing a Shopify theme include the layout and structure of your store, the typography and color scheme, and the navigation and user interface design. It’s important to create a theme that is visually appealing, easy to navigate, and optimized for conversion, so that your customers can easily find and purchase the products they are looking for.

Another key consideration when developing a Shopify theme is the mobile user experience. With more and more customers shopping on their mobile devices, it’s essential that your theme is fully responsive and optimized for mobile devices. This means designing with a mobile-first approach and testing your theme thoroughly on a variety of mobile devices and screen sizes.

Shopify CLI

Shopify CLI (Command Line Interface) is a tool developed by Shopify that allows developers to create, manage, and deploy Shopify apps and themes from their command line interface. It is designed to simplify the development process for Shopify apps and themes, and provides a number of features that can help streamline the development workflow.

With Shopify CLI, developers can easily create new Shopify apps and themes, manage app and theme code, and run a local development server to test and preview their work. It also provides a range of commands for managing Shopify resources, including products, collections, and customers.

One of the key benefits of using Shopify CLI is that it allows developers to work with Shopify resources using their preferred tools and workflows. For example, developers can use their favorite text editor or IDE to write code and manage their project, and then use Shopify CLI to manage the deployment and testing of their code.

Another advantage of Shopify CLI is that it provides access to a range of development and testing tools that can help streamline the development process. For example, developers can use the Shopify CLI to automatically create test data for their apps and themes, and then use Shopify’s testing tools to run automated tests and catch errors early in the development process.

Shopify CLI is a powerful and flexible tool that can help developers streamline their workflow and simplify the development process for Shopify apps and themes. Whether you are a seasoned developer or just getting started with Shopify development, Shopify CLI is a tool worth exploring.

Shopify theme check

Shopify Theme Check is a free tool provided by Shopify that allows developers and merchants to check their Shopify themes for compliance with best practices, performance, and security standards.

Shopify Theme Check runs a series of tests on the theme code to ensure that it follows Shopify’s recommended guidelines for building themes. It checks for common errors, such as missing or incorrect template files, as well as performance issues like slow page load times.

The tool also provides a detailed report on any issues it finds, with suggestions for how to fix them. By using Shopify Theme Check, developers and merchants can ensure that their themes are optimized for speed and usability, and that they meet the necessary security and performance standards.

Overall, Shopify Theme Check is a valuable tool for anyone building or using Shopify themes, as it helps to ensure that the theme is well-optimized and provides a positive user experience for customers.

Installation

• Install Theme Check with Shopify CLI
• Install the Shopify Liquid Visual Studio Code extension

It’s important to note that Shopify Theme Check is a tool for developers and requires some technical knowledge to use effectively. If you’re not comfortable with code or don’t understand the errors and warnings that are returned, you may want to seek the help of a developer or Shopify Expert to address any issues that are identified.

Documentation

One of the best ways to get started with Shopify theme development is to explore the available resources and documentation. Shopify has a wealth of resources available to help you get started, including detailed documentation on Liquid, the theme editor, and various other features.

In addition to the official documentation, there are also a number of third-party resources available, including online courses, tutorials, and forums. These can be a great way to learn more about Shopify theme development and get advice and guidance from experienced developers.

Testing and optimization

When it comes to actually building your Shopify theme, one of the most important things to keep in mind is the importance of testing and optimization. A good Shopify theme should be optimized for speed, usability, and search engine optimization (SEO), as these are all critical factors in ensuring that your store is successful.

To optimize your theme, you’ll need to pay close attention to factors such as page load times, image sizes, and user interface design. You’ll also want to ensure that your theme is fully accessible and meets the latest web accessibility standards.

In addition to these technical considerations, it’s also important to think about the overall user experience of your store. This includes things like the layout and structure of your site, the placement of key elements such as product descriptions and calls to action, and the overall ease of use and navigation.

Overall

Overall, developing a Shopify theme requires a combination of technical skills, design expertise, and a deep understanding of e-commerce best practices. By keeping these key considerations in mind, you can create a custom theme that not only looks great, but also helps you drive sales and grow your business.

You can hire me as a Shopify Developer.

Upwork

Upwork is one of the largest freelance websites with a vast number of job postings. It is perfect for writers, designers, developers, and marketers. The site offers a variety of job opportunities with different payment structures, including hourly and fixed-rate projects. It also has a feature called Upwork Pro, which connects businesses with top-rated freelancers for large-scale projects. Upwork is a great choice for freelancers who are just starting out or for those who want to expand their client base.

Freelancer

Freelancer has a user-friendly interface and provides jobs in various categories, including writing, designing, and programming. This platform offers a unique feature called “Contests,” where clients can host a competition for a particular project, and freelancers can submit their work to win the prize money. Freelancer also has a mobile app that allows freelancers to search for jobs and manage their profiles on the go.

Fiverr

Fiverr is an excellent platform for freelancers who specialize in creative services like graphic design, video editing, and copywriting. As the name suggests, Fiverr started as a platform where freelancers could offer their services for $5. However, the site has evolved, and now freelancers can set their own rates. Fiverr also has a feature called “Gigs,” which allows freelancers to offer pre-packaged services to clients.

Toptal

Toptal is an exclusive platform that provides access to the best freelancers in the industry. It is perfect for businesses that need high-quality work. Toptal has a rigorous screening process that ensures that only the top 3% of freelancers are accepted onto the platform. This means that clients can be confident that they are working with the best of the best. Toptal also offers project management and team coordination services, making it a one-stop-shop for businesses looking to outsource their work.

Guru

Guru provides job opportunities for freelancers in various categories like web development, design, writing, and marketing. The site has a feature called “SafePay,” which allows clients to deposit funds into an escrow account, and the payment is only released when the project is completed to the client’s satisfaction. Guru also has a collaboration tool that allows freelancers and clients to communicate and share files in real-time.

99designs

99designs is a platform that is solely dedicated to designers. It provides opportunities for graphic designers, logo designers, and web designers. The site has a unique feature called “Contests,” where clients can host a competition for a particular design project, and freelancers can submit their work to win the prize money. 99designs also has a feature called “Projects,” where clients can work one-on-one with a freelancer to create a custom design.

PeoplePerHour

PeoplePerHour is a UK-based freelance website that provides job opportunities for freelancers worldwide. It is perfect for writers, designers, and developers. The site has a feature called “Hourlies,” where freelancers can offer their services for a fixed price. PeoplePerHour also has a mobile app that allows freelancers to search for jobs and manage their profiles on the go.

Contra

On Contra, freelancers can create a profile that highlights their skills and experience, search for job opportunities, and apply to projects that match their expertise. The platform covers a wide range of industries, including design, development, writing, marketing, and more.

Contra also offers features such as escrow payments, project management tools, and dispute resolution to ensure a smooth and secure transaction between freelancers and clients.

SimplyHired

SimplyHired is a job search engine that provides job opportunities for freelancers in various categories like writing, designing, and programming. The site has a feature called “Salary Estimator,” which allows freelancers to see the average salary for a particular job in their area. SimplyHired also has a mobile app that allows freelancers to search for jobs and manage their profiles on the go.

TaskRabbit

TaskRabbit is a platform that provides opportunities for freelancers who specialize in odd jobs like cleaning, moving, and handyman services. The site has a feature called “Instant Matching,” where freelancers can receive job requests in real-time. TaskRabbit also has a mobile app that allows freelancers to manage their profiles and receive job requests on the go.

Conclusion

If you are a freelancer looking for work opportunities, these top 10 freelance websites can help you find the perfect job. Each platform has its unique features and benefits, so it’s worth checking them out to see which one suits your needs. Whether you’re a writer, designer, developer, or marketer, there is a platform out there that can help you achieve your freelance goals. Keep in mind that building a successful freelance career takes time and effort, but with the right platform, you can find high-quality clients and build a thriving career. So, go ahead and start your freelance journey today!

this article was made by AI

In this article you will know how to add a recent viewed section. This section allows your customers to get better experience with your store.

GitHub repository

Let’s get started.

Create recently-viewed.liquid file

Go to sections folder and create recently-viewed.liquid file. Put the code below inside the file:

{{ 'section-recently-viewed.css' | asset_url | stylesheet_tag }}


<div class="recently-viewed-wrapper page-width">
    <h2>{{section.settings.heading}}</h2>
    <ul class="recently-viewed-grid">
    <!-- Recently viewed products will appear here -->
    </ul>
</div>

<script>
function setRecentlyViewedProducts() {
  const productData = {
    productTitle: "{{ product.title }}",
    productImg: "{{ product.featured_media | img_url: '300x' }}",
    productPrice: "{{ product.price | money }}",
    productUrl: "{{ product.url }}",
    productImageAltText: "{{product.featured_media.alt | escape }}"
  };
  const productList = [];
  let jsonResp, jsonRespArr, jsonRespArrStr;
  const numberOfProducts = 8;
  productList.push(productData);
  const currProductPageTitle = productData.productTitle;
  const productDataString = JSON.stringify(productList);
  const localData = localStorage.getItem("recentlyViewedProduct");

  if (localData === null) {
    localStorage.setItem("recentlyViewedProduct", productDataString);
  } else if (localData) {
    const oldProductData = localStorage.getItem("recentlyViewedProduct");
    const countProductData = (oldProductData.match(/productTitle/g) || []).length;
    const sameProduct = oldProductData.includes(currProductPageTitle);
    if (countProductData < numberOfProducts && sameProduct == false) {
      jsonResp = JSON.parse(oldProductData);
      jsonRespArr = jsonResp.concat(productList);
      jsonRespArrStr = JSON.stringify(jsonRespArr);
      localStorage.setItem("recentlyViewedProduct", jsonRespArrStr);
    } else if (countProductData >= numberOfProducts && sameProduct == false) {
      jsonResp = JSON.parse(oldProductData);
      jsonResp.shift();
      jsonRespArr = jsonResp.concat(productList);
      jsonRespArr = JSON.stringify(jsonRespArr);
      localStorage.setItem("recentlyViewedProduct", jsonRespArr);
    }
  }
}

setRecentlyViewedProducts();
const localViewed = localStorage.recentlyViewedProduct;
function getRecentlyViewedProducts() {
  const productData = JSON.parse(localStorage.getItem("recentlyViewedProduct"));
  const recentlyViewedHtml = [];
  productData.map(item => {
    recentlyViewedHtml.unshift(`
    <li class="recently-viewed-grid-item">
      <a href="${item.productUrl}"> 
  <img class="recently-viewed-img" src='${item.productImg}' loading="lazy" alt="${item.productImageAltText}"/>
      </a>
       <h3><a class="recently-viewed-a" href="${item.productUrl}">${item.productTitle}</a></h3>
       <p>${item.productPrice}</p>
    </li>
   `);
  });
  const newProductData = `${recentlyViewedHtml.join("")}`;
  const fullContent = document.getElementsByClassName("recently-viewed-grid");
  fullContent[0].innerHTML = newProductData;
}

document.addEventListener("DOMContentLoaded", function (event) {
  getRecentlyViewedProducts();
});

</script>

{% schema %}
  {
    "name": "Recently Products",
    "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Recently Viewed",
          "label": "Heading"
        }
 ]
  }
{% endschema %}

Create a stylesheet file

Navigate to assets folder and create section-recently-viewed.css file, paste the code inside. By the way you can paste CSS into section file. If so, don't forget to delete first line from the section file and use liquid tags {% style %} your styles here {% endstyle %} to wrap your styles. More about liquid you can read here.

Put the styles below inside the file:

.recently-viewed-wrapper {
    margin: 1rem auto;
  }

  .recently-viewed-img {
    width: 100%;
  }

  .recently-viewed-grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    list-style: none;
    margin:0; 
    padding: 0;
  }   

  .recently-viewed-grid-item {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .recently-viewed-a {
    text-decoration: none;
    color: #000;
  }

Create jquery.product.min.js file

It needs to collect and store cookie data. Go to assets and create jquery.product.min.js file and paste the code into it.

Copy and paste code inside the file:

/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
 
 jQuery.cookie=function(b,j,m){if(typeof j!="undefined"){m=m||{};if(j===null){j="";m.expires=-1}var e="";if(m.expires&&(typeof m.expires=="number"||m.expires.toUTCString)){var f;if(typeof m.expires=="number"){f=new Date();f.setTime(f.getTime()+(m.expires*24*60*60*1000))}else{f=m.expires}e="; expires="+f.toUTCString()}var l=m.path?"; path="+(m.path):"";var g=m.domain?"; domain="+(m.domain):"";var a=m.secure?"; secure":"";document.cookie=[b,"=",encodeURIComponent(j),e,l,g,a].join("")}else{var d=null;if(document.cookie&&document.cookie!=""){var k=document.cookie.split(";");for(var h=0;h<k.length;h++){var c=jQuery.trim(k[h]);if(c.substring(0,b.length+1)==(b+"=")){d=decodeURIComponent(c.substring(b.length+1));break}}}return d}};

 /**
  * Module to show Recently Viewed Products
  *
  * Copyright (c) 2014 Caroline Schnapp (11heavens.com)
  * Dual licensed under the MIT and GPL licenses:
  * http://www.opensource.org/licenses/mit-license.php
  * http://www.gnu.org/licenses/gpl.html
  *
  */
  
 Shopify.Products=(function(){var a={howManyToShow:3,howManyToStoreInMemory:10,wrapperId:"recently-viewed-products",templateId:"recently-viewed-product-template",onComplete:null};var c=[];var h=null;var d=null;var e=0;var b={configuration:{expires:90,path:"/",domain:window.location.hostname},name:"shopify_recently_viewed",write:function(i){jQuery.cookie(this.name,i.join(" "),this.configuration)},read:function(){var i=[];var j=jQuery.cookie(this.name);if(j!==null){i=j.split(" ")}return i},destroy:function(){jQuery.cookie(this.name,null,this.configuration)},remove:function(k){var j=this.read();var i=jQuery.inArray(k,j);if(i!==-1){j.splice(i,1);this.write(j)}}};var f=function(){h.show();if(a.onComplete){try{a.onComplete()}catch(i){}}};var g=function(){if(c.length&&e<a.howManyToShow){jQuery.ajax({dataType:"json",url:"/products/"+c[0]+".js",cache:false,success:function(i){d.tmpl(i).appendTo(h);c.shift();e++;g()},error:function(){b.remove(c[0]);c.shift();g()}})}else{f()}};return{resizeImage:function(m,j){if(j==null){return m}if(j=="master"){return m.replace(/http(s)?:/,"")}var i=m.match(/\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?/i);if(i!=null){var k=m.split(i[0]);var l=i[0];return(k[0]+"_"+j+l).replace(/http(s)?:/,"")}else{return null}},showRecentlyViewed:function(i){var i=i||{};jQuery.extend(a,i);c=b.read();d=jQuery("#"+a.templateId);h=jQuery("#"+a.wrapperId);a.howManyToShow=Math.min(c.length,a.howManyToShow);if(a.howManyToShow&&d.length&&h.length){g()}},getConfig:function(){return a},clearList:function(){b.destroy()},recordRecentlyViewed:function(l){var l=l||{};jQuery.extend(a,l);var j=b.read();if(window.location.pathname.indexOf("/products/")!==-1){var k=window.location.pathname.match(/\/products\/([a-z0-9\-]+)/)[1];var i=jQuery.inArray(k,j);if(i===-1){j.unshift(k);j=j.splice(0,a.howManyToStoreInMemory)}else{j.splice(i,1);j.unshift(k)}b.write(j)}}}})();

Add the section in product.json file

Don’t forget about this step. It’s super important! Go to templates folder and then click on product.json file, paste the code where you would like to show a recently viewed section.

    "recently-viewed": {
        "type": "recently-viewed",
        "settings": {
        }
      }

Don’t forget to indicate this section in order, like so:

"order": [
      "main",
      "recently-viewed"
    ]

You can see a little bit different product page layout. It’s okay. Hope it helps :)

Note

You can face with possible issues. For example, the code won’t work in your theme. That’s okay and no worries. Every store can have different settings like integrations or whatever. If so, reach me by email I’ll try my best to help you.