Soleil Tunic Dress
Couldn't load pickup availability
Add More Colorful Nature To Your Season. The Soleil Swing Dress Is Here With Its Effortless Silhouette To Embrace You And Your Cool Plans
Shipping Information
- Made to Order will take 15 days to dispatch
- Ready to ship usually takes 48-72 hours to dispatch
- International customers are responsible for all local duties and taxes.
Fit Details
-Viscose Fabric
-Delicate Handcrafted Embroidery
-Strappy dress
-Sleeveless
-Gathers detail
-Dry clean
Collapsible tab
Collapsible tab content
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emme Halter Top Size Chart</title>
<style>
/* Reset and base styles */
/* Size chart container */
.size-chart-container {
background-color: #fff;
max-width: 700px;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
/* Header */
.title {
font-size: 18px;
font-weight: 500;
margin: 0;
color: #333;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Country navigation */
.country-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 15px 10px 5px;
border-bottom: 1px solid #f5f5f5;
gap: 10px;
}
.country-item {
text-align: center;
cursor: pointer;
padding: 3px;
border-radius: 4px;
transition: all 0.2s;
width: 36px;
}
.country-item:hover {
transform: translateY(-1px);
}
.country-item.active {
background-color: #f5f5f5;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.flag {
width: 24px;
height: 16px;
border: 1px solid #eee;
display: block;
margin: 0 auto;
transition: transform 0.2s;
object-fit: cover;
}
.country-item.active .flag {
transform: scale(1.1);
}
.country-name {
font-size: 9px;
color: #999;
display: block;
margin-top: 3px;
text-transform: uppercase;
}
/* Unit toggle */
.unit-toggle {
display: flex;
justify-content: flex-end;
padding: 8px 15px;
}
.unit-buttons {
display: flex;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.unit-btn {
padding: 4px 12px;
background: #fff;
border: none;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unit-btn:first-child {
border-right: 1px solid #ddd;
}
.unit-btn.active {
background: #000;
color: white;
}
/* Size table */
.table-container {
padding: 10px 15px 15px;
overflow-x: auto;
}
.size-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
min-width: 500px;
}
.size-table th {
background-color: #f9f9f9;
font-weight: 500;
color: #555;
padding: 10px 6px;
border: 1px solid #eee;
text-align: center;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.5px;
white-space: nowrap;
}
.size-table td {
padding: 10px 6px;
border: 1px solid #eee;
text-align: center;
vertical-align: middle;
font-size: 12px;
}
.size-table tr:nth-child(odd) {
background-color: #fcfcfc;
}
.size-table tr:hover {
background-color: #f5f5f5;
}
/* How to measure section */
.measure-container {
padding: 15px;
display: flex;
flex-wrap: wrap;
gap: 20px;
border-top: 1px solid #eee;
margin-top: 10px;
}
.measure-image {
flex: 0 0 180px;
position: relative;
}
.measure-image img {
width: 100%;
height: auto;
display: block;
border: 1px solid #f5f5f5;
border-radius: 4px;
max-width: 100%;
}
.measure-points {
flex: 1 1 250px;
}
.measure-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.point-item {
margin-bottom: 15px;
position: relative;
padding-left: 25px;
}
.point-number {
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 18px;
background-color: #000;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
}
.point-title {
font-weight: 500;
margin-bottom: 4px;
text-transform: uppercase;
font-size: 12px;
}
.point-desc {
font-size: 12px;
color: #666;
line-height: 1.5;
}
/* Responsive adjustments */
@media (max-width: 768px) {
body {
padding: 10px;
}
.size-chart-container {
width: 100%;
}
.country-nav {
padding: 10px 5px;
gap: 6px;
justify-content: space-around;
}
.country-item {
width: 32px;
}
.measure-container {
flex-direction: column;
align-items: center;
}
.measure-image {
flex: 0 0 140px;
margin-bottom: 10px;
}
.size-table th, .size-table td {
padding: 8px 5px;
font-size: 11px;
}
.title {
font-size: 16px;
}
}
@media (max-width: 480px) {
body {
padding: 5px;
}
.size-chart-container {
border-radius: 4px;
}
.country-nav {
gap: 5px;
flex-wrap: wrap;
}
.country-item {
width: calc(25% - 10px);
margin-bottom: 5px;
}
.flag {
width: 22px;
height: 14px;
}
.measure-image {
flex: 1 1 100%;
max-width: 160px;
margin: 0 auto 15px;
}
.measure-points {
flex: 1 1 100%;
}
.table-container {
padding: 5px;
}
.point-item {
margin-bottom: 12px;
}
.unit-toggle {
padding: 8px 10px;
}
.measure-container {
padding: 10px;
}
.header {
padding: 12px 10px;
}
}
</style>
<!-- Size Chart Container -->
<div class="size-chart-container">
<div class="header">
<h2 class="title">Emme Halter Top Size Chart</h2>
</div>
<div class="country-nav" id="countryNav">
<div class="country-item active" data-country="usa">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/us.png?v=1746290432" alt="USA" class="flag">
<span class="country-name">USA</span>
</div>
<div class="country-item" data-country="uk">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/uk.png?v=1746290432" alt="UK" class="flag">
<span class="country-name">UK</span>
</div>
<div class="country-item" data-country="australia">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/australia.png?v=1746290407" alt="Australia" class="flag">
<span class="country-name">AU</span>
</div>
<div class="country-item" data-country="france">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/france.png?v=1746290407" alt="France" class="flag">
<span class="country-name">FR</span>
</div>
<div class="country-item" data-country="italy">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/italy.webp?v=1746293548" alt="Italy" class="flag">
<span class="country-name">IT</span>
</div>
<div class="country-item" data-country="japan">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/japan.webp?v=1746290310" alt="Japan" class="flag">
<span class="country-name">JP</span>
</div>
<div class="country-item" data-country="denmark">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/denmark.webp?v=1746290310" alt="Denmark" class="flag">
<span class="country-name">DK</span>
</div>
</div>
<div class="unit-toggle">
<div class="unit-buttons">
<button class="unit-btn active" data-unit="inches">IN</button>
<button class="unit-btn" data-unit="cm">CM</button>
</div>
</div>
<div class="table-container">
<table class="size-table">
<thead>
<tr>
<th>SIZE</th>
<th id="countryCol">USA</th>
<th>BUST</th>
<th>WAIST</th>
<th>HIP</th>
<th>LENGTH</th>
<th>CROP LENGTH</th>
</tr>
</thead>
<tbody id="sizeTableBody">
<!-- Table rows will be populated by JavaScript -->
</tbody>
</table>
</div>
<div class="measure-container">
<div class="measure-image">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/bhanunibyjyoti-1683811952246.png?v=1746290865" alt="How to measure">
</div>
<div class="measure-points">
<h3 class="measure-title">How to Measure</h3>
<div class="point-item">
<div class="point-number">1</div>
<div class="point-title">LENGTH</div>
<div class="point-desc">Measure from the top of the shoulder seam down to the hem</div>
</div>
<div class="point-item">
<div class="point-number">2</div>
<div class="point-title">BUST</div>
<div class="point-desc">Measure around the fullest part, placing the tape close up under the arms</div>
</div>
<div class="point-item">
<div class="point-number">3</div>
<div class="point-title">WAIST</div>
<div class="point-desc">Measure around the narrowest part of your body, under the navel</div>
</div>
<div class="point-item">
<div class="point-number">4</div>
<div class="point-title">HIP</div>
<div class="point-desc">Measure 20cm down from your waist</div>
</div>
</div>
</div>
</div>
<script>
// Size data for all countries
const sizeData = {
usa: [
['XXS', '0-2', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '2-4', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '4-6', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '6-8', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '8-10', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '10-12', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '12-16', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
uk: [
['XXS', '4', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '6', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '8', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '10', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '12', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '14', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '16', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
australia: [
['XXS', '4', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '6', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '8', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '10', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '12', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '14', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '16', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
france: [
['XXS', '32', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '34', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '36', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '38', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '40', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '42', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '44', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
italy: [
['XXS', '36', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '38', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '40', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '42', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '44', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '46', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '48', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
japan: [
['XXS', '3', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '5', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '7', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '9', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '11', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '13', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '15', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
denmark: [
['XXS', '30', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '32', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '34', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '36', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '38', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '40', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '42', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
]
};
// Conversion factor inches to cm
const inchesToCm = 2.54;
// Current state
let currentCountry = 'usa';
let currentUnit = 'inches';
// DOM elements
let countryNav;
let tableBody;
let unitButtons;
let countryItems;
let countryCol;
// Initialize when DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Get DOM elements
countryNav = document.getElementById('countryNav');
tableBody = document.getElementById('sizeTableBody');
unitButtons = document.querySelectorAll('.unit-btn');
countryItems = document.querySelectorAll('.country-item');
countryCol = document.getElementById('countryCol');
// Set up country navigation with event delegation
countryNav.addEventListener('click', function(e) {
const countryItem = e.target.closest('.country-item');
if (countryItem && countryItem.dataset.country) {
switchCountry(countryItem.dataset.country);
}
});
// Set up unit toggle
unitButtons.forEach(btn => {
btn.addEventListener('click', function() {
switchUnits(this.dataset.unit);
});
});
// Initialize table data
updateTableData();
});
// Function to switch country
function switchCountry(country) {
currentCountry = country;
// Update active class on country items
countryItems.forEach(item => {
if (item.dataset.country === country) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
// Update country column header
countryCol.textContent = country.toUpperCase();
// Update table data
updateTableData();
}
// Function to switch units
function switchUnits(unit) {
currentUnit = unit;
// Update active class on unit buttons
unitButtons.forEach(btn => {
if (btn.dataset.unit === unit) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
// Update table data
updateTableData();
}
// Function to convert inches to cm
function convertToCm(inchValue) {
if (inchValue.includes('-')) {
const parts = inchValue.split('-').map(p => p.trim());
return parts.map(val => {
const num = parseFloat(val);
return isNaN(num) ? val : (num * inchesToCm).toFixed(1);
}).join(' - ');
} else {
const num = parseFloat(inchValue);
return isNaN(num) ? inchValue : (num * inchesToCm).toFixed(1);
}
}
// Function to update table data
function updateTableData() {
const data = sizeData[currentCountry];
// Clear existing rows
tableBody.innerHTML = '';
// Add new rows
data.forEach(row => {
const tr = document.createElement('tr');
// Add size cell
const sizeCell = document.createElement('td');
sizeCell.textContent = row[0];
tr.appendChild(sizeCell);
// Add country size cell
const countryCell = document.createElement('td');
countryCell.textContent = row[1];
tr.appendChild(countryCell);
// Add measurement cells
for (let i = 2; i < row.length; i++) {
const cell = document.createElement('td');
cell.setAttribute('data-inch', row[i]);
const value = currentUnit === 'inches' ? row[i] : convertToCm(row[i]);
cell.textContent = value;
if (currentUnit === 'cm') {
cell.textContent += ' cm';
}
tr.appendChild(cell);
}
tableBody.appendChild(tr);
});
}
</script>
</body>