Ok, time to test this baby out! On the front-end of your website, navigate to the product that's using the new custom template. I recommend doing this on the "New order" email template, so that you as the store admin will be notified of what custom options the customer chose. Repeat this process on any other emails that you want to include the line item properties (custom product options). This is where we'll be adding the code for your custom product options. We're going to add our custom fields just above that (where the arrow is pointing), so add a few lines of extra space there. In the Minimal theme, the Add to Cart and Quantity fields look like this (see the highlighted text below). (Add to Cart will be somewhere in the middle). The Add to Cart button will be somewhere between two HTML form tags that look like this: If your theme uses Sections, check in the Section titled "product-template.liquid". If you can't find it in, go to the Snippets folder and look for a Snippet called "product-form," "product," or "form." Click through those until you find the Add to Cart button. In some themes, this won't be in the product template that we just created. Click through until you find the Add to Cart button code. Type in "add" or "add to cart" and this will help you find every instance of that word in the code. The easiest way to find the code for the Add to Cart button is to hit Command F (on a Mac) or Cntrl F (on a PC)-this will bring up the "Find" window. I recommend adding it just above the Add to Cart button and quantity field. The trickiest part of this step is to figure out where to add the code. This tutorial was first recorded before Shopify came out with "Sections." If your theme uses Sections, this tutorial will still work, but instead of adding the code below in the new product template that you created in Step 1, add it in the Section titled "product-template.liquid". Step 2: Add the code for the form fields you want to use Update: Sections Next, go to the Products area of your Shopify Dashboard, open the product that you want to use this template for, and choose the new template. Note: The name you give the new template can be anything you want, but I'll use "custom-1" in the tutorial.Ĭlick the "Create template" button to create your new template. In the window that appears, choose "product" and name it "custom-1". In the Templates folder, click "Add a new template." In your Shopify Dashboard, go to Online Store > Themes >. However, the steps are basically the same no matter what theme you're using. Note: In this tutorial, I'm using the Minimal theme as an example. Instructions: How to create your own custom products You can create any combination of the options shown below, including text inputs (small or large text areas), checkboxes, file uploads, drop-down selects, and radio buttons. Here is an example of the types of custom product options you can set up. Note: Shopify refers to these kinds of custom product options as "line item properties." Much of the information in this tutorial was originally published in Shopify's documentation here. Check out the example below to see what's possible. In this tutorial, I'll show how you offer extensive customizations to your products on Shopify. Video tutorial (full written tutorial with all code below) Plus, these methods only require a tiny amount of code (no JavaScript), so your site doesn't get unnecessarily slowed down. There are plenty of apps that can do this, but apps are expensive and they bloat your store by adding extra scripts and slowing down your site.įortunately, there's a lot you can do to offer customized products without paying for an app or hiring a developer. Maybe you offer monograms, or you need to let customers upload a file, or you want to let them choose from other custom options. Sometimes you need to let your customers customize a product before checkout on your Shopify store.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |