format-detection

You will be redirected to the Afterpay website to fill out your payment information. You will be redirected back to our site to complete your order. 

4 interest-free payments of {{money}}

You will be redirected to the Afterpay website to fill out your payment information. You will be redirected back to our site to complete your order. <a href="https://www.afterpay.com/en-US/installment-agreement" class="link-primary" target="_blank">Terms & Conditions</a>

Thank you! Your order has been received and your payment is confirmed.

These products would go well with your purchase:

We'll send an order confirmation email of this order to {{email}}

Thank you, we've received your order.

PLEASE CHOOSE YOUR COUNTRY OR REGION

PLEASE SELECT PREFERRED CURRENCY

Delivery time = Processing time ( 5-12 business days due to handcraft) + Shipping time (express shipping 4-6 working days; standard shipping 9-18 working days).

Express Shipping

Free Shipping

Custom options material image loading error!

You will be redirected to the Klarna website to fill out your payment information. You will be redirected back to our site to complete your order.

Enter your email to get a FREE MYSTERY GIFT together with your order! (valued {{from}} ~ {{to}})

Name

Payment Failed

This transaction is being processed by the bank <br> It may take few minutes, please wait patiently

Waiting for payment result...

After clicking "Place order", you will be redirected to PayPal to complete your purchase securely.

* Images may be enlarged to show details.

60-Day Return

Select a gift wrap for only {{price}}

Select a gift message card for only {{price}}

{{shippingMethod}}: <span class="font-weight-600">{{price}}</span>, {{priceOverSubtotal}}

SPECIAL OFFERS FOR YOU

Standard Shipping

Please enter {{minLength}}-{{maxLength}} characters

3-Day Shipping (Only for US)

Unsubscribe Phone

JEWELRY

HOME&LIVING

APPAREL

Photo Necklaces

Projection Necklaces

Name Necklaces

Engravable Necklaces

Fingerprint Necklaces

Birthstone&Birthflower Necklaces

Cremation Urn Necklaces

Couple Necklaces

Memorial Necklaces

Family Necklaces

Initial Necklaces

NECKLACES

Photo Bracelets

Engravable Bracelets

Men's Bracelets

Name Bracelets

BRACELETS

Engravable Rings

Name Rings

Photo Rings

Birthflower&Birthstone Rings

Fingerprint Rings

Birthflower Rings

RINGS

Projection Earrings

Initial Earrings

Name Earrings

EARRINGS

 ANKLETS

Key Chain

Photo Keychains

3D Printed Keychain

Acrylic Keychain

Projection Keychains

Couple Keychain

Engravable Keychains

Spotify Code Keychains

Custom Jewelry Dish

Custom Jewelry Sets

Custom Jewelry Box

Wallet

Wallet Card

Photo  Wallets

Engravable Wallets

Double-Sided Photo Wallets

Metal Card Holder

Pop Up Cards

Custom Bags

ACCESSORIES

Projection Jewelry

Name Jewelry 

Photo Jewelry

Initial Jewelry

Couple Jewelry

Birthstone Jewelry 

Birthflower Jewelry 

Fingerprint Jewelry

Spotify Code Jewelry

Cremation Urn Jewelry

Family Jewelry

Hip Hop Jewelry

Name Jewelry

COLLECTION

New Arrivals

Top Sellers

Flash Sale

Bank Holiday Sale

SALE

For Mother

For Her

For Mother 

For Girlfriend/Wife

For Grandma

For Him

For Father

For Boyfriend/Husband

For Grandpa 

For Others

For Couples

For Pet Lovers

For Kids

For Friends

For Loss

RECIPIENTS

Mother's Day

Father's Day

Holiday occasions 

Valentine's Day

Halloween

Christmas

Everyday occasions

For Birthday

For Anniversary

For Wedding

For Graduation

Back to School

For Newborn

OCCASIONS

<div style="max-width: 1500px; margin: auto; padding: 40px 0;">
<div>
<h1 style="text-align: center; margin-bottom: 20px;">CMS页面组件集合</h1>
</div>

<div>
<ol style="list-style:decimal;padding-left:15px;line-height: 2;margin-bottom: 20px;">
	<li>通过给标签data-component属性赋值添加组件，组件只提供交互功能，样式需要自己定义</li>
	<li>class命名规则：cms-page_[模块名称]，定义一个顶层class，页面内的class都要在这个顶层class下面，防止css污染</li>
</ol>
</div>

<div>
<style type="text/css">.cms-page-tabs_v1 .tab-items {
              display: flex;
              border-bottom: 1px solid #ddd;
            }

            .cms-page-tabs_v1 .tab-items [data-component="TabItem"] {
              padding: 8px 16px;
              cursor: pointer;
              margin-bottom: -1px;
              user-select: none;
            }

            .cms-page-tabs_v1 .tab-items [data-component="TabItem"].active {
              color: #0a81ee;
              border-bottom: 1px solid currentColor;
            }

            .cms-page-tabs_v1 .tab-contents div {
              padding: 8px 16px;
            }

            .cms-page-accordion_v1 [data-component="AccordionButton"] {
              padding: 8px 16px;
              cursor: pointer;
              user-select: none;
              border-bottom: 1px solid #ddd;
            }

            .cms-page-accordion_v1 [data-component="AccordionContent"] {
              overflow: hidden;
              transition: height 0.3s ease;
            }

            .cms-page-accordion_v1 .accordion-button {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }

            .cms-page-accordion_v1 .accordion-button .accordion-arrow {
              transform: rotate(90deg);
              transition: transform 0.3s ease;
            }

            .cms-page-accordion_v1 .accordion-content {
              padding: 8px 16px;
            }

            .cms-page-accordion_v1 [data-component="Accordion"].active .accordion-arrow{
              transform: rotate(-90deg);
            }

            .cms-page-swiper_v1 .swiper {
              height: 300px;
            }

            .cms-page-swiper_v1 .swiper .swiper-slide {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-size: 20px;
            }
</style>
<div class="cms-page-tabs_v1" style="margin-bottom:20px">
<div data-active-class="active" data-component="Tabs" data-tabs-trigger="click">
<div class="tab-items">
<div data-component="TabItem" data-tab-content="#tabContent1">Tab 1</div>

<div data-component="TabItem" data-tab-content="#tabContent2">Tab 2</div>

<div class="active" data-component="TabItem" data-tab-content="#tabContent3">Tab 3</div>
</div>

<div class="tab-contents">
<div id="tabContent1" style="display: none;">This is Tab Content 1</div>

<div id="tabContent2" style="display: none;">This is Tab Content 2</div>

<div id="tabContent3" style="display: block;">This is Tab Content 3</div>
</div>
</div>
</div>

<div class="cms-page-tabs_v1" style="margin-bottom:20px">
<div data-active-class="active" data-component="Tabs" data-tabs-trigger="hover">
<div class="tab-items">
<div data-component="TabItem" data-tab-content="#tabContent4">Tab 4</div>

<div data-component="TabItem" data-tab-content="#tabContent5">Tab 5</div>

<div class="active" data-component="TabItem" data-tab-content="#tabContent6">Tab 6</div>
</div>

<div class="tab-contents">
<div id="tabContent4" style="display: none;">This is Tab Content 4</div>

<div id="tabContent5" style="display: none;">This is Tab Content 5</div>

<div id="tabContent6" style="display: block;">This is Tab Content 6</div>
</div>
</div>
</div>

<div class="cms-page-accordion_v1" style="margin-bottom:20px">
<div data-active-class="active" data-component="Accordion">
<div class="accordion-button" data-component="AccordionButton">
<div>Accordion 1</div>

<div class="accordion-arrow"><svg aria-hidden="true" focusable="false" viewbox="-550 -420 2000 2000" width="24"><path d="M256.002176 1023.991296a25.599782 25.599782 0 0 1-18.124646-43.673229l442.671437-442.671437-442.671437-442.671437a25.599782 25.599782 0 0 1 36.198092-36.198093l460.796084 460.796084a25.599782 25.599782 0 0 1 0 36.198092l-460.796084 460.796083a25.497383 25.497383 0 0 1-18.124646 7.475137z"></path></svg></div>
</div>

<div data-component="AccordionContent" style="height: 0px;">
<div class="accordion-content">Accordion Content 1<br />
Accordion Content 1<br />
Accordion Content 1<br />
Accordion Content 1<br />
Accordion Content 1</div>
</div>
</div>

<div data-active-class="active" data-component="Accordion">
<div class="accordion-button" data-component="AccordionButton">
<div>Accordion 2</div>

<div class="accordion-arrow"><svg aria-hidden="true" focusable="false" viewbox="-550 -420 2000 2000" width="24"><path d="M256.002176 1023.991296a25.599782 25.599782 0 0 1-18.124646-43.673229l442.671437-442.671437-442.671437-442.671437a25.599782 25.599782 0 0 1 36.198092-36.198093l460.796084 460.796084a25.599782 25.599782 0 0 1 0 36.198092l-460.796084 460.796083a25.497383 25.497383 0 0 1-18.124646 7.475137z"></path></svg></div>
</div>

<div data-component="AccordionContent" style="height: 0px;">
<div class="accordion-content">Accordion Content 2<br />
Accordion Content 2<br />
Accordion Content 2<br />
Accordion Content 2<br />
Accordion Content 2</div>
</div>
</div>
</div>

<div class="cms-page-swiper_v1" style="margin-bottom:20px">
<div class="swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden" data-component="Swiper" data-delay="2000" data-loop="true" data-speed="500" style="width: 800px; display: block;">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1600px, 0px, 0px);">
<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="2" style="background: rgb(255, 134, 4); width: 800px;">Slide 3</div>

<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="0" style="background: rgb(67, 144, 238); width: 800px;">Slide 1</div>

<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" style="background: rgb(202, 64, 64); width: 800px;">Slide 2</div>

<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" style="background: rgb(255, 134, 4); width: 800px;">Slide 3</div>

<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="0" style="background: rgb(67, 144, 238); width: 800px;">Slide 1</div>
</div>
</div>
</div>
</div>
</div>

title

description

CMS页面组件集合