Scribd
Upload
11 views3 pages

Dynamic Shopify Product Page Setup

The assignment requires the creation of a customized Shopify Product Page for a Gold Ring that dynamically displays a Price Breakup Table based on selected product variants. It involves setting up product variants with specific metafields and ensuring real-time updates to the price table using JavaScript. Deliverables include a ZIP folder of the theme, documentation, and optional links to a Shopify dev store.

Uploaded by

Damini Deshmukh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views3 pages

Dynamic Shopify Product Page Setup

The assignment requires the creation of a customized Shopify Product Page for a Gold Ring that dynamically displays a Price Breakup Table based on selected product variants. It involves setting up product variants with specific metafields and ensuring real-time updates to the price table using JavaScript. Deliverables include a ZIP folder of the theme, documentation, and optional links to a Shopify dev store.

Uploaded by

Damini Deshmukh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Shopify Intern Assignment: Dynamic Product Page with Price Breakup

Objective:
Create a customized Shopify Product Page that dynamically displays a Price Breakup
Table based on the selected product variant (e.g., gold purity: 14K, 18K, 22K).

Requirements

Shopify Product Setup:

1. Use any free Shopify theme (e.g., Dawn, Refresh, or Mojuri if available).

2. Create a product with:

○ Title: Gold Ring

○ At least 3 variants based on gold purity (e.g., 14K, 18K, 22K)

○ Attach custom metafields for each variant that include:

■ gold_price (e.g., ₹4200/g)

■ gold_weight (e.g., 2.5g)

■ diamond_price (if applicable)

■ making_charge (flat or percentage)

■ total_price (calculated or static)

Product Page Customization:

● Add a Price Breakup Table below the product title and above the “Add to Cart”
button.

● The table must update in real-time when the user changes the variant.

Example Table Structure:

Component Value
Gold Price ₹10,500

Diamond Price ₹4,000

Making Charges ₹2,000

Total Price ₹16,500

Functionality Expectations:

● Must use Shopify’s [Link] or [Link].

● Use JavaScript (vanilla or jQuery) to dynamically update the table when variant
changes.

● Store variant-specific price breakup data in metafields, JSON, or data-attributes.

Technical Guidelines:

● Use Shopify Liquid to render initial content.

● Write JS code to listen to variant changes and update DOM.

● Keep styling minimal but clean (Tailwind or native CSS acceptable).

Deliverables:

1. ZIP folder of the customized theme.

2. Screenshots or screen recording of the final output.

3. Optional: Share the Shopify dev store link (if using a Partner account).

4. Brief documentation (max 1 page) describing how the data is fetched and displayed.
Evaluation Criteria:

● Understanding of Shopify product structure and metafields.

● Ability to integrate frontend (HTML/JS) with Shopify Liquid.

● Code readability and structure.

● Problem-solving: how well variant-switching logic is handled.

● UI clarity and responsiveness.

For reference, you may explore product pages from Geer and Ethera Diamonds

websites.

You might also like