Shopify Hydrogen Theme

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 –

• Shopify Multi Vendor Marketplace App
• Multi Vendor API App
• Product Reviews App

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.

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

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 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 login/register. After login 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.

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:

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 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 https://webkul.uvdesk.com/