Back to Top

Shopify Hydrogen Theme

Updated 19 October 2023

The Shopify Hydrogen Theme is a highly versatile and customizable e-commerce template designed to provide a seamless and engaging online shopping experience for both merchants and customers.

Now, we have a custom Hydrogen theme that you can use on your various storefronts. You can easily configure the theme as per your business requirements.

Custom themes can be built from scratch or based on an existing theme framework and then modified to align with the brand identity, layout preferences, and business needs of the store owner.

You can also update the Theme Content via the Shopify metafields.

Note: To make use of the Custom Hydrogen theme on the Shopify Multi Vendor Marketplace app as well, you must have the below-mentioned apps –

Searching for a Shopify
Headless solution ?
Find out More

Check the video tutorial below:



The customizable Shopify theme deploys on Oxygen and non-Oxygen (like Cloudflare, etc.) platforms as well.

This deployment will be done from our end after you have purchased our custom Shopify hydrogen theme.

Tech Stack – Shopify Hydrogen Theme

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

Klivyo Integration

Klaviyo is a popular marketing automation platform designed specifically for e-commerce businesses.

It helps businesses gather customer data and engage with their audience through personalized email marketing campaigns, SMS marketing, and targeted advertisements.

We have provided this integration by default in our custom Shopify Hydrogen Theme.

Shopify Hydrogen Theme-16

Shopify Storefront: View

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

Shopify Hydrogen Theme-15

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

Shopify Hydrogen Theme-14

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.

Shopify Hydrogen Theme-13

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

Shopify Hydrogen Theme-12

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

Shopify Hydrogen Theme-11

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

Shopify Hydrogen Theme-10

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

Shopify Hydrogen Theme-9

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

Shopify Hydrogen Theme-8


This section displays the complete list of marketplace sellers.

Shopify Hydrogen Theme-7

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

Shopify Hydrogen Theme-6

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 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’,
Shopify Hydrogen Theme-5

Policies display the seller’s shipping and other policies.

Shopify Hydrogen Theme-4

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

Shopify Hydrogen Theme-3

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

Shopify Hydrogen Theme-2

Seller Login Section:

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

Shopify Hydrogen Theme

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

Shopify Hydrogen Theme

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.

Dashoard –


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:




Seller Contact details:


Customer End

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:


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 below 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.


Therefore, In conclusion, that’s all for the Shopify Hydrogen Theme.

So if you still have any doubts or suggestions, feel free to add a ticket.

Moreover, let us know your views to make the extension better

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content