Shopify Product Template / Check Out Process Customization

This project received 22 bids from talented freelancers with an average bid price of $633 USD.

Get free quotes for a project like this
Employer working
Project Budget
Total Bids
Project Description

I’m building a Shopify store that sells trophies. I've built a few other Shopify stores.

I need a shopify expert to customize my product template and cart template to accommodate color swatches, custom line item properties, cart attributes, and linked select elements (or YOUR BETTER SOLUTION).

A few details:

-I’m developing locally with Shopify Theme Manager.
-My source code is under version control, and on You can develop on a branch to be merged to production when project is complete.
-I’d like you to heavily comment your code—so if I decide to make modifications in the future I’m not completely lost.
-I’ll need cross-browser capability IE 7+, Mozilla, Chrome, Safari, Opera.

I’d like customers to experience the following process (in this order) when adding product to their cart:
1.) Pick the quantity of a product
2.) Select the color via color swatches
3.) Choose whether or not they want engraving
4.) Enter the engraving in a text input on the product page BEFORE adding to cart.
5.) Choose Whether or not to upload a file / logo
6.) Use transloadit ([url removed, login to view]) to upload that file if Yes

The select elements must somehow be linked (I tried linked select elements without success) or logic must be implemented so that the engraving text inputs are hidden by default and only appear when the customer select "yes" to the "Would you like engraving?" select element.

Fail #1. I tried using cart attributes and including the attribute[engravings] but it applied it globally to all items in the cart.

Fail #2. I've played around with Linked Select Elements without success.

Fail #3. I implemented liquid logic to only show the engraving text inputs when the customer chooses Yes...But I'm not good with jQuery and don't understand how the [url removed, login to view] works.
Detailed Specifications for Sequence of Ordering:

1.) Define Quantity using Select Form
--Update Price When Quantity is Selected Using jQuery with [url removed, login to view] (no add to cart required)
--Assign ‘Quantity_Value’ to Some_Value to determine # of engraving text inputs are needed
--Show a discounted value for quantities 20-30, 30-40, 40-50 etc. etc. Comment this out so I can adjust prices when needed
EG: IF ‘Quantity_Value’ >= 10 THEN price = [url removed, login to view] * .95 * Quantity_Value and so on.

2.) Select Color from Color Swatches, update without saving to cart....
I’ve already implemented this using the swatches tutorial.

3.) Select Engraving Yes / No from Select Form
Default selection should be ‘No’ so that engraving text inputs are hidden by default.
Text inputs should appear when customer chooses ‘Yes’

4.) If Engraving = Yes
Then Display Correct Number of Text Inputs
Pass text string(s) to backend

5.) Select Yes/ NO for file/logo upload

6.) If yes display transloadit upload input

7.) Add To Cart -- Submits form and passes line item properties, cart attributes, etc. to backend. It’s extremely important to be able to access the customs objects/properties from the backend to include in order email updates and for building an app for order fulfillment at my warehouse.

Engraving Form Specs:
-Max Characters = 20 (use HTML5 required attribute)
-Fields *Required If Select_Engraving == ‘Yes’
-Popup or notification if “add to cart” submitted without engraving while “yes” selected for Engraving logic. “Must enter engraving text to add to cart” etc.
I will style the form.

In your proposal please elaborate on how you would solve this issue.
Are you going to use line item properties? How will you modify the [url removed, login to view] As you can see I’ve tried a few things, each with their own issues. I’d also like to see previous work done on Shopify stores.

If you’d like I can provide access to my github repo, and the front end of my shop. I’ve been working through this problem for 3 days but don’t have jQuery skills to complete it.


Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online