Product Description Tab
The Product Tabs section is designed to display product information in either tab or accordion format. This section can display descriptions, reviews, custom HTML content, and Liquid code with 2 main layouts: Tabs and Accordion.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products from the dropdown window.
In the Templates -> Add section -> choose Product Description Tab.
Product Description Tab - Settings Guide
This guide explains all available settings for the Product Description Tab in order from top to bottom as they appear in the Theme Editor.
Product Description Tab - Settings Guide
Appearance Settings
Setting
Type
Description
Visibility
Color scheme
color_scheme
Sets the color scheme for the entire section
Always visible
Tabs design
select
Choose between tab layout or accordion layout display
Always visible
Tab Settings (when tabs design = tab)
Setting
Type
Description
Visibility
Border bottom background
color
Color of the bottom border line under tab navigation
tabs_design == 'tab'
Border bottom gap
range
Spacing between the tab content and border line (0-50px)
tabs_design == 'tab'
Border active tab background
color
Color of the active tab indicator line
tabs_design == 'tab'
Separator color
color
Color of separator lines between elements
tabs_design == 'tab'
Accordion Settings (when tabs design = accordion)
Setting
Type
Description
Visibility
Gap
range
Spacing between accordion items (0-50px)
tabs_design == 'accordion'
Icon
select
Icon type for accordion toggle (none/caret/plus/right-arrow)
tabs_design == 'accordion'
Background
color
Background color for accordion items
tabs_design == 'accordion'
Padding left
range
Left padding inside accordion items (0-50px)
tabs_design == 'accordion'
Padding right
range
Right padding inside accordion items (0-50px)
tabs_design == 'accordion'
Padding top
range
Top padding inside accordion items (0-50px)
tabs_design == 'accordion'
Padding bottom
range
Bottom padding inside accordion items (0-50px)
tabs_design == 'accordion'
Border style
select
Border style for accordion (none/top/bottom/top-bottom/full)
tabs_design == 'accordion'
Border color
color
Color of accordion borders
tabs_design == 'accordion' AND accordion_border_style != 'none'
View content
select
How content is displayed on mobile (default/sidebar/popup)
tabs_design == 'accordion'
Layout Settings
Setting
Type
Description
Visibility
Alignment
select
Horizontal alignment of tabs (left/center/right)
Always visible
Alignment mobile
select
Horizontal alignment of tabs on mobile devices
Always visible
Gap
range
General spacing between elements (0-100px)
Always visible
Font size
select
Base font size for tab text (1.0rem - 4.0rem)
Always visible
Section width
select
Width constraint for the section (page-width/full-width/custom)
Always visible
Custom width
range
Custom section width when using custom option (1000-2000px)
section_width == 'custom'
Spacing Settings
Setting
Type
Description
Visibility
Padding left
range
Left padding for section container (0-100px)
Always visible
Padding right
range
Right padding for section container (0-100px)
Always visible
Padding top
range
Top padding for section container (0-100px)
Always visible
Padding bottom
range
Bottom padding for section container (0-100px)
Always visible
How to set up some sample descriptions of Ella:
From your Shopify admin, go to Products -> All products.
Find and choose the product that you want to edit.
In the product description section, select Show HTML.
Copy/paste our sample HTML code below and add it here.
Sample 1:
Sample 1 Template Code
<div class="description-sample">
<p style="--mb: 40px;">Nam tempus turpis at metus scelerisque placerat nulla
deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis
des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des
commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue
sit amet ornare rhoncus elit nisi luctus.
</p>
<div class="desc-item-banner" style="--mb: 40px">
<div class="flex-block banner-block">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt="" src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/1-min.jpg?v=1658565276" class="zoomImg" title="Dinterdum pretium condimento example 1">
<span class="data-lazy-loading"></span>
</a>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#METROPOLIS
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
<div class="flex-block banner-block row-reverse">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt="" src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/2-min.jpg?v=1658565276" class="zoomImg" title="Dinterdum pretium condimento example 2">
<span class="data-lazy-loading"></span>
</a>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#Milance
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
</div>
<div class="flex-block">
<div class="flex-item">
<h4>Sample Unordered List</h4>
<ul>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere.</li>
</ul>
</div>
<div class="item">
<h4>Sample Ordered List</h4>
<ol>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li>
</ol>
</div>
</div>
<blockquote class="quote" style="--mb: 37px">
<h4>Sample Block Quote</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.</p>
</blockquote>
<div>
<h4>Sample Paragraph Text</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.</p>
</div>
</div>
Sample 2:
Sample 2 Template Code
<div class="description-sample">
<p style="--mb: 40px;">Nam tempus turpis at metus scelerisque placerat nulla
deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis
des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des
commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue
sit amet ornare rhoncus elit nisi luctus.
</p>
<div class="desc-item-banner" style="--mb: 40px">
<div class="flex-block banner-block">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt=""
src="//cdn.shopify.com/s/files/1/0081/3305/0458/files/product-description-image-2.jpg?v=1651807718"
class="zoomImg" title="Dinterdum pretium condimento example 1">
<span class="data-lazy-loading"></span>
</a>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#METROPOLIS
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
<div class="flex-block banner-block row-reverse">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt=""
src="//cdn.shopify.com/s/files/1/0081/3305/0458/files/product-description-image.jpg?v=1651740319"
class="zoomImg" title="Dinterdum pretium condimento example 2">
<span class="data-lazy-loading"></span>
</a>
<div class="video-open-popup" data-video-id="_9VUPq3SxOc">
<side-drawer-opener class="popup" data-side-drawer="#PopupModal-AZDFEMWdKNDFCVHdoM__popup_link_desc_video">
<button id="PopupModalButton-AZDFEMWdKNDFCVHdoM__popup_link_desc_video" class="button button-unstyled popup__button left spacing-style button-circle" type="button">
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true" focusable="false" role="presentation" class="icon icon-video" style="fill: none;">
<path d="M256,20C125.872,20,20,125.872,20,256s105.872,236,236,236s236-105.872,236-236S386.128,20,256,20z M156.64,387.712V124.288l246.72,131.72L156.64,387.712z"></path>
<path fill="#302f2f" d="M512,256C512,114.616,397.384,0,256,0S0,114.616,0,256s114.616,256,256,256S512,397.384,512,256z M256,492C125.872,492,20,386.128,20,256S125.872,20,256,20s236,105.872,236,236S386.128,492,256,492z"></path>
<polygon fill="#302f2f" points="156.64,387.712 403.36,256.008 156.64,124.288 "></polygon>
</svg>
</span>
</button>
</side-drawer-opener>
</div>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#Milance
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
</div>
<div class="flex-block">
<div class="flex-item">
<h4>Sample Unordered List</h4>
<ul>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere.</li>
</ul>
</div>
<div class="item">
<h4>Sample Ordered List</h4>
<ol>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li>
</ol>
</div>
</div>
<blockquote class="quote" style="--mb: 37px">
<h4>Sample Block Quote</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.</p>
</blockquote>
<div>
<h4>Sample Paragraph Text</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.</p>
</div>
</div>
Sample 3:
Sample 3 Template Code
<div class="description-sample">
<p style="--mb: 40px;">Nam tempus turpis at metus scelerisque placerat nulla
deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis
des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des
commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue
sit amet ornare rhoncus elit nisi luctus.
</p>
<div style="--mb: 40px;">
<h4>Sample Image Gallery</h4>
<swiper-component
class="collection-carousel-swiper-component w-full block"
data-space-between="20"
data-pagination-type="bullets"
data-slides-per-view="2"
data-breakpoints='{
"768": { "slidesPerView": 2 },
"1024": { "slidesPerView": 2 },
"1400": { "slidesPerView": 3 }
}'
data-watch-slides-progress="true"
style="--card-grid-per-row-desktop:3; --card-grid-per-row-tablet:2; --card-grid-per-row-mobile:2; --card-grid-per-row-gap:20px;"
>
<div class="swiper w-full">
<ul id="Slider-product-desc" class="swiper-wrapper list-unstyled grid--2-col-mobile">
<!-- Slide 1 -->
<li id="Slide-product-desc-1" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 1"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 1">
</a>
</li>
<!-- Slide 2 -->
<li id="Slide-product-desc-2" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-2.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 2"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-2.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 2">
</a>
</li>
<!-- Slide 3 -->
<li id="Slide-product-desc-3" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-3.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 3"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-3.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 3">
</a>
</li>
<!-- Slide 4 -->
<li id="Slide-product-desc-4" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 4"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 4">
</a>
</li>
</ul>
<div class="swiper-btns-wrap small-hide">
<hover-button class="swiper-button swiper-button-prev" aria-label="Previous slide">
<svg class="icon icon-caret" viewBox="0 0 10 6">
<path fill="currentColor" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708"/>
</svg>
</hover-button>
<hover-button class="swiper-button swiper-button-next" aria-label="Next slide">
<svg class="icon icon-caret" viewBox="0 0 10 6">
<path fill="currentColor" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708"/>
</svg>
</hover-button>
</div>
<div class="swiper-pagination"></div>
</div>
</swiper-component>
</div>
<div class="flex-block">
<div class="flex-item">
<h4>Sample Unordered List</h4>
<ul>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere.</li>
</ul>
</div>
<div class="item">
<h4>Sample Ordered List</h4>
<ol>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li>
</ol>
</div>
</div>
<blockquote class="quote" style="--mb: 37px">
<h4>Sample Block Quote</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.</p>
</blockquote>
<div>
<h4>Sample Paragraph Text</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.</p>
</div>
</div>Sample 4:
Sample 4 Template Code
<div class="description-sample">
<p>Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum et lobortis at, mollis duto an risus. Sedcuman des faucibus sullamcorper mattis fusce de molestie elit a lorem tempus scelerisque blandit est cursus.</p>
<div class="flex-block">
<div class="flex-item">
<table class="w-full">
<tbody>
<tr>
<td class="tb-column">✔ Comodous in tempor ullamcorper miaculis</td>
</tr>
<tr>
<td class="tb-column">✖ Pellentesque vitae neque mollis urna mattis laoreet</td>
</tr>
<tr>
<td class="tb-column">✔ Divamus sit amet purus justo</td>
</tr>
<tr>
<td class="tb-column">✖ Proin molestie egestas orci ac suscipit risus posuere loremous</td>
</tr>
<tr>
<td class="tb-column">✔ Nam tempus turpis at metus scelerisque placerat nulla deumantos</td>
</tr>
<tr>
<td class="tb-column">✖ Donec pretium egestas sapien et mollis</td>
</tr>
</tbody>
</table>
<h5 class="font-normal italic">Returns Policy</h5>
<p>You may return most new, unopened items within 30 days of delivery for a full refund. We'll also pay the return shipping costs if the return is a result of our error (you received an incorrect or defective item, etc.).</p>
<p>You should expect to receive your refund within four weeks of giving your package to the return shipper, however, in many cases you will receive a refund more quickly. This time period includes the transit time for us to receive your return from the shipper (5 to 10 business days), the time it takes us to process your return once we receive it (3 to 5 business days), and the time it takes your bank to process our refund request (5 to 10 business days).</p>
<p>If you need to return an item, simply login to your account, view the order using the "Complete Orders" link under the My Account menu and click the Return Item(s) button. We'll notify you via e-mail of your refund once we've received and processed the returned item.</p>
</div>
<div class="flex-item">
<table class="w-full">
<tbody>
<tr>
<td class="tb-title">Drostique</td>
<td>Nam tempus turpis at metus scelerisque placerat nulla deumantos</td>
</tr>
<tr>
<td class="tb-title">Pharetro Lorem</td>
<td>Pellentesque diam dolor elementum etos lobortis des mollis</td>
</tr>
<tr>
<td class="tb-title">Milancelos</td>
<td>Donec pretium egestas sapien et mollis</td>
</tr>
<tr>
<td class="tb-title">Pellentesque</td>
<td>Sedcus faucibus an sullamcorper mattis drostique des commodo pharetras</td>
</tr>
<tr>
<td class="tb-title">Proin Molestie</td>
<td>Pellentesque diam dolor elementum etos lobortis des mollis</td>
</tr>
<tr>
<td class="tb-title">Cosmopolis</td>
<td>Donec pretium egestas sapien et mollis</td>
</tr>
</tbody>
</table>
<h5 class="font-normal italic">Shipping</h5>
<p>We can ship to virtually any address in the world. Note that there are restrictions on some products, and some products cannot be shipped to international destinations.</p>
<p>When you place an order, we will estimate shipping and delivery dates for you based on the availability of your items and the shipping options you choose. Depending on the shipping provider you choose, shipping date estimates may appear on the shipping quotes page.</p>
<p>Please also note that the shipping rates for many items we sell are weight-based. The weight of any such item can be found on its detail page. To reflect the policies of the shipping companies we use, all weights will be rounded up to the next full pound.</p>
</div>
</div>
</div>
The Product Tabs section displays tabbed or accordion content on product pages (description, reviews, or custom HTML). This doc lists appearance, tabs/accordion settings, layout options, size controls, padding, and supported block types.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products from the dropdown window.
In the Templates -> Add section -> choose Product Description Tab.
How to set up some sample descriptions of Ella:
From your Shopify admin, go to Products -> All products.
Find and choose the product that you want to edit.
In the product description section, select Show HTML.
Copy/paste our sample HTML code below and add it here.
Sample 1:
Sample 1 Template Code
<div class="description-sample">
<p style="--mb: 40px;">Nam tempus turpis at metus scelerisque placerat nulla
deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis
des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des
commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue
sit amet ornare rhoncus elit nisi luctus.
</p>
<div class="desc-item-banner" style="--mb: 40px">
<div class="flex-block banner-block">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt=""
src="//cdn.shopify.com/s/files/1/0081/3305/0458/files/product-description-image-2.jpg?v=1651807718"
class="zoomImg" title="Dinterdum pretium condimento example 1">
<span class="data-lazy-loading"></span>
</a>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#METROPOLIS
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
<div class="flex-block banner-block row-reverse">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt=""
src="//cdn.shopify.com/s/files/1/0081/3305/0458/files/product-description-image.jpg?v=1651740319"
class="zoomImg" title="Dinterdum pretium condimento example 2">
<span class="data-lazy-loading"></span>
</a>
<div class="video-open-popup" data-video-id="_9VUPq3SxOc">
<side-drawer-opener class="popup" data-side-drawer="#PopupModal-AZDFEMWdKNDFCVHdoM__popup_link_desc_video">
<button id="PopupModalButton-AZDFEMWdKNDFCVHdoM__popup_link_desc_video" class="button button-unstyled popup__button left spacing-style button-circle" type="button">
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true" focusable="false" role="presentation" class="icon icon-video" style="fill: none;">
<path d="M256,20C125.872,20,20,125.872,20,256s105.872,236,236,236s236-105.872,236-236S386.128,20,256,20z M156.64,387.712V124.288l246.72,131.72L156.64,387.712z"></path>
<path fill="#302f2f" d="M512,256C512,114.616,397.384,0,256,0S0,114.616,0,256s114.616,256,256,256S512,397.384,512,256z M256,492C125.872,492,20,386.128,20,256S125.872,20,256,20s236,105.872,236,236S386.128,492,256,492z"></path>
<polygon fill="#302f2f" points="156.64,387.712 403.36,256.008 156.64,124.288 "></polygon>
</svg>
</span>
</button>
</side-drawer-opener>
</div>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#Milance
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
</div>
<div class="flex-block">
<div class="flex-item">
<h4>Sample Unordered List</h4>
<ul>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere.</li>
</ul>
</div>
<div class="item">
<h4>Sample Ordered List</h4>
<ol>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li>
</ol>
</div>
</div>
<blockquote class="quote" style="--mb: 37px">
<h4>Sample Block Quote</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.</p>
</blockquote>
<div>
<h4>Sample Paragraph Text</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.</p>
</div>
</div>
Sample 2:
Sample 2 Template Code
<div class="description-sample">
<p style="--mb: 40px;">Nam tempus turpis at metus scelerisque placerat nulla
deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis
des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des
commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue
sit amet ornare rhoncus elit nisi luctus.
</p>
<div class="desc-item-banner" style="--mb: 40px">
<div class="flex-block banner-block">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt=""
src="//cdn.shopify.com/s/files/1/0081/3305/0458/files/product-description-image-2.jpg?v=1651807718"
class="zoomImg" title="Dinterdum pretium condimento example 1">
<span class="data-lazy-loading"></span>
</a>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#METROPOLIS
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
<div class="flex-block banner-block row-reverse">
<div class="flex-item banner-item">
<div class="img-box img-box--mobile">
<a class="image-adapt image-zoom" href="">
<img role="presentation" alt=""
src="//cdn.shopify.com/s/files/1/0081/3305/0458/files/product-description-image.jpg?v=1651740319"
class="zoomImg" title="Dinterdum pretium condimento example 2">
<span class="data-lazy-loading"></span>
</a>
<div class="video-open-popup" data-video-id="_9VUPq3SxOc">
<side-drawer-opener class="popup" data-side-drawer="#PopupModal-AZDFEMWdKNDFCVHdoM__popup_link_desc_video">
<button id="PopupModalButton-AZDFEMWdKNDFCVHdoM__popup_link_desc_video" class="button button-unstyled popup__button left spacing-style button-circle" type="button">
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true" focusable="false" role="presentation" class="icon icon-video" style="fill: none;">
<path d="M256,20C125.872,20,20,125.872,20,256s105.872,236,236,236s236-105.872,236-236S386.128,20,256,20z M156.64,387.712V124.288l246.72,131.72L156.64,387.712z"></path>
<path fill="#302f2f" d="M512,256C512,114.616,397.384,0,256,0S0,114.616,0,256s114.616,256,256,256S512,397.384,512,256z M256,492C125.872,492,20,386.128,20,256S125.872,20,256,20s236,105.872,236,236S386.128,492,256,492z"></path>
<polygon fill="#302f2f" points="156.64,387.712 403.36,256.008 156.64,124.288 "></polygon>
</svg>
</span>
</button>
</side-drawer-opener>
</div>
</div>
</div>
<div class="flex-item banner-content">
<div class="content-box text-center">
<p class="banner-sub-title">
<span>New Collection</span>
</p>
<h4 class="banner-heading">
#Milance
</h4>
<span class="banner-text">
Nullam daliquet vestibulum augue non varius cras de cosmopolis
congue melito duis tristique.
</span>
<a href="#" class="banner-button button">
<span>Shop The Look</span>
</a>
</div>
</div>
</div>
</div>
<div class="flex-block">
<div class="flex-item">
<h4>Sample Unordered List</h4>
<ul>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere.</li>
</ul>
</div>
<div class="item">
<h4>Sample Ordered List</h4>
<ol>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li>
</ol>
</div>
</div>
<blockquote class="quote" style="--mb: 37px">
<h4>Sample Block Quote</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.</p>
</blockquote>
<div>
<h4>Sample Paragraph Text</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.</p>
</div>
</div>
Sample 3:
Sample 3 Template Code
<div class="description-sample">
<p style="--mb: 40px;">Nam tempus turpis at metus scelerisque placerat nulla
deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis
des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des
commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue
sit amet ornare rhoncus elit nisi luctus.
</p>
<div style="--mb: 40px;">
<h4>Sample Image Gallery</h4>
<swiper-component
class="collection-carousel-swiper-component w-full block"
data-space-between="20"
data-pagination-type="bullets"
data-slides-per-view="2"
data-breakpoints='{
"768": { "slidesPerView": 2 },
"1024": { "slidesPerView": 2 },
"1400": { "slidesPerView": 3 }
}'
data-watch-slides-progress="true"
style="--card-grid-per-row-desktop:3; --card-grid-per-row-tablet:2; --card-grid-per-row-mobile:2; --card-grid-per-row-gap:20px;"
>
<div class="swiper w-full">
<ul id="Slider-product-desc" class="swiper-wrapper list-unstyled grid--2-col-mobile">
<!-- Slide 1 -->
<li id="Slide-product-desc-1" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 1"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 1">
</a>
</li>
<!-- Slide 2 -->
<li id="Slide-product-desc-2" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-2.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 2"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-2.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 2">
</a>
</li>
<!-- Slide 3 -->
<li id="Slide-product-desc-3" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-3.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 3"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary-3.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 3">
</a>
</li>
<!-- Slide 4 -->
<li id="Slide-product-desc-4" class="swiper-slide">
<a href="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
data-fancybox="product-gallery"
data-caption="Image 4"
class="image-block image-block--height-fit">
<img
src="https://cdn.shopify.com/s/files/1/0081/3305/0458/files/image-gallary.jpg?v=1658393919"
width="960" height="1200" loading="lazy"
class="image-block__image"
alt="Product image 4">
</a>
</li>
</ul>
<div class="swiper-btns-wrap small-hide">
<hover-button class="swiper-button swiper-button-prev" aria-label="Previous slide">
<svg class="icon icon-caret" viewBox="0 0 10 6">
<path fill="currentColor" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708"/>
</svg>
</hover-button>
<hover-button class="swiper-button swiper-button-next" aria-label="Next slide">
<svg class="icon icon-caret" viewBox="0 0 10 6">
<path fill="currentColor" d="M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708"/>
</svg>
</hover-button>
</div>
<div class="swiper-pagination"></div>
</div>
</swiper-component>
</div>
<div class="flex-block">
<div class="flex-item">
<h4>Sample Unordered List</h4>
<ul>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere.</li>
</ul>
</div>
<div class="item">
<h4>Sample Ordered List</h4>
<ol>
<li>Comodous in tempor ullamcorper miaculis.</li>
<li>Pellentesque vitae neque mollis urna mattis laoreet.</li>
<li>Divamus sit amet purus justo.</li>
<li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li>
</ol>
</div>
</div>
<blockquote class="quote" style="--mb: 37px">
<h4>Sample Block Quote</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.</p>
</blockquote>
<div>
<h4>Sample Paragraph Text</h4>
<p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.</p>
</div>
</div>Sample 4:
Sample 4 Template Code
<div class="description-sample">
<p>Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum et lobortis at, mollis duto an risus. Sedcuman des faucibus sullamcorper mattis fusce de molestie elit a lorem tempus scelerisque blandit est cursus.</p>
<div class="flex-block">
<div class="flex-item">
<table class="w-full">
<tbody>
<tr>
<td class="tb-column">✔ Comodous in tempor ullamcorper miaculis</td>
</tr>
<tr>
<td class="tb-column">✖ Pellentesque vitae neque mollis urna mattis laoreet</td>
</tr>
<tr>
<td class="tb-column">✔ Divamus sit amet purus justo</td>
</tr>
<tr>
<td class="tb-column">✖ Proin molestie egestas orci ac suscipit risus posuere loremous</td>
</tr>
<tr>
<td class="tb-column">✔ Nam tempus turpis at metus scelerisque placerat nulla deumantos</td>
</tr>
<tr>
<td class="tb-column">✖ Donec pretium egestas sapien et mollis</td>
</tr>
</tbody>
</table>
<h5 class="font-normal italic">Returns Policy</h5>
<p>You may return most new, unopened items within 30 days of delivery for a full refund. We'll also pay the return shipping costs if the return is a result of our error (you received an incorrect or defective item, etc.).</p>
<p>You should expect to receive your refund within four weeks of giving your package to the return shipper, however, in many cases you will receive a refund more quickly. This time period includes the transit time for us to receive your return from the shipper (5 to 10 business days), the time it takes us to process your return once we receive it (3 to 5 business days), and the time it takes your bank to process our refund request (5 to 10 business days).</p>
<p>If you need to return an item, simply login to your account, view the order using the "Complete Orders" link under the My Account menu and click the Return Item(s) button. We'll notify you via e-mail of your refund once we've received and processed the returned item.</p>
</div>
<div class="flex-item">
<table class="w-full">
<tbody>
<tr>
<td class="tb-title">Drostique</td>
<td>Nam tempus turpis at metus scelerisque placerat nulla deumantos</td>
</tr>
<tr>
<td class="tb-title">Pharetro Lorem</td>
<td>Pellentesque diam dolor elementum etos lobortis des mollis</td>
</tr>
<tr>
<td class="tb-title">Milancelos</td>
<td>Donec pretium egestas sapien et mollis</td>
</tr>
<tr>
<td class="tb-title">Pellentesque</td>
<td>Sedcus faucibus an sullamcorper mattis drostique des commodo pharetras</td>
</tr>
<tr>
<td class="tb-title">Proin Molestie</td>
<td>Pellentesque diam dolor elementum etos lobortis des mollis</td>
</tr>
<tr>
<td class="tb-title">Cosmopolis</td>
<td>Donec pretium egestas sapien et mollis</td>
</tr>
</tbody>
</table>
<h5 class="font-normal italic">Shipping</h5>
<p>We can ship to virtually any address in the world. Note that there are restrictions on some products, and some products cannot be shipped to international destinations.</p>
<p>When you place an order, we will estimate shipping and delivery dates for you based on the availability of your items and the shipping options you choose. Depending on the shipping provider you choose, shipping date estimates may appear on the shipping quotes page.</p>
<p>Please also note that the shipping rates for many items we sell are weight-based. The weight of any such item can be found on its detail page. To reflect the policies of the shipping companies we use, all weights will be rounded up to the next full pound.</p>
</div>
</div>
</div>Last updated