Creating customizable products in your Shopify store not only increase your customer satisfaction, it also increases your conversion rate. Here is a method to add custom options for your Shopify product and convert it into personalized product - Go to Shopify store page and search for "Advanced Product Customizer" app or you can directly the the Shopify app page by clicking on this link Advanced Product Customizer . Install Advanced Product Customizer app for free in your Shopify store From the application dashboard, enable to app embed block to complete the installation process Click "Product Custom Options" From the Shopify products list, select the product on which you want to add custom options. Advanced Product Customizer offers Image Swatch, Color Swatch, Text box, File Upload, Radio, Checkbox, Date Picker and more. Here is the a demo video for adding custom option for a Shopify product -
Hi, while working on a ASP.NET project I saw that URLs of the application were quite large and were not much meaningful to the user. Also they were showing the actual folder structure in the project that I found a bit unsecured. So, here I get the requirement to configure application to accept URL of webpages which are meaningful and short.
To fulfill this requirement I used URL routing feature of ASP.NET. URL routing lets you to configure your application to accept URL which do not point to physical files. Instead of this we can show some semantically meaningful URL to user.
For example -
Initial URL -
http://www.yoursite.com/products.aspx?category=laptop
Using routing you can configure your application render same page using following URL -
http://www.yoursite.com/products/laptop
You can also find that new URL is SEO - friendly and can help in search engine optimization (SEO).
To fulfill this requirement I used URL routing feature of ASP.NET. URL routing lets you to configure your application to accept URL which do not point to physical files. Instead of this we can show some semantically meaningful URL to user.
For example -
Initial URL -
http://www.yoursite.com/products.aspx?category=laptop
Using routing you can configure your application render same page using following URL -
http://www.yoursite.com/products/laptop
You can also find that new URL is SEO - friendly and can help in search engine optimization (SEO).
Implementing URL routing in ASP.NET web forms
In the implementation part of routing we need to do mapping of URL using ASP.NET. For this, include "System.Web.Routing" in Global.asax.cs. Here is an example -
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
RouteTable.Routes.MapPageRoute("Product", "Product/{Name}", "~/Product.aspx");
}
Below is the hyperlink present on the ProductList.aspx page. By clicking this hyperlink user is redirected to the Product.aspx page.
<asp:HyperLink ID="hyper" runat="server" NavigateUrl='<%# "Product/laptop"%>' Text='<%# Bind("ProductName") %>' ></asp:HyperLink>
or
Using following code in ProductList.aspx.cs -
On clicking the hyperlink or executing above code the effective URL becomes -
Using following code in ProductList.aspx.cs -
Response.RedirectToRoute("Product", new { Name = "laptop" });
On clicking the hyperlink or executing above code the effective URL becomes -
http://www.yoursite.com/Product/laptop
Now the application is configured to map above URL to Product.aspx.
We can get the name of Product using following code -
string name = Page.RouteData.Values["name"].ToString();
After mapping the URL I found an issue related to path of the images present on Web Page. Some of the images were not displayed after mapping of URL for that web page. Following syntax was used for images -
<img src="Styles/Images/Product.jpg" width="65px" height="65px" />
I found that after mapping the URL effective value for the "src" attribute of "img" was changed. Hence value of "src" attribute was not pointing to some physical file. So, I used following syntax to set the value of "src" attribute in "img" -
<img src="<%= Page.ResolveUrl("Styles/Images/Product.jpg") %>" height="65px" width="65px" />
Very helpful :)
ReplyDeleteThank you :)
ReplyDelete