Rebeckah's Treasures
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities
Welcome Visitor! I hope you enjoy my treasures.

Disclaimer: This website makes use of sponsored and/or affiliate links. Please see this page for more information.

Website Shop 101 - Ravelry Shop Buttons

24/9/2015

Comments

 
Learn how to make Ravelry Buttons for your website store with @beckastreasures!
Welcome to lesson three of Website Shop 101 tutorial series for crafters. If you're planning to sell downloadable PDF crochet/knit patterns, Ravelry offers a very simple code you can link on your site. This lesson will show you how to combine this code with your newly created buttons you designed in lesson two.

This lesson assumes that you are already on Ravelry and have at least one pattern listed in your pro account.

If you're not on Ravelry yet, I highly recommend that you start adding you patterns there. It's a great way to help others find your patterns and it is also a cost efficient way to sell you patterns as instant PDF downloads. 

Checkout this amazing tutorial over at Oombawka Designs to see how you can add your patterns to Ravelry, and check out this Ravelry tutorial to see how you can add those patterns to your Raverly Shop.

Upload Your Buttons to Your Website:

The first thing you will need to do is upload the shop buttons you designed from lesson two onto your site, so that you can grab the image URL from each of them.


Weebly Users:
You'll need to create a page, where you can drag the IMAGE element onto it. 

When you create your page, make sure you CHECK the "Hide page in navigation" BOX to hide this page from the navigation menu and your users, and in the Advanced Settings for the page, you'll also need to CHECK the "Hide this page from search engines" BOX to keep others from finding the page accidentally.

Now that you have your page created, click Save & Edit to go to the page.
Image / Gallery elementsImage & Gallery Elements
Drag either the IMAGE or GALLERY elements onto the page and UPLOAD your buttons.

Next, right-click each image and copy the image URL. Paste and save each URL to a spreadsheet or notepad for future reference. Proceed to the next step below...

Wordpress Users:
You guys have it easy. Go to the Media section of your editor, click Add New and UPLOAD your buttons.

Next, click on each image and copy the image URL from the URL field. Paste and save each URL to a spreadsheet or notepad for future reference. Proceed to the next step below...


Other Users:
If you have a place to upload your media like Wordpress users, do it this way. Otherwise, create a page where you can place your images, copy the URL of each image and save it to a spreadsheet or notepad for future reference. Proceed to the next step below...

How to find the code for each product on Ravelry:

Now we are going to find the code you need on Ravelry.

Go to your Pro Account on Ravelry, and click on "Manage Store". This will take you to the patterns section, where you can add new patterns to your store and where you can edit the details of your patterns.

You will need to click on each pattern to find the codes you need, and this is what you will be looking for once you have clicked on the pattern in question:
Picture

Configuring your Website for Ravelry Buttons:

In order to use the cart code links for the buttons on your website, you will first need to configure the header of your site with a simple line of code which can be found on this Ravelry page here.

Please note: You only need to do this if you want to have View/Show Cart buttons and/or Add to Cart buttons on your site. The Buy Now button doesn't require this step. If you want to run Ravelry promotions on your site, you will need the Add to Cart links. If you've decided you only want to use the Buy Now code, you can skip this step...

Weebly Users:
You will paste this code into the the header code of your website. You will find this in the Settings section (at the top) of your site under the SEO tab (to the left).

You'll see I've highlighted where I have pasted the Ravelry cart code onto my site below...
Where to find the Weebly Header Code
Simply paste it into the Header Code box, click the green "Save" button at the button and click "Publish". Now you can use the cart code on your site.


Wordpress Users:
I believe you can find the header of your website by clicking on the Appearance tab, followed by clicking on Editor. However, according to Ravelry, you can add it to your normal page template. You can learn more about this here.


Other Users:
You need to locate where the header of your site is, and paste the code there. You can learn more about this here.

View/Show Cart Ravelry Button:

The first button we're going to make is the "View Cart" button or the "Show Cart" button, or however you would like to call it.

This is the button that you will want to have on all of your shop pages or throughout your site to help your customers find easily what they've already added to their cart. 

When the View Cart button/link is clicked, it opens up a pop-up window that hovers over your page to show you what's been added to the shopping cart. It will look like this...
Ravelry Shopping Cart pop-up
The code you will need for this button looks like this:
<a href="#" onclick="R.cart.show(36645); return false;">show cart</a>
Take note that I have highlighted the number in the code above in PURPLE. This number is what makes my shopping cart link unique to my store. You will have a different number that is unique to your own shop.

You will only need to copy it once, or at the very least take note of the numbers in parenthesis (). 

You can find this code/number in your pro, manage store section of your ravelry account when you click on any of your patterns. It's the code next to "Show cart link", see it highlighted below...
Show cart ravelry link
Now, let's make your official view shopping cart button!

Copy the following code:
<a href="#" onclick="R.cart.show(36645); return false;"><img src="URL" border="0" width="161" /></a>
In the code above, you'll need to change the following:
  • 36645 - change this number to the one found in your Ravelry account.
  • URL - change this to the URL for your View Shopping Cart image/button. It will look something like this: "http://www.weebly.com/uploads/1/4/3/9/14399682/_974069_orig.png".
  • 161 - you can change this number to adjust the pixel width of your button. If you would prefer to adjust the width via percentages instead, just add the % symbol after the number.

Once you've done this, your code will look like this:
<a href="#" onclick="R.cart.show(36645); return false;"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/_974069_orig.png" border="0" width="161" /></a>
embed codeembed code element
All that's left to do is place this code wherever you want it to go!

Weebly Users:
Locate the "EMBED CODE" element from the sidebar and drag it into position. Paste your shopping cart code into the element and align accordingly.


Wordpress Users:
Simply paste the code onto your page where you'd like it to go.


Other Users:
If you have an element website builder, drag that element onto the page and paste your code into into it. If not, simply paste the code onto your page where you'd like it to go.

Here's my View Cart Button finished:

Add to Cart Ravelry Button:

The next button we're going to make is the "Add to Cart" button. This is the button that you will want to have if you're wanting to make use of the ravelry promotions feature.

Like when the View Cart button/link is clicked, the Add to Cart button/link also opens a pop-up window that hovers over your page to show that you've just added a new pattern to the cart.

The code you will need for this button looks like this:
<a href="#" onclick="R.cart.add(36645, 220124); return false;">add to cart</a>
Take note that I have highlighted the two numbers in the code above... the first one in PURPLE and the second in YELLOW. You will recognize the purple number as my unique store number. The yellow number is my pattern's unique number.

You should already have your unique store number noted down. Now you need to go into each of your patterns and take note of the second set of numbers in parenthesis (). You may find it helpful to create a spreadsheet in Excel (Microsoft) or Numbers (Mac) to keep track of your pattern ravelry code numbers.

You can find this code/number in your pro, manage store section of your ravelry account when you click on any of your patterns. It's the code next to "Add to cart link", see it highlighted below...
add to cart ravelry
Now, let's make your official add to cart button!

Copy the following code:
<a href="#" onclick="R.cart.add(36645, 220124); return false;"><img src="URL" border="0" width="120"/></a>
In the code above, you'll need to change the following:
  • 36645 - change this number to the one found in your Ravelry account.
  • 220124 - change this number to your pattern's unique number.
  • URL - change this to the URL for your Add to Cart image/button. It will look something like this: "http://www.weebly.com/uploads/1/4/3/9/14399682/_8947683_orig.png".
  • 120 - you can change this number to adjust the pixel width of your button. If you would prefer to adjust the width via percentages instead, just add the % symbol after the number.

Once you've done this, your code will look like this:
<a href="#" onclick="R.cart.add(36645, 220124); return false;"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/_8947683_orig.png" border="0" width="120"/></a>
Repeat this process until you have the code for each of your patterns. TIP: Once you have one, all you have to change is the pattern number!

All that's left to do is place this code wherever you want it to go! To add this button to your website, simply repeat the same steps you did to add your view cart button code to your site.

Here's my Add to Cart Button finished:

Buy Now Ravelry Button:

The last button we're going to make today is the "Buy Now!" button. This button doesn't need any code configurations to work on your site. 

However, this button code will not work with the Ravelry promotions since it takes the customer directly to Paypal's checkout. 

The code you will need for this button looks like this:
<a href="http://www.ravelry.com/purchase/rebeckahs-treasures/220124">buy now</a>

OR

<a href="http://www.ravelry.com/purchase/rebeckahs-treasures/220124"><img src="http://www.ravelry.com/images/shopping/buy-now.gif" border="0"/></a>
Take note that I have highlighted the numbers in the codes above in YELLOW. You will recall from the add to cart button that the yellow number is my pattern's unique number. Take a minute to notice that it is the same number in the add to cart example above...

I have also highlighted part of the URL in RED. This is my unique shop link name. It will be different for your shop. 

If you haven't already done this, you need to go into each of your patterns and take note of the numbers in parenthesis (). You may find it helpful to create a spreadsheet in Excel (Microsoft) or Numbers (Mac) to keep track of your pattern ravelry code numbers.

You can find this code/number in your pro, manage store section of your ravelry account when you click on any of your patterns. It's the code next to "Buy now link" or the "Buy now image", see it highlighted below...
buy now ravelry link
Now, let's make your official view shopping cart button!

Copy the following code:
<a href="http://www.ravelry.com/purchase/rebeckahs-treasures/220124"><img src="URL" border="0" width="144"/></a>
In the code above, you'll need to change the following:
  • rebeckahs-treasures - change this to your unique shop link name.
  • 220124 - change this number to your pattern's unique number.
  • URL - change this to the URL for your Buy Now! image/button. It will look something like this: "http://www.weebly.com/uploads/1/4/3/9/14399682/_5219146_orig.png".
  • 144 - you can change this number to adjust the pixel width of your button. If you would prefer to adjust the width via percentages instead, just add the % symbol after the number.

Once you've done this, your code will look like this:
<a href="http://www.ravelry.com/purchase/rebeckahs-treasures/220124"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/_5219146_orig.png" border="0" width="144"/></a>
Repeat this process until you have this code for each of your patterns. TIP: Once you have one, all you have to change is the pattern number!

All that's left to do is place this code wherever you want it to go! To add this button to your website, simply repeat the same steps you did to add your view cart button code to your site.

Here's my Buy Now! Button finished:

Want a simple spreadsheet you can download to keep track of your patterns?
Check out my Website Shop 101 Free Downloads here!

Thanks so much for visiting today! Tell me what you thought about the third lesson of the series by commenting below or giving this a rating...
Additionally, please let me know if you have any questions or concerns. I will be happy to help in any way I can. Comment below, or visit my Website Shop 101 facebook support group...

Be sure to check out the intro to this series for upcoming lessons or lessons you may have missed!

Wishing you a terrific day. See you again soon for lesson 4, where we'll make PayPal Buttons for your store...



Hello Visitor and Welcome to Rebeckah's Treasures...

I am a Norwegian/Canadian currently studying Midwifery in the UK. I love to crochet!

At Rebeckah's Treasures, I share my crochet patterns and treasures. I hope they inspire you to crochet your own little treasures too...

Comments
comments powered by Disqus
    Rebeckah's Treasures' Logo

    Shop Crochet Patterns!


    Rebeckah of Rebeckah's Treasures
    Hello, my name is Rebeckah. 
    I hope my crochet inspires you to create your very own treasures!
    Learn more about me...


    Connect with Us!




    Tweets by beckastreasures
    All Free Crochet


    Categories

    All
    Accessory
    Afghan Squares
    Amigurumi
    Apparel
    Applique
    Articles & Resources
    Baby Apparel
    Bags & Wallets
    Barbie
    Barbie Furniture
    Barbie's Friends
    Bookbinding
    Cakes & Baked Goods
    CAL Crochet A Longs
    Chess
    Christmas
    Contest
    Craft
    Crochet
    Crochet Stitches
    Crochet With Beads
    Crochet With Wire
    Disney Inspired
    Doll
    Easter
    Flower
    Free Pattern
    Friday Features
    Get Stuffed Magazine
    Giveaways & Special Offers
    Greybriar's Travels Magazine
    Guest Post
    Halloween
    Holiday
    Home
    How To Tutorials
    Interviews
    Midwifery
    Pay Patterns
    Photo Tips
    Recipes
    Reviews
    Round Ups
    Saturday Link Party
    Sewing
    Shop Updates
    Social
    Survey
    Tapestry Crochet
    Toys
    Tuesday Treasures
    Tutorial Video
    Tyc-magazine
    Under The Sea
    Updates
    Valentines
    Website Shop 101
    Wedding
    Wip


    Archives

    October 2021
    August 2021
    August 2017
    June 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    September 2015
    August 2015
    July 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    December 2014
    November 2014
    October 2014
    September 2014
    August 2014
    July 2014
    June 2014
    May 2014
    April 2014
    March 2014
    February 2014
    January 2014
    December 2013
    November 2013
    October 2013
    September 2013
    August 2013
    July 2013
    June 2013
    May 2013
    April 2013
    March 2013
    December 2012


    RSS Feed


    © 2012-2021 Rebeckah Ferger
    All rights reserved. 

    Disclaimer: This website makes use of sponsored and/or affiliate links. Please see this page for more information.
Powered by Create your own unique website with customizable templates.
  • Home
  • About
    • Who Am I?
    • My Crochet Story
    • Mission
    • Disclosure Policy
    • Skill Levels
  • Store
    • Crochet Patterns
      • Special Offers
      • New Releases
      • Accessory Crochet Patterns
      • Afghan Square Crochet Patterns
      • Amigurumi Crochet Patterns
      • Applique Crochet Patterns
      • Baby Crochet Patterns
      • Dolly Crochet Patterns
      • Fashion Doll Crochet Patterns
      • Free Downloads
      • Holiday Crochet Patterns
      • Tapestry Crochet Patterns
      • Under the Sea Crochet Patterns
      • Wedding Crochet Patterns
    • Loyalty Program
      • List of Loyalty Program Patterns
    • Disclaimer and FAQs
  • Blog
    • Blog Archive
    • Crochet Resources
    • Crochet Stitches
    • Get Your Crochet Patterns Featured!
  • Free
    • Free Crochet Patterns
    • New Free Releases
    • Free Accessory Crochet Patterns
    • Free Afghan Square Crochet Patterns
    • Free Amigurumi Crochet Patterns
    • Free Applique Crochet Patterns
    • Free Baby Crochet Patterns
    • Free Dolly Crochet Patterns
    • Free Fashion Doll Crochet Patterns
    • Free Guest Crochet Patterns
    • Free Holiday Crochet Patterns
    • Free Tapestry Crochet Patterns
    • Free Under the Sea Crochet Patterns
    • Free Wedding Crochet Patterns
    • Free Crochet Patterns Coming Soon
  • Contact
    • Newsletter
    • Suggest a Crochet Pattern
    • Testing Opportunities