Shopify Hydrogen Theme

The Shopify Hydrogen Theme is a versatile and fully customizable eCommerce solution designed to deliver a seamless and engaging shopping experience for both merchants and customers.

The theme can be used across multiple storefronts and easily configured to match your specific business requirements.

Shopify Hydrogen custom themes can be built from scratch or developed using an existing theme framework, then refined to align with your brand identity, layout preferences, and operational needs.

Theme content can also be updated using Shopify metafields.

Note: To use the Custom Hydrogen theme with the Shopify Multi Vendor Marketplace app, you must have the following apps –

• Shopify Multi Vendor Marketplace App
• Multi Vendor API App

Check the video tutorial below:

Using Shopify Hydrogen themes offers several strategic and technical advantages for modern eCommerce businesses:

• High performance and speed
• Full customization and flexibility
• Scalable architecture
• Better developer control

The custom Shopify Hydrogen theme can be deployed on Oxygen as well as non-Oxygen platforms such as Cloudflare.

Once you purchase the custom Shopify Hydrogen theme, the deployment will be handled from our end to ensure proper setup and functionality.

For the creation of the custom Shopify Hydrogen theme, we have used GraphQL storefront API Development for connecting the Shopify backend with the front end.

Apart from that, we have made use of the hydrogen frameworks to create this custom Hydrogen theme, like:

• Remix,
• Typescript
• Tailwind CSS

Klaviyo is a popular eCommerce marketing automation platform used for email, SMS, and targeted campaigns.

It comes pre-integrated by default with our custom Shopify Hydrogen Theme for seamless customer engagement.

The home page of the custom Shopify Hydrogen Theme appears to customers as per the snapshot below.

On the top left-hand corner, tap on the three horizontal lines, and that brings up the slider showing the various sections.

From here, you can access various sections of the website. These are customizable as per your requirements, like:

Home Page: This displays the home page of the website.

Catalog – Displays the complete listing of products with filter options on the left-hand side.

Here, the users of the website can easily filter the products using various filtering options.

Collection – This shows the collections added to the collection section by the store admin.

Marketplace – Displays the landing page for the users who want to become marketplace vendors.

It also has content related to the marketplace features that is customizable as per requirements.

Vendors –

This section displays the complete list of marketplace sellers.

The users can also tap on any of the sellers and view their profile page, which has more information related to the marketplace vendor.

The users can view the complete listing of products by the vendor, his recently added products, reviews, policies, and contact information for the seller as well.

Note: Create an account over emailjs for the contact us form and add the email service like Gmail or other. After that, provide us with the following details:

• Service_id: ‘YOUR_SERVICE_ID’,
• Template_id: ‘YOUR_TEMPLATE_ID’,
• User_id: ‘YOUR_PUBLIC_KEY’,

Policies display the seller’s shipping and other policies.

The seller contact section shows the seller’s contact details to the users.

There is also a contact us button, that shows the section to get in touch with the seller.

Seller Login Section:

Tapping the Become a Seller button brings up the section from where sellers can log in/register. After logging in to their account panel, they can manage their products, orders, and more.

To register as a vendor, tap the Join Now link, and that brings up the below section.

Here, the seller needs to enter the required details and tap the Create my Account button to create their seller account.

After account creation, the vendor can see various sections to manage the seller account panel options.

Dashboard –

After that, to update the profile details, navigate to Profile>>My Account.

Enter the detail like seller address, zip code and contact.

Then add the seller’s store description.

After that, add the seller policy and click Save Changes.

Now add the store banner as shown in the below image:

Seller profile and status:

Seller shop logo:

Now, to Add Products seller will click on Products>> Products listing>>Add product.

Then add the details to create a new product, like the product name, type, description, etc., and then click on Save.

Frontend seller profile page:

All Products:

Policy:

Seller Contact details:

To become a customer, you first need to register by adding your email and password.

Or if you are already a registered user, then login by adding the details:

Now, to view all the sellers, click on Seller.:

Click on the particular seller whose profile you want to visit:

Catalog:

To purchase a product, customers need to click on the catalog:

After that, click on the product you want to purchase:

Then click on the Add to Cart or Buy button to purchase the product as per your choice.

Enter the details at the checkout page as shown in the image:

Then click on Continue shipping to select the shipping method.

After that, select the payment method and billing address:

After that, click on Pay Now to complete the order.

That concludes our overview of the Shopify Hydrogen Theme.

If you have any questions or suggestions, please feel free to raise a support ticket. We would also appreciate your feedback to help us improve the extension:
https://webkul.uvdesk.com/