Shopify Frontend

Overview

This repository contains the frontend code for a Shopify store, utilizing Liquid, HTML, and CSS.

Prerequisites

Shopify Account

Activate the "profilesforhumanity-org-theme-exp" theme in Shopify.

Project Structure

Templates

Liquid Templates:

Located in the "templates" directory, these files control the structure of different pages (e.g., product.liquid). Import the code from "profile_textarea.html" into "product.theme_template.liquid".

Stylesheets:

CSS files in the "assets" directory handle store styling. Customize styles in "main.css".

JavaScript

The "assets" directory may include custom JS files. Customize JavaScript in "main.js".

Registration of the Product form creation in Shopify

Overview

This guide provides step-by-step instructions for creating a product registration form in Shopify, including condition checks based on customer ID and order ID.

Step 1 - Login to Shopify

Login to Shopify account - https://www.shopify.com/login

Step 2 - Dashboard Selection

Upon login, the default PFH-clone is displayed, confirming the user's inclusion in the project.

Step 3 - Theme Selection

• Default Dashboard is being displayed on entering the Shopify account.
• Ensure the "profilesforhumanity-org-theme-exp" theme is highlighted in the Online Store theme selection.
• Theme of the project, is highlighted in the image below.

Step 4 - Access Code Editing

Click on the (...) beside the Customize button, to create a Registration of the Product creation template page. Click on the 'Edit code' highlighted in the image below

Step 5 - Navigate to Collection Template (Product Registeration Form)

Navigate to the section in the Menu, and select the file name product-template.liquid. Default product-template code is contained in the file.

Step 6 - Front-end Code

Front-end code git URL - https://github.com/changing-the-present/pfh-editable-profiles/blob/main/frontend/product-template.liquid

Copy the product-template.liquid in the above git url to the product-template.liquid file into the shopify.

Step 7 - Front-end Code

Make sure you 'save' the code and 'exit' the product-template.liquid page.

Step 8

Creation and listing of Registration Product Collection is displayed in Shopify 'Collections' tab section. Default if no collection will be displayed. User can create collections by clicking on 'Create Collection' button on thr right top menu.

Step 9 - Creation Collection

Creation Registration Product Collection through Shopify admin portal

Step 10 - Preview

• Preview Registration Product Collection through 'Online Store'

• Click on Registration Product Collection on the top Menu in the Preview page

Step 11 - Product Registration Form

The registration of the product collection form is displayed

Product Creation in Shopify - (User Profile)

Step 1 - Login to Shopify

Login to Shopify account - https://www.shopify.com/login

Step 2 - Dashboard Selection

Default PFH-clone is displayed, since user is been added to the project

Step 3 - Theme Selection

• Default Dashboard is being displayed on entering the Shopify account.
• Ensure the "profilesforhumanity-org-theme-exp" theme is highlighted in the Online Store theme selection.
• This is the theme of the project, is highlighted in the image below.

Step 4 - Access Code Editing

Click on the (...) beside the Customize button, to create a Product new template page. Click on the 'Edit code' highlighted in the image below

Step 5 - Create a New Template

On clicking on the 'Edit code' button, a default dashboard is displayed. Click on the Add new template to create the product page.

Step 6 - Configure New Template

Popup of 'Add new template' is been displayed.

• 6.1 Template type - Select product
• 6.2 Select liquid file
• 6.3 File name - name the file as per your preference

After filing up all the required data, click on done.

Step 7 - Edit Template Code

product.theme_profile.liquid template is been created. This page contains the default code. We can change in this .liquid file as per user development requirements.

Step 8 - Save Changes

Front-end code git URL - https://github.com/changing-the-present/pfh-editable-profiles/blob/main/frontend/profile_textarea.html Copy the profile_textarea.html (code in the above git url) code to the .liquid file that is created.

Step 9 - Save Changes

Make sure you 'save' the code and 'exit' the .liquid page. The product theme template is created by the following code.

Step 10 - Create Product

Navigate to 'Products' on the left menu, then click on the 'Add Product' to create a product (profile page as per our project)

Step 11 - Product Details

Details of the product need to be entered to create a product page. Make sure you enter Title, which will be displayed as the name of the product. Also select the theme template 'theme_profile', which is the name of the product.theme_profile.liquid which was created in step 6. Click on save.

Step 12 - Preview and Confirm

After the creation of the product, make sure your product name(profile name) is listed in the product listing. You can click on preview eye icon to preview on the Online Store.

Step 13 - Product Page Display

• These steps guide you through setting up and customizing a product page on Shopify using the specified frontend code

• Below image shows default Profile page being displayed