Join our official Telegram Group to get daily updates. Join Now

How to Create Product Page in Median Ui v1.5 | Median Ui

How to Create Product Page in Median Ui v1.5 | Median Ui

Hello Guys, Welcome to ASThemesWorld. In today's article we are going to share the codes to create Product Page in Median Ui v1.5.

Well, if you have officially purchased the Median UI theme, you will also find the code for the product page in the theme bundle, but many people are unable to afford this theme, due to which they download it illegally. But if you download this theme illegally, you will only get the theme, not the code of the product page. So today in this post we are going to share the code of the product page so that even those who do not have the code of the product page can now create a product page in their blog.

How to Create Product Page in Median Ui?

You just need to use html code to create product page because css code of product page is already in theme. We have given below html codes, wherever you want to create product page, paste those codes there.

Use the following HTML codes to create product page in Median Ui v1.5.

<div class='separator'>
  <img alt="Image Text" src="Image Url Here"/>
</div>

<!--[ Price to show in homepage ]-->
<div class='proPrice' data-text='Price'>Rs. 200.000</div>
<a name='more'></a>

<div class='proInfo'>
  <div class='proInfoL'><small>Size</small><span>Small, Medium, Large, X Large</span></div>
  <div class='proInfoR'><small>Color</small><span>Red, Yellow, Green, Blue</span></div>
</div>
<div class='proInfo one'><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>

<div class='proMarket'>
  <small>or Shop through your favorite <b>"Market Place"</b> :</small>
  
  <!--[ Change attribute href='#' to add url ]-->
  <a title='Tokopedia' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="https://cdn.statically.io/favicons/tokopedia.com" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  </a>
  <a title='Bukalapak' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="https://cdn.statically.io/favicons/bukalapak.com" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  </a>
  <a title='Shopee' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="https://cdn.statically.io/favicons/shopee.co.id" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  </a>
  <a title='Lazada' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="https://cdn.statically.io/favicons/lazada.co.id" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  </a>
</div>

<!--[ Active function ]-->
<input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked>
<input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'>
<input class='allTabs hidden' id='forall-tabs3' type='radio' name='postTabs'>
<div class='postTabs'>
  <div class='tabsHead'>
    <!--[ Change atribute data-text='...' to replace tabs title ]-->
    <label for='forall-tabs1' data-text='Tab 1'></label>
    <label for='forall-tabs2' data-text='Tab 2'></label>
    <label for='forall-tabs3' data-text='Tab 3'></label>
  </div>

  <div class='tabsContent'>
    <!--[ Tabs content ]-->
    <div class='tabsContent-1'>

      <p>Tab 1 Content</p>

    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-2'>

      <p>Tab 2 Content</p>

    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-3'>

      <p>Tab 3 Content</p>

    </div>
  </div>
</div>

Although the Medium UI theme already contains the CSS code for the product page, but if your illegally downloaded theme does not contain the CSS code, add the following CSS code to your theme as well.

Steps to Add Product Page CSS Codes

Step 1. On Blogger Dashboard, click Theme.
Step 2. Click the arrow down icon next to 'customize' button.
Step 3. Click Edit HTML, you will be redirected to editing page.
Step 4. Now search for the code ]]></b:skin> and paste the following CSS codes just above to it.

.post .proPrice,.post .proInfoL,.post .proInfoR,.post .proInfo.one{padding:15px 0;margin-bottom:0;border-bottom:1px solid var(--content-border);flex:0 0 50%;display:block}
.post .proPrice{font-size:22px;color:var(--link-color)}
.post .proPrice:before,.post .proInfo small{content:attr(data-text);font-size:small;color:var(--body-color);display:block;opacity:.8}
.post .proInfo{display:flex;font-size:14px;line-height:1.6em}
.post .proInfoL{padding-right:20px}
.post .proInfoR{padding-left:0}
.post .proMarket{margin:20px 0 30px;display:flex;flex-wrap:wrap;line-height:1.6em}
.post .proMarket > *{display:block}
.post .proMarket > small{width:100%;margin-bottom:10px}
.post .proMarket > a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 8px 8px 0;border:1px solid var(--content-border);border-radius:3px}
.post .proMarket > a:last-of-type{margin-right:0}
.post .proMarket > a img{width:20px;height:20px;display:block}
.darkMode .post .proPrice:before,.darkMode .post .proInfo small{color:var(--dark-textAlt)}
.darkMode .post .proPrice,.darkMode .post .proInfoL,.darkMode .post .proInfoR,.darkMode .post .proInfo.one,.darkMode .post .proMarket > a{border-color:rgba(255,255,255,.1)}
.blogPosts .hentry.noInfo,.blogPosts .hentry.product,.blogPosts div.hentry,.blogPosts .hentry.noComment{padding-bottom:0}
.listMode .blogPosts .postEntry.snippet.productPrice{display:block}
.gridLayout .postEntry.snippet.productPrice,.gridLayout.listMode .blogPosts .postEntry.snippet.productPrice{font-size:14px}
.postEntry.snippet.productPrice,.itemEntry.productPrice{display:block;font-size:14px;color:var(--link-color);opacity:1}
.itemFeatured .itemEntry.productPrice{font-size:14px}

Step 5. Save your theme by clicking this icon.

If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

Click To Download

It's about creating product pages in Median UI. I hope this article will be very useful for those who did not have codes for the product page. Share this article as much as possible so that even people who don't have product page codes can now create product pages in their blogs.

If you have any query or you are facing problem in any section then let us know in comment. And don't forget to give us feedback in the comments.

© Copyright ASThemesWorld

Post a Comment