Tutorials - YellowWebMonkey Web Design https://www.yellowwebmonkey.com/category/tutorials/ 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 Tutorials - YellowWebMonkey Web Design https://www.yellowwebmonkey.com/category/tutorials/ 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.

]]>
Add Site Logo & Icon in WordPress https://www.yellowwebmonkey.com/add-site-icon-and-logo-in-wordpress/ Tue, 05 Apr 2022 13:52:00 +0000 https://www.yellowwebmonkey.com/?p=11967 Here is a quick tutorial for customizing your Site Icon and Logo in WordPress

The post Add Site Logo & Icon in WordPress appeared first on YellowWebMonkey Web Design.

]]>

Adding a unique logo and icon in your chosen theme helps users identify the site and personalizes your website. The following instructions will walk you through the process.

1. Log in

Begin by logging in to the administrator portion of your website with your username and password.

2. Site Identity

Go to Appearance → Customize. Click on the Site Identity section. Depending on the Theme you are using, Site Identity may be under the “Header” option.

Site Identity WP

3. Site Logo and Icon

Under Site Identity, you will be able to set a Site Logo and Icon. The Icon will appear in the Browser Bar when users access your site.

WP Site settings

4. Media Files

You can upload your own image from your computer or use media files you have already placed in the Media Library. Be sure to pay attention to the suggested pixel size for each item. If you are using your own created image, run it through an image optimizer first before uploading it. Simply highlight the icon you want to use, update any information in the right-hand column, and then click select on the bottom right hand of the screen:

WP Media picture

5. Select the green "UPDATE" button to save your changes.

The post Add Site Logo & Icon in WordPress appeared first on YellowWebMonkey Web Design.

]]>
How to Run a Backup with BackupBuddy https://www.yellowwebmonkey.com/how-to-run-a-backup-with-backupbuddy/ Tue, 22 Mar 2022 12:33:00 +0000 https://www.yellowwebmonkey.com/?p=11927 You need a solid WordPress backup strategy in order to protect your website. BackupBuddy is a great option for maintaining your WordPress backups. Here's how to use it.

The post How to Run a Backup with BackupBuddy appeared first on YellowWebMonkey Web Design.

]]>

When designing with WordPress, consistently backing up your website is an important part of maintaining the site. We recommend backing up your site at a minimum of once a month as well as prior to Core, Theme, and Plugin Updates. One popular backup plugin is BackupBuddy.

1. Log in

Begin by logging in to the administrator portion of your website with your username and password.

2. In the left-hand column you will see the BackupBuddy option:

Backup Buddy tutorial

3. Create Backup

Once you click on BackupBuddy, you will see columns across the top of the page that read Local Backups, Create Backup and also Restore Backup which is useful if you need to restore a previous version of your website.

Create backup WP

4. Complete Backup

Once you choose Create Backup, select the first option to run a complete backup. Depending on the size of your website this can take a while, but you will be able to watch the system progress through its steps.

Back-up buddy tutorial picture

5. Storing your Backup

By default, the backup file you just ran will be stored locally. This means it is saved on the same server as your website. It’s a good idea to set up a limit on the number of local backups you store on your website. Any future Complete Backups will also backup your local backups. This will generate large backup files and impact your server resources.

6. Dropbox or Stash:

When the backup is complete you have the option to download it or send it to an offsite destination such as Dropbox or Stash. You will receive a notice that tells you the backup has been scheduled to send and you will get an email if there are any problems.

Offsite destination

Setting Up Backup Destinations

After completing steps 1-6 above, save a draft of the post. To set up a 3rd party backup destination, follow these steps.

1. Navigate to BackUpBuddy > Destinations:

Destination file

2. Add New

The next screen will appear like this where you will select Add New and then your preferred destination location:

Add backup folder

3. Manage your Backup Account

Once you have logged in with your iThemes username and password, the next screen will appear where you can manage your backup account and also modify the settings to suit your needs:

Backup buddy

Setting up a Backup Schedule

You can schedule backups to automatically run with BackupBuddy’s backup schedules.

  1. To set up backup schedules, navigate to BackupBuddy > Schedules. You’ll have the option to configure your schedule as needed including sending the backup to a remote destination and deleting it from the server when complete. 
  2. Once you’ve established your schedule, backups will run automatically.

The post How to Run a Backup with BackupBuddy 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.

]]>
How to Create a New Post with WordPress https://www.yellowwebmonkey.com/how-to-create-a-new-post-with-wordpress/ Fri, 11 Jun 2021 17:28:35 +0000 https://www.yellowwebmonkey.com/?p=10916 You've likely heard the phrase "content is king," and there's no doubt about it - keeping the content on your site fresh is critical for SEO, and Google loves frequent updates. Here's a quick tutorial for publishing a new post on your site.

The post How to Create a New Post with WordPress appeared first on YellowWebMonkey Web Design.

]]>

You’ve likely heard the phrase “content is king,” and there’s no doubt about it – keeping the content on your site fresh is critical for SEO, and Google loves frequent updates. Here’s a quick tutorial for publishing a new post on your site.

1. Log in

Begin by logging in to the administrator portion of your website with your username and password.

2. Add a new post

In the sidebar, navigate to Posts > Add New

3. Give your post a title

The post title will be the title that displays on your blog post and will also auto-generate the URL for the post.

4. Add your text

If you’re just creating a simple blog post, you can add your text in the area below. If you’d like the ability to use Elementor widgets in your post, skip this step.

New post with WP Add Title

5. In the right hand sidebar, select Post to adjust the post options

Under the post options, you can:

  • assign your new post to categories
  • assign tags to the post
  • add a featured image (we recommend the dimensions 1000 x 523 or an aspect ratio of 1.91:1 for optimal sharing on Facebook)
  • add a post excerpt to give readers a quick idea what the post is about

6. Preview your post and publish

Below is a full video of the steps. If you’d like to edit your post with Elementor page builder, skip this step and keep reading!

If you'd like to edit your post with Elementor:

After completing steps 1-5 above, save a draft of the post.

1. Select Edit With Elementor

New post with WP Add Title

2. Add any elements you'd like to use

Editing the post with Elementor gives you the opportunity to use the full catalog of Elementor elements in your post.

3. Select the green Publish button to publish your post

The post How to Create a New Post with WordPress appeared first on YellowWebMonkey Web Design.

]]>
How to Make Basic Changes to Your Website With Elementor https://www.yellowwebmonkey.com/how-to-make-basic-changes-to-your-website-with-elementor/ Thu, 10 Jun 2021 15:00:47 +0000 https://www.yellowwebmonkey.com/?p=10896 Here is a quick tutorial for making basic edits on your WordPress site built with Elementor.

The post How to Make Basic Changes to Your Website With Elementor appeared first on YellowWebMonkey Web Design.

]]>

Elementor is a drag-and-drop page builder for WordPress. It is user-friendly, powerful, and it helps users quickly make edits to their site.

Below are some steps for making simple changes to your site built with Elementor.

1. Log in

Begin by logging in to the administrator portion of your website with your username and password.

2. Navigate to the page you want to edit

There are multiple ways to access the Elementor editor, but the fastest way is to navigate to the frontend of the page you want to make edits to.

3. Select Edit with Elementor

On the top admin toolbar, select the “Edit with Elementor” option.

Edit with Elementor

4. Scroll to the element you want to edit. Make changes in the sidebar on the left.

5. Select the green "UPDATE" button to save your changes.

The post How to Make Basic Changes to Your Website With Elementor appeared first on YellowWebMonkey Web Design.

]]>
Autocrat error of API developer key is invalid https://www.yellowwebmonkey.com/autocrat-error-of-api-developer-key-is-invalid/ Fri, 04 Jun 2021 14:36:52 +0000 https://www.yellowwebmonkey.com/?p=10872 ***Update as of 4 June 2021*** Autocrat is returning an error that the API developer key is invalid. We believe the developer was using a Google API, and their key expired. We would recommend trying one of the following add-ons instead: Mail Merge Docs Install here: https://workspace.google.com/marketplace/app/mail_merge/799434348782 Mail Merge Add-on Install here: https://workspace.google.com/marketplace/app/mail_merge/799434348782

The post Autocrat error of API developer key is invalid appeared first on YellowWebMonkey Web Design.

]]>

***Update as of 4 June 2021***

Autocrat is returning an error that the API developer key is invalid. We believe the developer was using a Google API, and their key expired.

We would recommend trying one of the following add-ons instead:

Mail Merge Docs

Install here: https://workspace.google.com/marketplace/app/mail_merge/799434348782

Mail Merge Add-on

Install here: https://workspace.google.com/marketplace/app/mail_merge/799434348782

The post Autocrat error of API developer key is invalid appeared first on YellowWebMonkey Web Design.

]]>
How To Edit Your Hosts File on Mac or Windows https://www.yellowwebmonkey.com/how-to-edit-your-hosts-file-on-mac-or-windows/ Wed, 31 Mar 2021 14:11:14 +0000 https://www.yellowwebmonkey.com/?p=10467 Updating the hosts file on your computer is useful for development purposes. You can preview how your site will look on another server without affecting the live site that users view.

The post How To Edit Your Hosts File on Mac or Windows appeared first on YellowWebMonkey Web Design.

]]>

Why Edit Your Hosts File?

Updating the hosts file on your computer is useful for development purposes. You can preview how your site will look on another server without affecting the live site that users view.

It is particularly useful when creating a development site for WordPress since it uses absolute urls. Creating the development site on a new server with the same domain means that you will not have to complete a database find and replace query when you’re ready to move the new site live.

In order to update the host your domain loads from, you will need to know the IP address for the new server you want to preview.

How to Edit Your Hosts File on Windows

1. Select Start and search for “Notepad”.

2. Right-click Notepad and select “Run as administrator”.

3. Click “File” and select Open.

4. In the lower right dropdown, change Text Documents (*.txt) to All Files (*.*)

5. Go to the Windows Hosts File location: C:\Windows\System32\Drivers\etc and open the hosts file.

6. Add the new IP address and the URL

11.111.11.111 www.example.com example.com

7. Save the file.

How to Edit Your Hosts File on Mac

1. Open your spotlight search and search for “Terminal”.

2. Copy and paste the command: sudo nano /private/etc/hosts and hit enter.

3. Provide your password when prompted.

4. Add the new line with the server IP address and the website URL:

11.111.11.111 www.example.com example.com

5. Select control-o to save the file and hit enter.

6. Select control-x to exit the editor.

Flush Your DNS

Once you've edited your hosts file, it is advisable to flush your DNS cache otherwise your browser may continue to direct to the old server.

Windows:

1. Go to the Start menu and type "cmd."

2. Right-click the Command Prompt option and "Run as Administrator".

3. Type the command below and hit enter:

ipconfig /flushdns

 

Mac:

  1. Open the terminal and type the command below and hit enter:
sudo dscacheutil -flushcache;sudo killall -HUP mDNSResponder

The post How To Edit Your Hosts File on Mac or Windows appeared first on YellowWebMonkey Web Design.

]]>
Adjusting Print CSS so links are hidden in Gantry 5 https://www.yellowwebmonkey.com/adjusting-print-css-so-links-are-hidden-in-gantry-5/ Mon, 07 Sep 2020 11:53:11 +0000 https://www.yellowwebmonkey.com/?p=9296 Bootstrap loads print styling to most websites that prints out the target link for any linked items. To hide this, go to your templates custom.scss file (if you do not have one, see http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet). Below the other media queries, add: @media print {  @page {size: auto;  margin: 0mm;}  img {border: 0;}  p a[href^="#"]:after, p a[href^="http://"]:after, …

Adjusting Print CSS so links are hidden in Gantry 5 Read More »

The post Adjusting Print CSS so links are hidden in Gantry 5 appeared first on YellowWebMonkey Web Design.

]]>
Bootstrap loads print styling to most websites that prints out the target link for any linked items. To hide this, go to your templates custom.scss file (if you do not have one, see http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet). Below the other media queries, add:

@media print {
  @page {size: auto;  margin: 0mm;}
  img {border: 0;}
  p a[href^="#"]:after, p a[href^="http://"]:after, a[href^="https://"]:after,.btn-default:after, .btn-success:after, .btn-primary:after, a[href]:after {display: none;}
  p a {word-wrap: break-word;}
  a {color: #000;text-decoration:none;}
}

The post Adjusting Print CSS so links are hidden in Gantry 5 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.

]]>