(Free) Shuffle Card

Description

• shuffle card on load/button click
• flip card on cart click
• button over flip card
• view demo – password: abc
• buy me a coffee if it is uselful

#1. Install Code

#1.1. First you need to add a Section > Choose section with (i) icon

Next, hover on top right of section > Click Edit Section

at Anchor Link, enter word: shuffle-card

shuffle-card

#1.2. Hover on top right of section > Click Edit Gallery

Adding your desired text/url (we will use it for button over flip card)

#1.3. Hover on Page where you use Gallery > Click Gear icon

Click Advanced > Paste this code

<!-- @tuanphan - Free Shuffle Card -->
<div class="tp-cards-root" id="tpCardsRoot"><div class="tp-cards-wrapper" id="tpCardsWrap"></div><div class="tp-shuffle-button"><button id="tpShuffleBtn" class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary">Shuffle Again</button></div></div>
<style>
section[id*="shuffle-card"] {
    --initial-card-image-url: url(https://images.squarespace-cdn.com/content/v1/67e3b2e4cd573b229af279fd/76c5bb6e-2500-46e7-b5cd-4a40d3478901/halloween+girl.webp);
}
</style>
<link rel="stylesheet" href="https://code.beaverhero.com/gallerysgrid/shufflecard.css"/>
<script src="https://code.beaverhero.com/gallerysgrid/shufflecard.js"></script>

#2. Customize

#2.1. To change Front image, you can change this url

See this guide to know how to get image url.

#2.2. To change Shuffle Button text, change this text

#2.3. To change Shuffle button style, you can change it in Site Styles (Primary button style)