Shopify - YellowWebMonkey Web Design https://www.yellowwebmonkey.com/category/shopify/ YellowWebMonkey Web Design Thu, 15 Sep 2022 19:28:40 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 https://www.yellowwebmonkey.com/wp-content/uploads/2020/07/favicon.ico Shopify - YellowWebMonkey Web Design https://www.yellowwebmonkey.com/category/shopify/ 32 32 Shopify checkout problems: Patches by theme https://www.yellowwebmonkey.com/shopify-checkout-problems-patches-by-theme/ Wed, 31 Aug 2022 16:48:58 +0000 https://www.yellowwebmonkey.com/?p=13065 Fixes for the Shopify issue from August 31, 2022 that prevents checkout on certain stores.

The post Shopify checkout problems: Patches by theme appeared first on YellowWebMonkey Web Design.

]]>

Theme List


Brooklyn

File: cart.liquid (template)

<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">

change to

<form action="/checkout" method="post" novalidate class="cart">


Dawn

File: main-cart-items (section)

<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">

change to

<form action="/checkout" class="cart__contents critical-hidden" method="post" id="cart">

Debutify

File: cart-page.liquid (snippet)

<form id="cartForm"
class="cart-form"
action="{{ routes.cart_url}}"
method="post"
novalidate>

Change to

<form id="cartForm"
class="cart-form"
action="/checkout"
method="post"
novalidate>

Impulse

 

This theme was fixed by removing the Google Tags/gtag.js code without making changes to the cart itself.


Prestige

File: cart-template.liquid (section)

<form action="{{ routes.cart_url }}" method="POST" class="Cart Cart--expanded" novalidate>

change to

<form action="/checkout" method="POST" class="Cart Cart--expanded" novalidate>


 

Venue

File: main-cart.liquid (section)

<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">

change to

<form action="/checkout" method="post" novalidate class="cart">

 

The post Shopify checkout problems: Patches by theme appeared first on YellowWebMonkey Web Design.

]]>
How to Create Draft Orders and Send Invoices https://www.yellowwebmonkey.com/how-to-create-draft-orders-and-send-invoices-2/ Tue, 15 Mar 2022 11:36:00 +0000 https://www.yellowwebmonkey.com/?p=12002 Shopify gives you the ability to create orders for your customers and send them an invoice for payment right from your Shopify admin or app. The order you create will be saved as a draft order until payment is accepted.

The post How to Create Draft Orders and Send Invoices appeared first on YellowWebMonkey Web Design.

]]>

Shopify gives you the ability to create orders for your customers and send them an invoice for payment right from your Shopify admin or app. The order you create will be saved as a draft order until payment is accepted. This can be useful for a variety of reasons including:

  • Taking payment for an order over the phone, in person, etc.
  • Sending customers an invoice with a direct link to secure checkout
  • Sell products with discount/wholesale pricing or special shipping rates
  • Pre-orders

Keep reading to learn more.

Creating a Draft Order

1. Log into your Shopify admin. Go to Orders and click the Create order button.

Click to create order

2.  Edit the Order

  • Add products to the order
  • Add a current customer or create a new customer
  • Apply discounts
  • Add shipping if needed
  • Turn taxes on or off

3. Once the order is complete, you have a few options. You can:

  • Accept payment – Click Collect payment and
    • Mark the order as paid if you have already received payment (like by cash).
    • OR enter credit card information (This option is great for taking payments over the phone.)
  • Save the draft order to edit later by clicking the Save button at the top right corner of the page.
  • Send an invoice to your customer with a direct link to checkout for payment. (see below)
Collect payment button

Sending an Invoice for a Draft Order

 1. On the draft order page, click Send Invoice

Send invoice

2. In the popup window

  • Check the email for the invoice
  • Add bcc if needed
  • Shopify automatically fills in the subject with the Invoice number
  • Add a message to the customer
  • Click Review invoice
Click to review invoice

3. In the popup window, review the invoice and if everything is correct, click Send Invoice.

 

Now your customer can pay for their order. 

For more information see https://help.shopify.com/en/manual/orders/create-orders

The post How to Create Draft Orders and Send Invoices appeared first on YellowWebMonkey Web Design.

]]>
Fulfillment Tips for Shopify eCommerce Stores https://www.yellowwebmonkey.com/fulfillment-tips-for-shopify-ecommerce-stores/ Thu, 16 Sep 2021 00:32:21 +0000 https://www.yellowwebmonkey.com/?p=11339 We understand that starting a Shopify business can be overwhelming. However, we have you covered with the following resources below. This list is a quick guide on how to make progress. Businesses that offer wholesale goods: Best for Smaller Quantity Orders: Amazon Business is a free to join annual membership program that provides access to …

Fulfillment Tips for Shopify eCommerce Stores Read More »

The post Fulfillment Tips for Shopify eCommerce Stores appeared first on YellowWebMonkey Web Design.

]]>

We understand that starting a Shopify business can be overwhelming. However, we have you covered with the following resources below. This list is a quick guide on how to make progress.

Businesses that offer wholesale goods:

amazon business logo
Best for Smaller Quantity Orders:

Amazon Business is a free to join annual membership program that provides access to millions of business products for small and big businesses.
Provides access to set spending limits, monitor buying, access price discounts on multi-unit purchases, get pallet deliveries, and more if you sign up to be a Business Prime member for an annual fee. For tips on how to join Amazon Business.
Cost: $179 (3 Maximum users) / Annual Fee

uline logo
Best for Larger Quantity Orders:

ULine distributes shipping, packaging and industrial supplies. They have a product line that includes retail, safety, janitorial, and material handling supplies.

  • Same Day Shipping
  • Low Shipping Costs
  • Offers over 38,500 products

Packaging:

Interior

The interior ensures no damage occurs to your merchandise, invest in interior products that will help with enroute travel.

sticker mule logo

Cushioning (i.e. Tissue Paper and bubble wrap) :
Amazon Business and ULine both offer in-bulk cushioning for interior packaging.
Branded Stickers:
Sticker Mule provides free proofs, free artwork help, and free shipping. They offer personalized magnets, labels, packaging products and more for up to 5,000 prints.

Boxes

Boxes are essential to creating the first impression for your customers.

boxup logo

Best for Personalized Designs:
Custom printed: BoxUp offers customizable mailers and shipping boxes in 6 different styles and 25 common sizes. They offer a design editor to ensure your custom print is correct.

Custom labels and packaging tape: Stick Mule, as mentioned above, offers custom labels and packaging tape to personalize all shipping products

Most Professional:
White and add label: Amazon Business for small quantity orders (< 200) and ULine for bigger quantity orders ( > 200)

Poly Mailers

Poly Mailers are self sealing, tear-proof, and water resistant packaging that is great for shipping apparel and soft products.

Best for Personalized Designs:
Custom printed poly mailers: Sticker Mule offers customizable poly mailers for your brand.

Most Cost Effective:
Plain and add sticker: Amazon Business and ULine offer plain, affordable in-bulk poly mailers in a variety of sizes and colors.

Labels

Shipping labels are vital for the supply chain to direct packages to the right location. (If you use Shopify Shipping, you can purchase shipping labels when completing an order on the site.)

Most Convenient:
Print on paper and use sleeves to affix: Amazon

Best Long-Term Investment:
Thermal Printer: Amazon offers affordable thermal printers that can print your shipping labels at home. It has high speed printing, easy installment, and auto-detection. *All with no usage of ink and toner.*
Thermal Labels: Amazon and ULine offer different size and color thermal labels. Amazon is recommended based on the amount and price point given.

Shipping

** Recommend to use Shopify for buying/print postage**
Most Professional Service:
Shipstation: Is a shipping platform that manages your shipping workflow, helps eliminate mistakes, and minimize manual work in all your shipping needs. As a beginner business they provide affordable plans for startup. Shipstation offers a help manual to understand the basics.

Most Cost Effective:
UPS: Offer shipping tools, give expert advice on how to expand small businesses, and software to stay up to date on all in and out bound products.

Usps Business: Offers shipping services, postage options and tools to help mail a large amount of orders at discount prices. They support small businesses with returns and creating labels online.

Printing

Most Convenient Services:
Office Depot:Office Depot offers print and copy services for stickers, promotional products, signage and more. In coordination with Canva, to import customizable designs.
UPS Store: Offers personalized flyers, envelopes, 3D print and more.
Staples: Staples offers self service printing, free delivery for purchases over $50, and curb-side pickup for a variety of products.

Most Cost Effective:
Vista Print creates digital and physical marketing products. Often offers promotional deals for products.

Most Design Friendly:
Canva: Provide sustainable print quality, free-shipping and templates of customizable designs.

You can also check how to add online reviews on Shopify.

 

Other Helpful Business Resources:

The post Fulfillment Tips for Shopify eCommerce Stores appeared first on YellowWebMonkey Web Design.

]]>
How to create a custom stylesheet in your Shopify Store https://www.yellowwebmonkey.com/how-to-create-a-custom-stylesheet-in-your-shopify-store-2/ Fri, 17 Jul 2020 12:24:47 +0000 https://www.yellowwebmonkey.com/how-to-create-a-custom-stylesheet-in-your-shopify-store-2/ It is often necessary to add custom styling to your Shopify theme. If you add it to your theme.scss.liquid and the theme is updated you will lose all of your changes. So we create a new SCSS file to keep all the custom styles nice and safe as well as much easier to edit.   …

How to create a custom stylesheet in your Shopify Store Read More »

The post How to create a custom stylesheet in your Shopify Store appeared first on YellowWebMonkey Web Design.

]]>
It is often necessary to add custom styling to your Shopify theme. If you add it to your theme.scss.liquid and the theme is updated you will lose all of your changes. So we create a new SCSS file to keep all the custom styles nice and safe as well as much easier to edit.  

1. Create a new asset for CSS styling: custom.scss.liquid

This is where we are going to put all our custom CSS styles

2. Connect new asset to the theme

We need to link to theme.liquid so the custom styles show on our website

Go to Layout > theme.liquid and scroll down until you see

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

Underneath this add

{{ 'custom.scss.css' | asset_url | stylesheet_tag }} 

Screen Shot 2020 07 15 at 6.05.40 PM

3. Testing our CSS styles

Now let’s add some custom CSS to check everything is working correctly. I always like to check by changing the background to red so it’s nice and easy to see that our CSS is working:

body {background: red;}

4. Preview the CSS changes

Go and preview the website. You can see there’s a red background on the website which means now anything that we modify inside the custom CSS is going to make modifications to our website

(insert image red-background)

 

* Don’t forget to remove the background code we added and then you are ready to style your website – have fun!

The post How to create a custom stylesheet in your Shopify Store appeared first on YellowWebMonkey Web Design.

]]>
Add a Sitemap for your Shopify Customers without an App https://www.yellowwebmonkey.com/add-a-sitemap-for-your-shopify-customers-without-an-app-2/ Thu, 02 Jul 2020 12:23:30 +0000 https://www.yellowwebmonkey.com/add-a-sitemap-for-your-shopify-customers-without-an-app-2/ For your e-commerce shop, a sitemap is a page which lists all of your products, collections, shop categories as well as other pages. It links them well and makes them easily available for your customers. A sitemap is usually found in the footer menu of a website.  Although Shopify provides the XML sitemap for Google, …

Add a Sitemap for your Shopify Customers without an App Read More »

The post Add a Sitemap for your Shopify Customers without an App appeared first on YellowWebMonkey Web Design.

]]>
For your e-commerce shop, a sitemap is a page which lists all of your products, collections, shop categories as well as other pages. It links them well and makes them easily available for your customers. A sitemap is usually found in the footer menu of a website.  Although Shopify provides the XML sitemap for Google, you generally have to install a paid app to have a sitemap for your customers. We code a customer sitemap into all Shopify sites we manage and wanted to share the code with others.  All the code snippet are loaded into Gist and you can learn more about how to include a sitemap to your website here:

See in action:

1. Create a new page template: ywm-sitemap.liquid

Place this code after the div that includes {{ page.content }} and remove the existing div that holds the h1

2. Create a new section: ywm-sitemap.liquid

3. Next add CSS styling to custom.css.liquid

If you don’t have custom.css.liquid in your theme, you can create a new asset

4. Set sitemap page to use new template

Go to Pages > Add New > Choose the Template suffix: page-ywm-sitemap > Save

5. Add the Sitemap page to your footer menu

Go to Navigation > Footer Menu > Add new menu item > Give it a name and within the Link dropdown choose pages and select Sitemap > Add > Save Menu

6. Adjust sitemap settings.

Go into theme > Customize

Go to the page you just added. Here you can change your settings – add a heading, text and choose what to include on the sitemap.

sitemap1


sitemap2


sitemap3

The post Add a Sitemap for your Shopify Customers without an App appeared first on YellowWebMonkey Web Design.

]]>
Shopify Store: Login to Launch in One Week https://www.yellowwebmonkey.com/shopify-store-login-to-launch-in-one-week/ Fri, 19 Jun 2020 03:26:49 +0000 https://www.yellowwebmonkey.com/shopify-store-login-to-launch-in-one-week/ Thinking about taking the leap to the fastest growing online store builder?  Here’s your risk-free chance!  Join YellowWebMonkey’s senior web designer, Alexis Priddy, as she walks you through setting up your own Shopify development site for free.  Did we mention Alexis is a Shopify Partner?  She is, and calls Shopify the best thing since sliced …

Shopify Store: Login to Launch in One Week Read More »

The post Shopify Store: Login to Launch in One Week appeared first on YellowWebMonkey Web Design.

]]>
Thinking about taking the leap to the fastest growing online store builder?  Here’s your risk-free chance!  Join YellowWebMonkey’s senior web designer, Alexis Priddy, as she walks you through setting up your own Shopify development site for free.  Did we mention Alexis is a Shopify Partner?  She is, and calls Shopify the best thing since sliced bread.  

This training is ideal for any retail business that isn’t selling online yet but would like to be. As a Shopify Partner, we can set up “dev stores” at no cost to the trainee. A base store will be set up for each student in the class, then we will walk them through setting it up themselves. At the conclusion of the training, you can make it live and do the monthly subscription or just use it as a hands-on learning experience.

We will start with 6 people per Zoom class.  Sign up fast!  If you don’t get in, don’t worry, we can put you on a waiting list.

REGISTER HERE

Shopify has many advantages:

  • Shopify is currently the fastest growing online store builder and powers over 1,000,000 websites. 
  • It has a modern and professional look.
  • Shopify offers a comprehensive dashboard so you have a better understanding of your sales, orders and marketing base.
  • Shopify offers free, simple integration with Google merchant, Google ads, Facebook, etc.
  • The platform is mobile-friendly and excellent for SEO
  • Shopify handles everything from marketing and payments to secure checkout and shipping.
  • Advanced ecommerce features such as abandoned cart emails to keep the customer engaged.
  • For more information about Shopify features, please visit Shopify’s Review  article by LitExtension

The post Shopify Store: Login to Launch in One Week appeared first on YellowWebMonkey Web Design.

]]>
Shopify Announcement/Promotion Bar with Options https://www.yellowwebmonkey.com/shopify-announcement-promotion-bar-with-options/ Fri, 12 Jun 2020 12:39:33 +0000 https://www.yellowwebmonkey.com/shopify-announcement-promotion-bar-with-options/ Although most Shopify templates have an announcement bar, they are not very customizable.  We built this custom section for a client because they have frequent promotions and need the colors to match the sale graphic.  We also added animation to it to draw more attention.  The result works great and is easy to install.  We …

Shopify Announcement/Promotion Bar with Options Read More »

The post Shopify Announcement/Promotion Bar with Options appeared first on YellowWebMonkey Web Design.

]]>
promo sidebarAlthough most Shopify templates have an announcement bar, they are not very customizable.  We built this custom section for a client because they have frequent promotions and need the colors to match the sale graphic.  We also added animation to it to draw more attention.  The result works great and is easy to install.  We have all the code snippets loaded into Gist and you can read more about it below:

Here is the finished product:

Contact UsNeed custom Shopify Liquid work?


1. Create a new section: ywm-promotion-bar.liquid

2. Create a new snippet for Hex to RGB: hex2rgb.liquid

This code is from granteagon and taken from Shopify-hex2rgb.liquid

{% assign hex2rgb_rgb = hex2rgb_hex | remove: '#' | downcase | split: '' %} 	{% assign hex2rgb_str = '' %} 	{% assign hex2rgb_chars = 'a,b,c,d,e,f' | split: ',' %} 	{% assign hex2rgb_remainders = '10,11,12,13,14,15' | split: ',' %} 	{% for hex2rgb_i in (0..5) %} 	{% assign hex2rgb_is_char = 0 %} 	{% for hex2rgb_c in (0..5) %} 	{% unless hex2rgb_is_char == 1 %} 	{% if hex2rgb_rgb[hex2rgb_i] == hex2rgb_chars[hex2rgb_c] %} 	{% assign hex2rgb_is_char = 1 %} 	{% capture hex2rgb_str %}{{ hex2rgb_str }}{{ hex2rgb_remainders[hex2rgb_c] }}|{% endcapture %} 	{% endif %} 	{% endunless %} 	{% endfor %} 	{% if hex2rgb_is_char == 0 %} 	{% capture hex2rgb_str %}{{ hex2rgb_str }}{{ hex2rgb_rgb[hex2rgb_i] }}|{% endcapture %} 	{% endif %} 	{% endfor %} 	{% assign hex2rgb_rgb = hex2rgb_str | split: "|" %} 	{% assign hex2rgb_r = hex2rgb_rgb[0] | times: 16 | plus: hex2rgb_rgb[1] %} 	{% assign hex2rgb_g = hex2rgb_rgb[2] | times: 16 | plus: hex2rgb_rgb[3] %} 	{% assign hex2rgb_b = hex2rgb_rgb[4] | times: 16 | plus: hex2rgb_rgb[5] %}

3. Upload new asset for animations: animations.css

Download the animations from Justin Aguilar and upload as a new asset.

http://www.justinaguilar.com/animations/css/animations.css

4. Modify Theme: theme.liquid

For this scenario, we are only loading on the homepage, so that is why we have the conditionals for the homepage only. You can remove that if you want to load elsewhere.

5. Create a new asset for CSS styling: ywm-promotion-bar.scss

I usually just add the code to my existing custom.scss.liquid though.

6. Go into theme->CUSTOMIZE

Go to the homepage or whatever page you added it to. You can adjust the settings like the video at the beginning of this post.

Contact UsNeed custom Shopify Liquid work? Let us know! Whether its custom sections, theme customizations, or Shopify SEO optimization we can knock it out!

The post Shopify Announcement/Promotion Bar with Options appeared first on YellowWebMonkey Web Design.

]]>