Single-Column Shopify Product Page Template
Budget: $30 – $250 AUD
Budget:
AUD 200
Project Overview:
Modify a Shopify Product Page template to support a step-by-step "Do It Yourself - Design a Ring" flow. The goal is to provide an interactive customization experience where users select their ring preferences and proceed directly to checkout.
Flow Requirements:
Step 1: Capture Name
User inputs their first name.
Name will be dynamically injected throughout the steps (e.g., personalized greetings).
Name should be stored using item.property and passed through checkout.
Step 2: Capture Email Address
User inputs their email address.
Email should be added to the mailing list for future marketing.
Step 3: Pick a Shape
User selects a ring shape from a sliding image carousel.
Selection triggers an update of images and available design options.
Once a shape is selected, the user proceeds to the next step.
Step 4: Pick a Design
User selects a ring design.
Selection dynamically updates the displayed images.
Step 5: Select Engraving Font & Text
User selects a font style for engraving.
User inputs engraving text.
Step 6: Input Ring Size & Checkout
User selects ring size.
A "Buy Now" CTA should bypass the cart and take the user directly to checkout.
Additional Requirements:
Data Handling:
The following selections must be stored in item.properties and passed to checkout:
Name
Email
Selected Shape
Selected Design
Engraving Font & Text
Ring Size
Dynamic Image Updates:
Images should dynamically change based on the selected shape and design.
Progress Bar:
A progress bar should be displayed at the top of the template to indicate user progress.
Dynamic Greetings Placeholder:
Although missing from the provided photos, a placeholder for personalized greetings should be included (reference available in one screenshot, text in blue color). These greetings will use the user input name but predefined 15 values of randomised greetings. Such as "Great choice, {{first.name}}!", "That's looking good, {{first.name}}!"
Theme Customization Compatibility:
All images, text labels, and variables should be configurable within the Shopify theme customization settings (consistent with other templates).
Deliverables:
Modified Shopify product page template.
Fully functional step-by-step ring customization flow.
Integration with Shopify’s cart & checkout system.
Theme customization settings for easy modifications.
Notes:
All assets (images, labels, etc.) will be provided.
Example screenshots are available for reference.
AUD 200
Project Overview:
Modify a Shopify Product Page template to support a step-by-step "Do It Yourself - Design a Ring" flow. The goal is to provide an interactive customization experience where users select their ring preferences and proceed directly to checkout.
Flow Requirements:
Step 1: Capture Name
User inputs their first name.
Name will be dynamically injected throughout the steps (e.g., personalized greetings).
Name should be stored using item.property and passed through checkout.
Step 2: Capture Email Address
User inputs their email address.
Email should be added to the mailing list for future marketing.
Step 3: Pick a Shape
User selects a ring shape from a sliding image carousel.
Selection triggers an update of images and available design options.
Once a shape is selected, the user proceeds to the next step.
Step 4: Pick a Design
User selects a ring design.
Selection dynamically updates the displayed images.
Step 5: Select Engraving Font & Text
User selects a font style for engraving.
User inputs engraving text.
Step 6: Input Ring Size & Checkout
User selects ring size.
A "Buy Now" CTA should bypass the cart and take the user directly to checkout.
Additional Requirements:
Data Handling:
The following selections must be stored in item.properties and passed to checkout:
Name
Selected Shape
Selected Design
Engraving Font & Text
Ring Size
Dynamic Image Updates:
Images should dynamically change based on the selected shape and design.
Progress Bar:
A progress bar should be displayed at the top of the template to indicate user progress.
Dynamic Greetings Placeholder:
Although missing from the provided photos, a placeholder for personalized greetings should be included (reference available in one screenshot, text in blue color). These greetings will use the user input name but predefined 15 values of randomised greetings. Such as "Great choice, {{first.name}}!", "That's looking good, {{first.name}}!"
Theme Customization Compatibility:
All images, text labels, and variables should be configurable within the Shopify theme customization settings (consistent with other templates).
Deliverables:
Modified Shopify product page template.
Fully functional step-by-step ring customization flow.
Integration with Shopify’s cart & checkout system.
Theme customization settings for easy modifications.
Notes:
All assets (images, labels, etc.) will be provided.
Example screenshots are available for reference.