# Getting started ## Overview Welcome to **"Smind Sections"** – the perfect app to help you **easily** and **quickly** build your Shopify store **without any design and coding skills**! With a rich library of sections, we provide you with all the tools you need to customize and design your store's layout in a simple and efficient way. ## Our Outstanding Features. [**Sections**](/in-app/library/sections) **:** Our app offers a diverse and extensive library of sections, ranging from Product detail, Collection page, Featured products, Testimonials, Features, and more. Simply select and drag-and-drop sections into your page to build your desired layout. [**Templates**](/in-app/library/templates)**:** We offer a variety of pre-designed templates such as homepage, landing page, collection page, product page, and more, allowing you to install them with a few clicks without worrying about the design. **Packages:** We offer a variety of pre-designed themes that allow you to easily install and start using them immediately. [**Product Block**](/in-app/library/product-blocks)**:** will improve the shopping experience by adding credibility (social proof, star rating, live visitor count), engagement (video slider, features list), and urgency (countdown timer..,etc) [**Settings**](/in-app/settings)**:** Enables users to customize CSS for your theme, switch themes, and easily uninstall the app when it's no longer needed. # Install This guide walks you through installing Smind Sections and activating it on your store.

## 1. Install the app * Go to the Shopify App Store and search for [**Smind Sections**](https://apps.shopify.com/smind) * Click **Install**. * Shopify shows the permissions the app needs — review them and click **Install app**. * The app opens in your Shopify Admin under **Apps > Smind Sections**

## 2. Activate app embed The app embed is **required** and lets Smind add sections, template and styles to your storefont * In the app dashboard, look for the top setup banner **Activate app embed**

* Click **"Enable on theme"** button. If you have already completed this step and the status shows **Enabled**, you can skip it. * The Shopify Theme Editor will open. Make sure **\[SMI] Theme Helper** is toggled **ON**. * Click **Save** to apply the changes

**Manual method** * Go to **Online Store > Themes > Edit Theme** * Click **App embeds** (the puzzle piece icon in the top-left sidebar). * Find **\[SMI] Theme Helper** of Smind Sections and toggle it **on**. * Click **Save**.

# Library # Product blocks Product Block will improve the shopping experience by adding credibility (social proof, star rating, live visitor count), engagement (video slider, features list), and urgency (countdown timer..,etc) ## Overview Product Block is a static block that displays specific product details (e.g., title, price, description). It's used mainly for **informational purposes**, such as product details section. Please note that Product Blocks are supported exclusively on the **Product Page template**. In the majority of themes, they must be added within the **Product information** section of that template. ## How To Install ? To install the **Product Block** in our app. You can follow these steps below: {% embed url="" %} **Step 1**: Navigate to **Apps > Smind Sections** > **Library > Product Block** tab then select the block you want to install, click **Install** then **Customize.**

In case you have previously installed a Product Block and would like to customize it, please navigate to **Sales channels > Themes > Customize**, then select the **Product Page**.

**Step 2**: From the Shopify Editor sidebar, click **Add Section** in the **Template** tab. Search for the block you've just installed. For example: **Featured Icon 1-1.**

**Step 3** : Once you’ve added the section successfully, please go ahead and copy the **Block ID**. For example: **smi-block-featured-icons-1**

**Step 4**: In the **Product Detail** or **Product Information** section, click **Add Block.** Under the **Apps** tab, click **Smind Block.**

In the majority of themes, it is **Product information** section of that template.

**Step 5**: Enter the Block Name you want. For example: Featured Icon then paste the block ID. For example: **smi-block-featured-icons-1**

**Step 6:** Click the block again and start to customize whatever you want

## Frequently Asked Questions (FAQs) ### 1. Why can’t I find the Product Block in my Shopify store after installing it? To make sure your Product Block appears correctly, check these two things: 1. **Activate SMI Theme Helper** Go to your Shopify **Theme Settings** → **App embeds** and make sure **SMI Theme Helper** is turned ON. This helper enables the app blocks to work properly inside your theme.

2. **Add the Product Block to Your Current Theme** After installing a Product Block from the Smind Library, you still need to add it manually to your **current theme’s template.** * From **Settings** in Smind Sections app, scroll down to choose a theme to work on, you need to make sure that this theme is your current theme.

* Open Shopify → **Online Store → Themes → Customize.**

# Countdown Timer Display a live clock counting down to a specified date and time. You can configure the target date and customize the heading text, number format (days, hours, minutes, seconds), and styling. When installed, it looks like this on your product page.

## **Key Features** * Flexible Target Date: Pick any end date/time (e.g. sale close, product launch) right in the theme editor. * Customizable Labels & Messages: Edit the heading text, choose which time units to show and set a post-expiry message or action. * Full Styling Control: Change the fonts, sizes, colors, spacing, and layout in Shopify’s theme editor controls ## Benefits * Creates Urgency & FOMO: A ticking clock taps into your customer's fear of missing out, nudging them toward an immediate purchase rather than “think it over.” * Boosts Engagement & Conversions: Using countdown timers can see conversion uplifts of 9–40% as customers respond to time-bound offers more readily. * Highlights Limited-Time Promotions: Visually emphasizes flash sales, seasonal discounts, or one-day offers, making them stand out on a crowded product page. ## How To Use? 1. After installing the **Countdown Timer** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab. 2. Choose the **Countdown Timer** block

3. Copy the block ID. For example: **smi-block-countdown-timer-1**

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

5. On the **Smind Block**, insert the block ID of countdown timer which is **smi-block-countdown-timer-1** to the Section ID and change the block name if you want.

6. Next, you can rearrange the relevant blocks within the product detail sections

7. Finally, let's start to customize the **Countdown Timer** block

* Block ID: The unique ID of countdown timer block * Content Max Width: Set the maximum width of the timer’s content area can stretch to. * Heading: The rich text field for your main message. * Heading Size: The font-size presets for your heading. * Subtext: Optional secondary text below the heading * Subtext size: Font-size presets for the subtext area. * End date: The target date (and optional time) when your countdown hits zero. Format: `YYYY-MM-DD` or `YYYY-MM-DD HH:MM` * Time zone: Which time-zone the end date uses * Number size: Font-size presets for the numeric digits of days/hours/mins/secs. * Countdown style: Pick from preset visual layouts (Classic, Border, Solid) * Hide countdown when time expires: If **on**, the entire block will disappear once the end date passes. If **off**, the date will leave zeros on display. * Thickness (px): Border width around the block. * Opacity (%): How transparent the border is (0% = invisible, 100% = fully solid) * Corner radius (px): Rounds the block’s corners (Higher values = more pill-shaped edges) * Shadow blur: Choose a drop-shadow preset. * Opacity (%): Controls how dark or faint that shadow appears. * Color Scheme: Applies a color scheme of background, text, and accent colors. * Top margin (px): Space above the block. * Bottom margin (px): Space below the block. * Block padding (px): Internal space between the block’s border and its content. # Coupon Code This block allow you drop into your product page to highlight a promotional code and its deal. Each code is presented in a styled “pill” that shoppers can click to copy, plus a short message explaining the discount threshold.

## **Key Features** * Rich-Text Descriptions: Edit the label text with bold, italics, links or emojis to match your brand voice. * Customizable Code “Pill” Styling: Control background color, text color, padding, border radius and font size of the code badge * Copy-to-Clipboard Button: A one-click/tap “copy” icon next to each code eliminates typos and friction at checkout. ## Benefits * Instant Visibility of Savings: The customers see exactly what code to use and how much they’ll save, in short, that no hunting around for promotions. * Boosts Conversion & Urgency: When combined with a live timer or limited-time banner, coupon codes create FOMO, encouraging shoppers to act fast. ## How To Use? 1. After installing the **Coupon Code** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab. 2. Choose the **Coupon Code** block

3. Copy the block ID. For example: **smi-block-coupon-code-1**

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

5. On the **Smind Block**, insert the block ID of coupon code which is **smi-block-coupon-code-1** to the Section ID and change the block name if you want.

6. Next, you can rearrange the relevant blocks within the product detail sections

7. Finally, let's start to customize the **Coupon Code** block

* Block ID: The unique ID of coupon code block * Content Max Width: Set the maximum width of the timer’s content area can stretch to. * Coupon code 1 / Coupon code 2: Put the actual code in square brackets \[ ]. To create a discount code, you can learn more about it from the [link](https://help.shopify.com/en/manual/discounts/discount-types/percentage-fixed-amount#create-a-fixed-value-or-percentage-discount) * Card style (1 | 2): Two preset layouts for how each code and its description appear * Text size: Controls the font-size of the entire coupon message (both code pill and description). * Content alignment: Aligns each voucher entry within its container. * Animation: When enabled, applies a subtle entrance animation * Color Scheme: Picks one of your color scheme to instantly change the style backgrounds and text. * Coupon code: Change the code-pill’s background color—use this to draw extra attention. * Top margin: Space above the entire coupon block. * Bottom margin: Space below the coupon block. * Icon style: Select from several preset copy-icon designs # Divider The Divider block is a simple and flexible horizontal rule you can drop into any product page to cleanly separate chunks of content.

## **Key Features** * Adjustable Thickness & Color: Control line weight and pick any color so the divider can be ultra-subtle or boldly stand out. * Spacing Controls: Precisely adjust top/bottom margins and inner padding so there’s just the right amount of “breathing room” before and after the line. ## Benefits * Improves Readability: It helps your customers scan key information faster without feeling overwhelmed. * Guides the Eye: It helps direct attention to where you want it—whether that’s the start of a new feature section or the call-to-action at the bottom of the page. ## How To Use? 1. After installing the **Divider** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab. 2. Choose the **Divider** block

3. Copy the block ID. For example: **smi-block-divider-1**

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

5. On the **Smind Block**, insert the block ID of divider which is **smi-block-divider-1** to the Section ID and change the block name if you want.

6. Next, you can rearrange the relevant blocks within the product detail sections

7. Finally, let's start to customize the **Divider** block

* Block ID: The unique ID of divider blocks * Content Max Width: Set the maximum width of the timer’s content area can stretch to. * Height: The thickness of the divider line itself. * Color: The line’s color, picked via a color picker or hex code. * Top margin: The blank space above the divider. * Bottom margin: The blank space below the divider. * Custom CSS # Featured Icons The Featured Icons allows you to showcase key product or brand attributes as a grid or list of small icons paired with text labels.

## **Key Features** * Flexible Layouts: Configure how many columns/rows to display between grid or list styles. * Built-In Icon Library: Choose from hundreds of vector icons or upload your own SVG. * Responsive & Mobile-First: Automatically collapses/reflows icons on narrow viewports so badges never overlap ## Benefits * Instant Scannability: Icons grab attention faster than plain text, letting your customer scan core selling points at a glance. * Breaks Up Long Copy: Chunking key features into bite-size icon tiles makes your page feel lighter and more engaging. ## How To Use? 1. After installing the **Featured Icons** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab. 2. Choose the **Featured Icons** block

3. Copy the block ID. For example: **smi-block-featured-icons-1**

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

5. On the **Smind Block**, insert the block ID of featured icons which is **smi-block-featured-icons-1** to the Section ID and change the block name if you want

6. Next, you can rearrange the relevant blocks within the product detail sections

7. Finally, let's start to customize the **Featured Icon** block

**General Settings of Featured Icons** * Block ID: The unique ID of featured icons * Content Max Width: Set the maximum width of the timer’s content area can stretch to. * Item gap on desktop: The horizontal & vertical spacing between each icon and label tile when viewed on desktop. * Item gap on mobile: Same as above, but only applies at mobile breakpoints. * Columns on desktop: How many columns of icons to display side by side on desktop. * Columns on mobile: How many columns to use on mobile devices. Often set to 1 or 2 for readability. * Content padding: The internal padding around each individual icon and text card. * Icon size: The size of the SVG/icon graphic. * Icon position: Display the icon appears to the **left** or **right** of its text label. * Text size: Preset font sizes for your labels. * Text alignment: Aligns the text within each card. * Thickness: Width of the border around each icon and text card. * Opacity: How transparent that border is. * Corner radius: Rounds the corners of each card. **Settings of Featured Items** * Icon: Pick one of the built-in icons from Smind’s library * Upload icon: Upload your icon and make sure using a recommended size which is 128x128 PNG file format. * Text: Enter the label or caption for this feature # Featured List The Featured List display a clean and icon-led list of bullet points, it's perfect for spotlighting key perks or guarantees right on your product page or landing section.

## **Key Features** * Flexible Column Layouts: Display your list in one, two, or more columns to fit perfectly under your description or beside your images. * Icon Items: Choose from a built-in library of checkmarks, shields, badges, or upload your own SVG/PNG ## Benefits * Builds Trust & Credibility: Displaying guarantees, policies, or standout features in a clear list reassures customers and reduces hesitation. * Boosts Conversions: Highlighting the benefits right when they’re deciding, they feel safer so that they are are more likely to click “Add to cart.” ## How To Use? 1. After installing the **Featured Lists** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab. 2. Choose the **Featured Lists** block

3. Copy the block ID. For example: **smi-block-featured-list-1**

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

5. On the **Smind Block**, insert the block ID of featured list which is **smi-block-featured-list-1** to the Section ID and change the block name if you want.

6. Next, you can rearrange the relevant blocks within the product detail sections

7. Finally, let's start to customize the **Featured List** block

**General Settings of Featured List** * Block ID: The unique ID of featured lists * Content Max Width: Set the maximum width of the timer’s content area can stretch to. * Columns on desktop: Choose how many columns of list items to show side-by-side when viewed on a desktop. * Columns on mobile: Same idea, but for mobile views. * Text size: Preset font sizes for your list text. * Icon size: The pixel size of the bullet icon that appears next to each item. * Item gap: The vertical space between each list entry. * Color Scheme: Applies one of your color scheme to text and icons. * Icon: Change the icon's color * Top margin: Adds blank space above the list. * Bottom margin: Adds blank space below the list. **Settings of Featured Items** * Icon: Pick one of the built-in icons from Smind’s library * Upload icon: Upload your icon and make sure using a recommended size which is 128x128 PNG file format. * Text: Enter the label or caption for this feature # Payment Icons The Payment Icons display a row of your store’s accepted payment methods such as credit cards or digital wallets to any product page that your customer can pay the way they prefer.

### **Key Features** * Custom Icon Upload: You can upload your own SVG or PNG so every accepted method is represented. * Icon Size & Spacing Controls: Adjust pixel-perfect icon size and the gap between them to fit your layout. * Responsive & Mobile-First: Icons automatically wrap or resize on mobile so they never overflow or shrink unreadably. ### Benefits * Builds Trust Instantly: Seeing familiar logos (Visa, PayPal, Apple Pay, etc.) gives customers confidence your checkout is secure and reputable. * Increases Conversions: When your customers know right away you support their preferred payment method, they’re more likely to complete their purchase. ### How To Use? 1. After installing the **Payment Icons** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab. 2. Choose the **Payment Icons** block

3. Copy the block ID. For example: **smi-block-payment-icons-1**

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

5. On the **Smind Block**, insert the block ID of payment icons which is **smi-block-payment-icons-1** to the Section ID and change the block name if you want

6. Next, you can rearrange the relevant blocks within the product detail sections

7. Finally, let's start to customize the **Payment Icons** block

* Block ID: The unique ID of payment icons * Content Max Width: Set the maximum width of the timer’s content area can stretch to. * Title: Rich-text field above the icons * Text size: The font size of your title. * Text alignment: How the title and icons line up within the block. * Icon size: The height/width of each payment logo. * Item gap: The horizontal space between each icon. * Image: Upload a single combine image of multiple logo. * Image width: Controls how wide the uploaded image is. * Color Scheme: Applies one of your color scheme to the title text. * Top margin: Blank space above the entire block. * Bottom margin: Blank space below the block. # Social Proof The Social Proof block highlights a real customer feedback right on your product page. It combines avatar images, names, and a live counter message to build instant credibility.

### **Key Features** * Avatar & Name Display: Show customer photos and display their names with optional “verified” icons to humanize your social proof. * Customizable Messaging: Edit the suffix text around your count) with rich-text options. ### Benefits * Builds Instant Trust: Showing real people who’ve bought your product to reassure new visitors that it’s worth buying. * Boosts Conversions & Reduces Abandonment: When your customers see that someone are already enjoying your product, they’re more likely to follow suit and complete checkout. ### How To Use? 1. After installing the **Social Proof** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab. 2. Choose the **Social Proof** block

3. Copy the block ID. For example: **smi-block-social-proof-1**

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

5. On the **Smind Block**, insert the block ID of social proof which is **smi-block-social-proof-1** to the Section ID and change the block name if you want.

6. Next, you can rearrange the relevant blocks within the product detail sections

7. Finally, let's start to customize the **Social Proof** block

* Block ID: The unique ID of social proof * Content Max Width: Set the maximum width of the timer’s content area can stretch to. * Avatar: Upload each user’s profile image * Name: The fields for each user’s display name. * Verified icon: When on, a small “✔” badge appears after each name to signal authenticity. * Text: The message after your highlighted names. * Text size: Preset font-size options for the messages. * Avatar size: Controls how large each user image * Color Scheme: Applies one of your color scheme to the names and text. * Verified icon: Overrides the check-badge color when Verified icon is enabled. * Top margin: Blank space above the entire social-proof line. * Bottom margin: Blank space below it. # Star Rating # Video Slider # Live Visitor Live Visitor displays a real-time counter of how many people are viewing a product, boosting urgency and social proof. This block will tap into the “fear of missing out" (FOMO) to the customer quickly ## What is the Live Visitor? This feature shows the number of people viewing the product in real time, so you can see this number on this bar on the product page. These numbers are fully customizable, and you can set it to show dozens or even hundreds of people viewing the product. The numbers are random, based on what you pick, so it looks like real people are watching. It makes your shop feel active and real, which can help attract more buyers.

This is a common marketing trick to play on people’s fear of missing out, because the more people interested, the more valuable and popular the product seems. Therefore the buyers feel more trust and want to buy it quickly, before it’s sold out. Seeing the viewer count go up makes buyers feel rushed to purchase, so they may buy faster. If you have a few best-selling products, then why not try this feature? [**Click here to see the link demo ->**](https://library.smind.io/products/all-that-sweatshirt?view=live-visitors) ## How To Install The Live Visitor? Step 1: In Shopify Admin, going to Smind Section app and find **Live Visitor** in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click **Add Section** -> **Live Visitor**

Step 3: Copy the block ID. For example: **smi-block-live-visitors-1**

Step 4: On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section. And insert the block ID of Live Visitor to the Section ID. You can change the block name if you want.

Step 5: Next, you can rearrange the relevant blocks within the product detail sections. Scroll down to this product blocks and start to customize it.

Step 6: Now you have to change the content for this feature * **Content Max Width**: You can adjust the maximum width of this feature when it shows up on your product page, so you have control over how it looks. If you want the text to appear longer, then just make it wider, but if you want it shorter, simply reduce the width.

* **Visitor Range**: You can show how many customers are viewing this product, so the customer can see real-time the number of customer are viewing. For example, the lowest number can be 10 and the highest can be 20, so the number will show randomly from 10 to 20. * **Content**: This is the text you can change in this feature, but you have to use the short-code \[visitor\_range] to make sure the number of viewers shows up there. * **Text Size**: The font size is also important, so you can adjust it to be bigger or smaller as you like.

* **Change the count**: You can change how often the number updates every second, so if you want the number to refresh quickly, choose 2-3 seconds. But if you want it to look more realistic, you should set it to 5-7 seconds.

* **Icon Size**: You can adjust the eye icon to be bigger or smaller, depending on what you like.

* **Animated Icon:** Do you want the eye icon to move? If not, you can simply turn off the animation.

* **Color**: You can use the color picker here to change the color for the whole feature, like changing the text color.

* **Top and bottom padding**: You can also change the spacing between top and bottom for this features

Step 7: Click **Save** to apply the changes. # Inventory Status Inventory Status displays real-time stock levels on your product page and automatically switches between “In stock,” “Low stock,” and “Out of stock” messages based on your defined threshold. ## What is the Inventory Status? It displays the current stock of product so that customers know when a product is almost sold out and they should buy quickly because they might lose the chance otherwise. Imagine a customer wants the item but isn’t in a hurry today. So they add it to their cart to avoid forgetting, and they plan to buy later because there seems to be plenty. But a few days later, they return and see a notice saying only a few pieces remain, and the item will sell out any day. If they don’t buy now, there won’t be any left.

Therefore, the low-stock warning does its job and encourage an immediate purchase. The fear of missing out hits their mind and drives them to act before someone else buys. Time is running out, and there is no room for second thoughts. If you combine this feature with a countdown timer or a discount code, the impact multiplies greatly. [**Click here to see the link demo ->**](https://library.smind.io/products/all-that-sweatshirt?view=inventory-status) ## How To Install The Inventory Status? Step 1: In Shopify Admin, going to Smind Section app and find **Inventory Status** in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click **Add Section** -> **Inventory Status**

Step 3: Copy the block ID. For example: smi-block-inventory-status-1

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section. And insert the block ID of **Inventory Status** to the Section ID. You can change the block name if you want.

Step 5: Next, you can rearrange the relevant blocks within the product detail sections. Scroll down to this product blocks and start to customize it.

Step 6: Now you have to change the content for this feature * **Content max-width:** You can set the maximum width of the inventory status on your product page.

* **Low inventory threshold:** When your product quantity falls at or below the number which you set, it will switch from your “In stock” message to your “Low stock” message. * **Show Progress Bar for Low Inventory:** This toggle turns on a little visual bar when you hit low-inventory

* **In stock:** Show up when your product quantity is **above** your low inventory threshold

* **Low Stock:** Show up when your product quantity is **at or below** your low inventory threshold

* **Out of Stock**: Show up when your product quantity is **zero**

* **Text size**: Choose how big you want that inventory status's text

* **Color**: You can use the color picker here to change the color for the whole feature, like changing the text color.

* **Top and bottom padding**: You can also change the spacing between top and bottom for this features

Step 7: Click Save to apply the changes. # Compare Color Compare Color lets customers preview every color variant of a single product side by side without clicking each swatch in which it opens a customizable popup. ## What is the Compare Color? This product block lets customers compare product colors directly on the product page. And it helps them get an overview and judge which color suits them best. It is similar to the product comparison feature. But instead of comparing many products by their features, it compares one product in different colors. Imagine your product has five to seven colors, customers have to take the trouble to choose each color to know what they look like, have to click each one, it is very time-consuming and difficult to visualize.

So instead of having to take that trouble, we have created a feature that helps customers not have to click on each color palette anymore, just choose the Compare Color button to be able to see this product with all different colors. It is simple and visual to see the everything at once. From there, it is easy to make a purchase decision that satisfies their wishes right from the color selection step. If you make the page convenient and easy, customers will trust your store more. [**Click here to see the link demo ->**](https://library.smind.io/products/all-that-sweatshirt?view=compare-color) ## How To Install The Compare Color? Step 1: In Shopify Admin, going to Smind Section app and find **Compare** **Color** in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> **Compare Color**

Step 3: Copy the block ID. For example: smi-block-compare-color-1

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section. And insert the block ID of **Compare Color** to the Section ID. You can change the block name if you want.

Step 5: Next, you can rearrange the relevant blocks within the product detail sections. Scroll down to this product blocks and start to customize it.

Step 6: Now you have to change the content for this feature * **Title**: You can set the heading that appears beside the color comparison icon. * **Text size**: Adjusts the font size of your heading

* Color selector type: For the **Color** option, it shows plain color swatches in the table. For the **Thumbnail** option, it shows small product images instead of solid swatches.

* **Show “Add to cart” button**: Add a button right in the compare popup, letting customers add the chosen variant without closing it.

* **Color:** You can use the color picker here to change the color for the whole feature, like changing the text color.

* **Top and bottom padding**: You can also change the spacing between top and bottom for this features

Step 7: Click **Save** to apply the changes. # Product Bundles ## What is Product Bundles? Ever wondered how you can encourage customers to buy more in a single purchase? Our **Product Bundles** block is designed to do just that. It’s designed to intelligently recommend related products to your customers, making it effortless for them to discover and purchase more from your store. So, how does it work? It's simple. When a customer is viewing a product, this feature will display a selection of complementary items that are often purchased with it. For example, if someone is looking at the headphone MH 40 Wireless, you can suggest the powerful Beosound A9 for their living room and the stylish MW08 Sport Lamborghini earbuds for when they're on the go. Customers can easily select the items they want with a simple toggle and add the entire bundle to their cart in one click.

By bundling products, you simplify the decision-making process for your customers, which often leads to larger purchases. You're not just selling a product; you're offering a complete solution, which builds customer satisfaction and drives higher revenue. [**Click here to see the link demo ->**](https://library.smind.io/products/mh40-wireless?view=Product-bundles-block-1) ## How To Install Product Bundles? Step 1: In Shopify Admin, going to Smind Section app and find **Product Bundles 1-1** in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> **Product Bundles 1-1**

Step 3: Copy the block ID. For example: smi-block-product-bundles-1

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section.

Step 5: And insert the block ID of Product Bundles to the Section ID. You can change the block name if you want.

Step 6: Now you have to change the content for this feature * **Block ID**: This is a unique identifier for this specific block. * **Content max-width**: This setting limits the maximum width of the content inside the block

{% hint style="warning" %} You have to add complementary products to a main product on the Search & Discovery app before installing this product block to make sure it works for your store. {% endhint %} * To add complementary products in Shopify, install the **Search & Discovery app**

* In the Search & Discovery app, go to the Recommendations section and click Add recommendations.

* Select the **main product** for which you want to display complementary products. In the Add **complementary products** section, browse for and select the products you want to be complementary. Click Save to store your selections.

**Heading** These options control the title of the product bundle section. * **Heading**: This is the text that appears as the title. * **Heading size**: Controls the font size of the heading. * **Heading alignment:** This aligns the heading text.

**Container** These settings customize the appearance of the box that contains the products. * **Grid view**: If enabled, the products would be shown in a grid layout. When turned off, the products are displayed in list view

* **Thickness**: This adjusts the thickness of the border around the container. * **Thickness opacity**: This controls the transparency of the border. * **Content padding**: This sets the amount of space between the content (products) and the container's border. * **Item gap on desktop**: This defines the space between each product item when viewed on a desktop. * **Item gap on mobile**: This defines the space between each product item on mobile devices. * **Shadow**: This adds a shadow effect to the container. * **Shadow opacity:** This would control the transparency of the shadow if one were enabled.

#### Slider These options are specific to the slider layout. * **Auto rotate slides:** When enabled, the slider will automatically cycle through the products. * **Change slides every:** This sets the duration each set of products is shown before rotating to the next. * **Number of products per page:** This determines how many products are visible at one time in the slider * **Pagination:** This controls the style of the navigation indicators for the slider.

#### Checkbox This section controls the checkboxes used for selecting products in the bundle. * **Checkbox style:** This defines the appearance of the checkbox.

* **Checkbox position:** This places the checkbox to the Right of the product. The note indicates that in a Grid layout, this automatically changes to the Top or Bottom. * **Enable clickable items:** If enabled, clicking anywhere on the product item would not redirect to the product page.

#### Product settings These settings apply to the individual products within the bundle. * **Use image corner radius from theme settings:** When enabled, the product images will have the same corner roundness as defined in the main theme settings, ensuring a consistent look. * **Image width:** This controls the width of the product images. * **Media ratio:** Set to Adapt, this makes the image container adjust to the aspect ratio of each product image.

#### Button This section customizes the "Add to cart" button for the bundle. * **Button label:** This is the text displayed on the button, set to "Add to cart". * **Button animation:** This adds a visual effect to the button, currently a Flash animation. * **Color Scheme:** This applies a predefined set of colors from your theme's settings to the button. * **Custom color:** This switch allows you to override the theme's color scheme and pick a custom color for the button, but it is currently disabled.

#### Block spacing These settings control the space around the entire product bundle section. * **Top margin:** This adds a certain of pixel of empty space above the block, separating it from the content above. * **Bottom margin:** This adds a certain of pixel of empty space below the block, separating it from the content below. # Product Upsells ## What is Product Upsells? Product upselling is a sales technique aimed at persuading a customer to purchase a more expensive version of an item they are interested in, or to add upgrades or premium features to that item. The goal is to increase the value of the sale and generate more revenue. There are several common types of product upsells that sometime you might see * **Upgrading**: This is the most common type of upsell, where a seller encourages the customer to buy a more premium or upgraded version of the product they are considering. * **Bundling**: This technique involves grouping several products together and selling them as a package, often at a discounted price compared to buying each item individually. * **Protection Plans and Extended Warranties**: Offering customers an extended warranty or a protection plan for their purchase is another form of upselling.

We built this features for you not just trying to sell more; we are helping your customers find products that better suit their needs. When customers are presented with relevant and valuable upsell offers at the right time, it can increase their intent to purchase and boost your store's conversion rates [**Click here to see the demo link ->**](https://library.smind.io/products/mh40-wireless?view=product-upsells-1) ## How To Install Product Upsells? Step 1: In Shopify Admin, going to Smind Section app and find **Product Upsells 1-1** in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> **Product Upsells 1-1**

Step 3: Copy the block ID. For example: smi-block-product-upsells-1

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section.

Step 5: And insert the block ID of Product Upsells to the Section ID. You can change the block name if you want.

Step 6: Now you have to change the content for this feature * **Block ID:** This is a unique identifier for this specific block. * **Content max-width:** This setting limits the maximum width of the content inside the block.

#### Product settings This area determines which products are displayed as upsells and how they appear. * **Products:** This allows you to manually Select specific products that you want to offer as upsells. * **Enable dynamic product recommendations:** When this option is off, you must manually select products. If turned on, it would automatically show related products using Shopify's "Search & Discovery" app. * **Free text price:** This lets you display custom text instead of the price after an offer is applied. * **Image width:** This controls the width of the product images * **Media ratio:** This sets the aspect ratio for the product images. * **Use image corner radius from theme settings:** This is enabled, so the product images will have the same rounded corners as defined in your global theme settings, ensuring a consistent look.

#### Heading These options control the title of the product upsell section. * **Heading:** This is the text for the section's title. * **Heading size:** This controls the font size of the heading. * **Heading alignment:** This aligns the heading text within the block.

#### Container These settings customize the appearance of the container holding the upsell products. * **Grid view:** This is enabled, which arranges the products in a grid format * **Number of columns on desktop:** This sets the number of columns in the grid for desktop screens. * **Number of columns on mobile:** This sets the number of columns for mobile devices. * **Thickness:** This adjusts the border thickness of the container. * **Thickness opacity:** This controls the transparency of the border. * **Corner radius:** This rounds the corners of the container. * **Content padding:** This is the space between the container's border and the content inside. * **Item gap on desktop:** This sets the space between each product in the grid on desktop views. * **Item gap on mobile:** This sets the space between products on mobile views. * **Shadow:** This adds a shadow effect to the container. * **Shadow opacity:** If a shadow were enabled, this would control its transparency.

#### Slider * **Auto rotate slides:** If turned on, but would make the slides change automatically. * **Change slides every:** This would set the time between slide changes to 5 seconds. * **Pagination:** This would set the style for the slider's navigation dots or lines.

#### Checkbox This section controls the interactive elements for selecting the upsell products. * **Enable clickable items:** When on, customers can click anywhere on the product item to select it without redirecting to its product page. * **Checkbox style:** This sets the visual style of the checkbox. * **Checkbox position:** This places the checkbox to the Left/Right of the product item on the list view. * **Use a quick Add to Cart button for the product:** This is enabled, adding an individual "Add to Cart" button for each upsell product.

#### Button This section customizes the main call-to-action button for the upsell offer. * **Button label:** This sets the text on the button to "Add Cart". * **Button animation:** This determines if the button has a visual effect on interaction. * **Color Scheme:** This applies a pre-designed set of colors from your theme to the button. * **Custom color:** This toggle is off. If enabled, it would allow you to manually select a different color for the button, overriding the theme's scheme.

#### Block spacing These settings control the space around the entire product upsell section. * **Top margin:** This adds a certain of pixel of empty space above the block, separating it from the content above. * **Bottom margin:**This adds a certain of pixel of empty space below the block, separating it from the content below. # Buy X Get Y ## What is Buy X Get Y? Let’s be honest. You’ve gone online to buy just one thing. You’re on a mission, you have a budget, and you’re sticking to it. But then you see it. That magical little offer: "Buy 1, Get 3 FREE." Suddenly, your budget plan has to be reconsidered and you leave the site with three items instead of one. You spent more than you planned, but you don't feel bad about it. You don't feel like you overspent. So, what’s going on here? It's the power of the "Buy X, Get Y" deal. It’s one of the oldest and simplest tricks in the marketing playbook. It cleverly designed to shift our mindset from "How much am I spending?" to "How much value am I getting?

That's why we create a new features shown in your product page to increase **Average Order Value (AOV)** that encourage your customers to add more items to their cart to qualify for the deal. [**Click here to see the demo link ->**](https://library.smind.io/products/mh40-wireless?view=buy-x-get-y) ## How To Install Buy X Get Y? Step 1: In Shopify Admin, going to Smind Section app and find **Buy X Get Y 1-1** in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> **Product** **Buy X Get Y**

Step 3: Copy the block ID. For example: smi-block-buy-x-get-y-1

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section.

Step 5: And insert the block ID of Buy X Get Y to the Section ID. You can change the block name if you want.

{% hint style="warning" %} This section is the visual front-end component that displays the "Buy X get Y" discount campaign you created in your Shopify discount settings. You have to create this discount campaign before installing this product block to make sure it works for your product page. **Follow these steps to create a Buy X Get Y discount.** {% endhint %} ## How To Create Buy X Get Y Discount in Shopify? * From your Shopify Admin, going to the **Discounts** section from the left-hand menu. Click **Create Discount.** From the "Select discount type" menu, choose **Buy X get Y.**

* Choose the **Automatic Discount** for your campaign. This means the discount will apply automatically in the cart and at checkout once the conditions are met. Customers do not need to enter a code. * The **Title** "Buy X get Y" is for your reference in the Shopify admin.

#### Customer buys This section defines the trigger for the discount—what the customer must add to their cart to qualify. * **Condition:** The customer must purchase a **Minimum quantity of items**. * **Quantity:** The required quantity is 1. * **Any items from:** This is set to **Specific products**. * **Product selected:** The customer must add the product**s** to their cart. For example: The customer must buy **one** MH40 Wireless headphone.

#### Customer gets This section defines the reward what the customer receives once they meet the condition. * **Quantity:** The customer gets a total of 3 items. * **Any items from:** This is also set to **Specific products**. * **Products selected:** The customer can choose from: * Beosound 2 Elegant home * MW08 Bugatti * MW09 Military * **Important Note:** The customer must add these items to their cart themselves for the discount to apply. For example: The customer gets **three** products from the specified list.

#### At a discounted value This setting determines how much of a discount is applied to the "gets" items. * **Discount:** You can choose three options of discount * **Percentage:** This applies a percentage-based discount to the items the customer gets. * **Amount off each**: This option would subtract a specific monetary value from the price of each eligible "Y" item * **Free**: This option makes the "Y" items completely free by applying a 100% discount. * **Set a maximum number of uses per order:** This is a checkbox that, when enabled, limits the number of times a customer can receive the discount in one transaction. This is useful for preventing abuse of the promotion on very large orders. Set the limit to **1.**

#### Eligibility This controls who can receive this discount. * **Availability:** It's set to **All customers**. There are no restrictions based on customer segments or tags. #### Combinations This section defines if this discount can be stacked with other offers. * **Settings:** All combination options (Product discounts, Order discounts, Shipping discounts) are unchecked. #### Active dates This controls the promotion's timeline. * **Start date:** The discount is scheduled to become active on the specific date. * **Set end date:** This is unchecked, meaning the discount will run indefinitely until it is manually deactivated.

Step 7: Continue to customize this product block after saving this discount campaign. **Offer type** This is a setting that determines how the customer adds the discounted items to their cart. * **Option:** You can choose Main or Separate. * **Main:** Add the "Y" item (the free product) to the main product's "Add to Cart" button. When the customer adds the "X" product, the "Y" product is automatically added with it. * **Separate:** This means the "Y" item has its own, separate "Add to Cart" button within this block, as confirmed by the "Button" section settings.

#### Product settings This area determines which "Y" product is displayed in this block and how its discount is presented. * **Products:** This is where you Select the specific "Y" product that this block will display and offer. You must ensure the product selected here is one of the eligible "Y" products from your discount campaign. * **With total discount value:** This setting displays the discount being applied. It's set to Percentage. * **Discount value:** This displays the discount amount, set to 100 to reflect the 100% discount (making it free). * **Free price text:** This is custom text that replaces the product's price, set to "Free". * **Image width:** Controls the width of the product image, set to 80px. * **Media ratio:** Sets the aspect ratio for the product image. * **Use image corner radius from theme settings:** This is disabled, meaning you can set a custom corner radius in this section rather than inheriting it from the main theme.

#### Heading These options control the title of the section. * **Heading:** The title text for the offer, set to "Buy X get Y Free". * **Heading size:** Controls the font size of the heading. * **Heading alignment:** Aligns the heading text to the Center.

#### Container These settings customize the appearance of the box that contains the offer. * **Thickness:** The thickness of the container's border. * **Thickness opacity:** The transparency of the border. * **Corner radius:** The roundness of the container's corners. * **Content padding:** The space between the container's border and the content inside. * **Item gap on desktop:** The space between items within the container on desktop. * **Item gap on mobile:** The space between items on mobile. * **Shadow:** Adds a shadow effect to the container. * **Shadow opacity:** Controls the transparency of the shadow.

#### Button This section customizes the button that adds the "Y" product to the cart. * **Button label:** The text displayed on the button, "Grab this deal!". This button only appears in a Separate Option if it was chosen as the offer type. * **Button animation:** Adds a visual effect to the button.

#### Color This section allows for detailed color customization of the block. * **Color Scheme:** Applies a predefined set of colors from your theme's settings. * **Custom color:** If enabled, it would let you override the theme's color scheme with manual color choices. #### Block spacing These settings control the space around the entire block. * **Top margin**: This adds a certain of pixel of empty space above the block, separating it from the content above. * **Bottom margin**: This adds a certain of pixel of empty space below the block, separating it from the content below.
# Related Products ## **What is Related Products?** We’ve all been there. You land on a product page, convinced you've found exactly what you need. But then, you scroll down and a carousel of intriguing alternatives catches your eye. Ever stop to think about what's actually going on there? It's just a gallery of other products but that little box is one of the most powerful tools on your entire website.

Too many store owners see this as just a decorative row of pictures. Big mistake. That little section is your 24/7 sales associate, and it's brilliant at its job. When a customer is hesitant, it can show them a similar item that might be the perfect fit, saving a sale you were about to lose. And for the customer who's ready to buy, it can suggest the perfect accessory or complementary item, effortlessly increasing the value of their order. That's why we create the **Related Product** features to turn that simple product gallery into a powerful sales-boosting machine. Let's get started. [**Click here to see the demo link ->**](https://library.smind.io/products/mh40-wireless?view=related-product-1) ## How To Install Related Product? Step 1: In Shopify Admin, going to Smind Section app and find **Related Products 1-1** in Product Block tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any product page template and click Add Section -> **Related Products 1**

Step 3: Copy the block ID. For example: smi-block-related-products-1

Step 4: On the Product Detail sections, click Add Block and add Smind Block to the section.

Step 5: And insert the block ID of **Related Products** to the Section ID. You can change the block name if you want.

{% hint style="warning" %} You have to add related products to a main product on the Search & Discovery app before installing this product block to make sure it works for your store. {% endhint %} * To add related products in Shopify, install the **Search & Discovery app**

* In the Search & Discovery app, go to the **Recommendations** section and click **Add recommendations.**

* Select the **main product** for which you want to display related products. In the Add **Related Products** section, browse for and select the products you want to be complementary. Click Save to store your selections.

Step 7: Continue to customize this product block after saving these related products. #### Heading These options control the title of the section. * **Heading:** This is the text for the section's title. * **Heading size:** This controls the font size of the heading. * **Heading alignment:** Aligns the heading text to the Center.

#### Container These settings customize the appearance of the box that contains the related products. * **Grid view:** When disabled, the products are displayed in a list format. If it were enabled, the products would appear in a grid. * **Thickness:** The thickness of the container's border. * **Thickness opacity:** The transparency of the border. * **Corner radius:** The roundness of the container's corners. * **Content padding:** The space between the container's border and the content inside. * **Item gap on desktop:** The space between each product on desktop screens. * **Item gap on mobile:** The space between each product on mobile screens. * **Shadow:** Adds a shadow effect to the container. * **Shadow opacity:** Controls the transparency of the shadow.

#### Slider These settings control the product carousel. * **Auto rotate slides:** This is disabled. If enabled, the slider would automatically cycle through the products. * **Change slides every:** Sets the time before the slide changes. * **Number of products per page:** This determines how many products are visible at once in the slider. * **Pagination:** This controls the style of the navigation indicators for the slider.

#### Product settings These settings apply to the individual product items within the slider. * **Use image corner radius from theme settings:** This is disabled, allowing for a custom corner radius on product images that is independent of the main theme settings. * **Image width:** Controls the width of the product images. * **Media ratio:** Sets the aspect ratio for the product images.

**Color** This section allows for detailed color customization of the block. * **Color Scheme:** Applies a predefined set of colors from your theme's settings. * **Custom color:** If enabled, it would let you override the theme's color scheme with manual color choices. **Block spacing** These settings control the space around the entire block. * **Top margin**: This adds a certain of pixel of empty space above the block, separating it from the content above. * **Bottom margin**: This adds a certain of pixel of empty space below the block, separating it from the content below. # Sections A section refers to a customizable content block within a theme that allows you to organize and arrange various elements on your online store's pages. ## How To Install Sections? {% embed url="" %} 1. From our app, click **Library.** 2. In the **Sections** tab, search or select the category of section. 3. Click **Install** the section that you like.

4. Click **Customize.**

4. In the theme editor sidebar, click **Add Section.** 5. Click **Save.**

## **Follow Our Interactive Guide** {% hint style="success" %} **HOW TO USE**: 1. Click the hotspot to see the next step. You can also use -> <- on the header tab to follow. 2. To open window in a full screen, click ![](https://docs.avada.io/~gitbook/image?url=https%3A%2F%2F154471318-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FPf5QlibAKQnTygXuMIzw%252Fuploads%252FQBFy0FT3wz6EXP1sadUF%252Fimage.png%3Falt%3Dmedia%26token%3D5ea8f285-c5a7-4dbf-b5f1-04e56f24db02\&width=300\&dpr=4\&quality=100\&sign=89193c3b\&sv=2) for better experience {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} ## Frequently Asked Questions (FAQs) ### Q: Why can’t I find the Sections in my Shopify store after installing it? To make sure your Sections appears correctly, check these two things: 1. **Activate SMI Theme Helper** Go to your Shopify **Theme Settings** → **App embeds** and make sure **SMI Theme Helper** is turned ON. This helper enables the app to work properly inside your theme.

2. **Add the Sections to Your Current Theme** After installing a section from the Smind Library, you still need to add it manually to your **current theme’s template.** * From **Settings** in Smind Sections app, scroll down to choose a theme to work on, you need to make sure that this theme is your current theme.

* Open Shopify → **Online Store → Themes → Customize.**

# Templates Templates define the layout and structure for different types of content pages. ## How To Install Template? {% embed url="" %} 1. From our app, click **Library** 2. In the **Templates** tab, select the category of templates. 3. Click **Install** the template you like.

### Option 1: Create a New Page {% hint style="danger" %} This feature is available for the following template types: '**Landing page'**, '**About us**', '**Contact us**', '**FAQs**'. {% endhint %} 1. In the **Template Name** field, enter a name for the template. 2. Click **Create Page** to add a new page. 3. In the **Page Title** field, enter a title for the page. Be descriptive and clear when choosing your page title. {% hint style="danger" %} If you don't want to create a new page, just enter the **Template Name** and click **Install** {% endhint %}

4. Click **Content Editor** to start with the theme editor.

### Option 2: Set as a Home Page {% hint style="danger" %} This feature is only available for template type "**Landing page**" and "**Home Page**" {% endhint %} 1. In the **Template Name** field, enter a name for the template. 2. Click **As a Home Page** to set the page as a homepage. 3. Click **Install.** {% hint style="danger" %} After the installation, the homepage will have the same layout as the template you just set as the homepage. {% endhint %}

### Option 3: Create a New Template {% hint style="danger" %} This feature is used for the following template types: '**Product page', 'Collection page', 'Home page', 'Blogs page'** and **'Blog posts page'**. {% endhint %} 1. In the **Template Name** field, enter a name for the template. 2. Click **Install.**

## Assign Smind Template to Specific Product {% hint style="danger" %} * This feature only use for template types: **Product Page**, **Collection Page**. * For the products you assign, they will have the same template as the product you set. * This feature also works with **Collection Page** {% endhint %} {% embed url="" %} 1. From our app, click **My Library.** 2. In the **Templates** tab, click **Product.** 3. From the **Product** tab, select the template you want to assign to product. 4. Click **...** > **Assign.**

5. Click **Add Product.**

6. Select the product.

7. Click **Save.**

### Assign Template to Product Of Collection Continue the instructions from Step 4 onward after the Assign step. Step 5: Choose **Apply to Collections** then click **Add Collection**

Step 6: Select the Collection

Step 7: Click Save

Notice "**Assigned template successfully**!" mean you have apply this template to all product belong to this collection successfully ## How To Set a New Template As a Default? 1. From our app, click **My Library.** 2. In the **Templates** tab, click **Blogs.** 3. From the **Blogs** tab, select the template you want to set it as a default. 4. Click **...** > **Set as default.**

## Frequently Asked Questions (FAQs) ### Q: Why can’t I find the templates in my Shopify store after installing it? To make sure your templates appears correctly, check these two things: 1. **Activate SMI Theme Helper** Go to your Shopify **Theme Settings** → **App embeds** and make sure **SMI Theme Helper** is turned ON. This helper enables the app to work properly inside your theme.

2. **Add the Templates to Your Current Theme** After installing a Template from the Smind Library, you still need to add it manually to your **current theme’s template.** * From **Settings** in Smind Sections app, scroll down to choose a theme to work on, you need to make sure that this theme is your current theme.

* Open Shopify → **Online Store → Themes → Customize.**

# Themes A Shopify theme defines the entire look, feel, and structure of your online store. It includes templates, layout styles, and all the design elements that create the shopping experience. ## How To Install Theme? {% embed url="" %} 1. From our app, click **Library.** 2. In the **Theme** tab, select the category of industry that you are selling on. 3. Click **Install** the theme you like.

4. Rename the theme in your store.

5. Click **Manage Theme** to customize it

6. Select the theme you want to customize {% hint style="danger" %} Users can access the '[My Library](/in-app/my-library)' to view the installed themes. If users want to add sections or templates to the newly installed theme, they must switch the theme in [setting](/in-app/settings#how-to-switch-themes) {% endhint %}

# Styles ## Installation 1. From our app, click **Library.** 2. In the **Styles** tab, search the category of styles you want. 3. Click **Install** the style you like

## For Store Using Normal Theme 1. In the theme editor sidebar, delete the default style in the **Global** section.

2. Click **Add Section** to add the new style you want.

3. To customize the style, click the variants you want to edit.

## For Store Using Smind Theme {% embed url="" %} 1. In the theme editor sidebar, click **Theme Setting** gear icon. 2. Click **Theme Style**

3. To change font and color style for your store, click the name of style you want to use. 4. Click **Change Style.**

#### **How To Customize Style?** 1. In the theme editor sidebar, click **Theme Setting** gear icon to change whatever you want

Variants	Function
Colors	Allows you to customize the color scheme of your website
Typography	Refers to the fonts used for the content on your website. you can also adjust font, font size scale, line height scale, letter spacing scale for heading and body.
Typography (advance)	Allow you adjust element like desktop headings, mobile headings, button, subheading, badge, menu, price.
Layout	Help controls the structure of your website, such as the width of the page, grid systems (number of columns).
Animations	Help you adjust the effects of the button and image.
Buttons	You can adjust the button padding, scale, border, and shadow of the buttons on your website
Variant pills	Help customize these variants appear in product page like border, shadow, color swatch ( variant name, color configuration).
Inputs	Include text fields, checkboxes, and radio buttons where users can enter information or make selections, you can customize border and shadow of the inputs.
Icons	You can select icon style (package 1, 2, 3), adjust icon thickness and icon scale.
Product cards	You can select the style (Standard or Card) and adjust the image padding, border, and shadow.
Product badges	Indicate special attributes, such as "Sale badge" or "Sold out badge". You can toggle the Enable Badges mode, adjust the corner radius, and change the color (text, background).
Blog cards	Display posts in a grid format. You can select the style (Standard or Card) and adjust the image padding, border, and shadow.
Content containers	You can adjust the border (thickness, opacity, corner radius) and the shadow (blur, opacity)
Media	Including Images, Videos. : You can adjust the border (thickness, opacity, corner radius) and the shadow (blur, opacity).
Dropdown, popup	You can adjust the border (thickness, opacity, corner radius) and the shadow (blur, opacity).
Social media	You can customize the link of the social accounts like Facebook, Instagram and more.
Favicon	A favicon is the small, customizable icon that appears in the browser tab next to your store's title. You can choose a favicon image for your website.
Currency format	You can toggle the "Show currency codes".
Custom CSS	You can enter the codes to customize the CSS for your theme.

## FAQs ### Why Style Does Not Work A \[Style] will only apply changes to Smind sections. It will not affect sections that belong to other apps or your total theme # My library ## How To Use? When you installed a sections, templates, themes, styles, page builder and theme builder on your store, you can find them in their respective categories.

{% hint style="info" %} For the customize function, deleting the others similar the section. {% endhint %} ### How To Update The Section? 1. To update the latest version of section, click **Update.**

2. Click the checkbox to make sure you understand what you're doing.

{% hint style="info" %} If you want update multiple sections, you can select multiple sections -> Update {% endhint %} {% hint style="info" %} Only sections and styles have the update feature. {% endhint %} ### How To Customize The Section? To customize the section, click the icon to edit.

### How To Delete The Section? To delete the section, click ... > **Delete**

{% hint style="info" %} If you want delete multiple sections, you can select multiple sections -> Delete {% endhint %} # Page Builder Use the Page Builder to create and customize Shopify pages. Add sections, rearrange layouts, and design pages without touching code. Perfect for building Home, Product, Collection and Landing Page. ## How To Build A Home Page ? {% embed url="" %} 1. From our app, click **Page Builder.** 2. Select the type page of page you want to create. For example: I would choose a homepage to get started. 3. Click **Build Home.**

4. Click Blank Template or start with pre-made template if you want. Click **Select.** 5. Enter the name of template. Click **Start Building.**

6. Click **Add Section.** 7. Select the section you want and click **Select.**

8. If you want to try a new thing. Click **Regenerate.** It will automatically generate variations of existing sections with different layouts, making store-building faster and more dynamic.

9. Click Theme Settings gear icon. In the **Page Style**, select the style of the page you want. 10. Click **Save.**

11. Click **Content Editor** to edit the content of the page. 12. Click **Install**.

13. Now you can customize your content, image or color for the page

14. Go to **Smind Sections > My Library** 15. On the **Templates** tab, choose **Home** tab 16. Choose a template that you've just created and click **...** button . For example: smi-test7. * **Rename:** Change the name of the selected template. * **Hide header & footer of theme**: When enabled, this hides the default Shopify theme’s header and footer on the selected template. Useful for landing pages or standalone designs. * **Hide global group**: This hides any global section groups that may appear across multiple templates. * **Set as default:** Sets this template as the default for its page type (e.g., home, product, collection). Click this template as a homepage, for example. * **Delete:** Permanently removes the selected template from the library.

## How To Build A Product/Collection Page? Building a **Product Page** or **Collection Page** is exactly the same as building a Homepage using the Page Builder. So you simply follow the step-by-step instructions above, but apply them to the **Product Page** or **Collection Page** instead. After you've built your **Product Page** or **Collection Page**, you need to assign a specific product or collection to it. 1. From our app, click My Library. 2. Click the **Product** or **Collection** tab 3. Click ... > **Assign** 4. Select the product to assign to the page. Click **Save**

## How to use the Quick Build Quick Build is designed to help you create pages faster. Instead of adding sections one by one, it generate a complete page layout instantly using pre-designed templates. Once the installation is complete, you will see the interface as shown in the image. {% hint style="danger" %} If you don't see your installed template after installation, it's likely because you haven't selected the correct template tab. For example, if you've installed the Product template, be sure to select the 'Product' tab. {% endhint %}

Click on **Quick Build** -> **Add Section**. You can quickly add sections or replace the template you want.

**Note:** Remember to save your changes after making any adjustments. # HomePage # Collection Page # Collection List Page # Product Page # About Us # Contact Us . # Theme Builder Smind’s Theme Builder is designed to give you complete control over how your Shopify store looks and functions—without requiring any coding or design skills. Whether you're a merchant looking for a quick setup or an agency creating custom stores for clients, Smind makes theme building **fast, flexible, and intuitive**. With **two powerful ways to create a theme**, you can choose the approach that best suits your needs: {% embed url="" %} ## Option 1: Install a Pre-Created Theme You can create a new theme using the available Pre-Created themes. Follow the steps below. 1. From our app, click **Theme Builder.** 2. Click **Start Building** button.

Click on "Build Theme" button to start building

3. Select the pre-made theme that you want. Click **Select**

4. Enter the name of theme and click **Start Building.**

5. Once you've selected a template, you can easily customize your theme by navigating to the Theme Settings. Here, you can adjust settings like colors, fonts, layout, and other theme elements to match your preferences. 6. Click **Content Editor** to edit the content for the theme.

## Option 2: Build with the Theme Builder You can create a new theme by build it from scratch. Follow the steps below. 1. From our app, click **Theme Builder.** 2. Click **Start Building** button. 3. From this screen is an layout default of theme -> You can start select template or section from library to freedom to build any page type.

4. After create full page type you can Click on "**Save**" button -> then click on "**Content editor**" -> **Install** the theme to your store.

This is the default editor with friendly layout to use

**On Top**: You can select the page type like Home Page, Collection Page, Product page, and Other pages

**On Left**: You can add section for **Header/Body/Footer** based on our big Library layout

## How to use "Quick build" **My quick builds** are all themes you created before will be listed here for you Re-use it to save your time of customize. 1. From our app, click **Theme Builder** 2. Select the theme you want to use. Click **Quick Build**

3. When click on "Quick build" button. You can drag and drop new sections into your theme, adjust the layout, or replace existing sections or templates with just a few clicks.

**Note:** Remember to save your changes after making any adjustments. # Subscription plans We offer 3 subscription plans: Free, Basic and Pro, each providing different features and benefits to suit the needs of our users.

* **Free**: 100+ sections, 2 templates, live chat. * **Basic**: 855 sections, 180 templates, live chat. * **Pro**: All sections, all templates (67 templates), page builder, unlimited published pages, live chat.

How does the 7-day free trial work?

When you start the free 7-day trial, you'll have full access to all features in the plan. If you're not satisfied, simply cancel within the 7 days—completely free of charge.

Can I cancel my subscription anytime?

Yes, you can cancel your subscription or change your plan at any time.

How do I cancel my free trial?

To cancel the free trial, you just need to downgrade to the free plan.

What happens if I downgrade to a lower plan?

When you downgrade to a lower plan, templates from that higher plan will no longer be usable until you upgrade again.

# Settings ## How to custom Custom CSS for theme? 1. From our app, click **Settings.** 2. To add custom CSS to your store, add your code, click **Save**

## How To Switch Themes? 1. To change the theme where our app work, choose a theme to work on **Theme Switching.**

## How To Uninstall App? To delete our app, click **Delete Data**

# Support For support, please access the live chat in our app. 1. From your Shopify admin, open **Smind** app 2. Click on the live chat at the bottom right of the screen

# Header The header is the top section of your store, containing key elements like the logo, navigation menu, search bar, and cart icon to help customers navigate the site easily. ## How To Install ? {% embed url="" %} To install **Header** section in our app. You can follow these steps and the images below: 1. From our app, click Library 2. In the **Sections** tab, search for the keyword **"header"**. 3. Click **Install** and **Customize** the header you want

4. From the Shopify editor sidebar, click **Add Section.** 5. Select the header section you want.

## How To Use? #### Follow Our Interactive Guide {% hint style="success" %} **HOW TO USE**: 1. Click the hotspot to see the next step. You can also use -> <- on the header tab to follow. 2. To open window in a full screen, click ![](https://docs.avada.io/~gitbook/image?url=https%3A%2F%2F154471318-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FPf5QlibAKQnTygXuMIzw%252Fuploads%252FQBFy0FT3wz6EXP1sadUF%252Fimage.png%3Falt%3Dmedia%26token%3D5ea8f285-c5a7-4dbf-b5f1-04e56f24db02\&width=300\&dpr=4\&quality=100\&sign=89193c3b\&sv=2) for better experience {% endhint %} {% hint style="info" %} If you would like to add or edit the menu, you can find instructions [here](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus). {% endhint %} {% @guideflow/guideflow-embed requestedUrl="" %} ## Mega Menu (Collection)

{% embed url="" %} 1. Click **Add Block.** 2. Select the **Mega Menu (Collection)** block.

3. Enter the name of menu item. For example, I want to select the **Shop** item. 4. Select the number of column displayed on desktop. 5. Select the **Collections** to display on.

{% hint style="info" %} If you want to use multiple menu items in a mega menu format, you just need to write the menu items you want, separated by commas. {% endhint %} ## Mega menu (Banner) {% embed url="" %}

1. Click **Add Block**. 2. Click **Mega Menu (Banner)** block.

3. Enter the name of menu item. For example, I want to select the **Shop** item. 4. Select the **Number of Column Displayed on Desktop**. 5. Choose the **Banner Position** to left or right side. 6. Select the **Image** you want to set it up as banner. 7. In the **Heading** field, enter the title of banner. 8. Choose the **Heading Size,** and insert the **Link** of banner or URL of product.

## Mega menu (Products)

{% embed url="" %} 1. Click **Add Block.** 2. Click **Mega Menu (Products)** block.

3. Enter the name of menu item. For example, I want to select the **Shop** item. 4. Select the **Number of Column Displayed on Desktop**. 5. Enter the **Heading** of product banner. 6. Choose the **Heading Size**. 7. Select the **Products** you want to display on the mega menu

8. Choose the **Media Ratio**. 9. Choose the **Media Shape.** 10. Adjust the **Content Alignment.** 11. Enable to show **Add To Cart button.** 12. Enable to show **Price.** 13. Enable to show **The second image on hover.** 14. Enable to show **Vendor.** 15. Enable to show **Color Swatch**

## Mega menu (Product tabs)

{% embed url="" %} 1. Click **Add Block.** 2. Click **Mega Menu (Product Tabs).**

3. Enter the name of menu item. For example, I want to select the **Shop** item. 4. Select the **Collections** you want to display on the mega menu 5. Select the **Number of Product Column** displayed on desktop. 6. Choose the **Media Ratio**. 7. Choose the **Media Shape.** 8. Adjust the **Content Alignment.** 9. Enable to show **Add To Cart button.** 10. Enable to show **Price.** 11. Enable to show **The second image on hover.** 12. Enable to show **Vendor.** 13. Enable to show **Color Swatch.**

## Menu label

{% embed url="" %} 1. Click **Add Block.** 2. Click **Menu Label.**

3. Enter the **Label** of menu. For example: Hot Items 4. Select the **Color Background** for the label. 5. Select the **Color Text**. 6. Enter the **Menu Name** for the label. 7. Select the **Animation** for the label.

## Search suggestions

{% embed url="" %} 1. Click **Add Block.** 2. Click **Search Suggestions** block.

3. Enable **Recent Search** function. 4. Enter the **Popular Search Keywords.** 5. Enter the **Heading** of Product Recommendation. 6. Choose the **Heading Size.** 7. Select the **Produc**t that you want to display on search bar. 8. Display the **Number of Columns** on desktop. 9. Choose the **Media Ratio**. 10. Choose the **Media Shape.** 11. Adjust the **Content Alignment.** 12. Enable to show **Add To Cart button.** 13. Enable to show **Price.** 14. Enable to show **The second image on hover.** 15. Enable to show **Vendor.** 16. Enable to show **Color Swatch.**

{% hint style="info" %} If you don't want 'Popular searches' to be displayed, simply leave the 'Popular search keywords' field empty in the settings. {% endhint %} # Product Detail Product detail refers to the essential information displayed to customers, including the product title, description, images, price, variants, and other relevant details. ## How To Install ? 1. From our app, click **Library.** 2. In the **Sections** tab, search for the keyword **Product detail.** 3. Select the section you want and click **Install** and **Customize.**

3. From the Shopify Editor sidebar, click **Add Section.** 4. Search for **Product Detail** section

> If you are using our theme, you can skip this step install "Product detail" section. ## How To Use The Size Chart ? Step 1: [Configuring size chart](/guides/configuring-size-chart). Step 2: Go to the product page and select the correct product for which you just created the size chart. Step 3: Click **Add Block** and click **Size Chart.**

Then, you will see the size chart displayed in the product details.

{% hint style="info" %} If you don't select the correct product for which you set up the size chart, it will not be displayed. {% endhint %} ## How To Use Variants Picker? Step 1: [Configuring color swatches](/guides/configuring-color-swatches). Step 2: Customize the **Variant Picker** block. * Color selector type "Color swatch"

* Color selector type "Pill with color swatch"

* Color selector type "Image"

* Color selector type "Dropdown"

* Color selector type "Pills"

## How To Use Complementary Products & Product Bundles ? {% embed url="" %} To set up the 'Complementary products' and 'Product bundles' blocks, you can follow the instructions below. Step 1: Install the "[Search & Discovery](https://apps.shopify.com/search-and-discovery)" app. Step 2: Choose the correct product name displayed in the product details and select complementary products. 1. From the **Search & Discovery** app, click **Recommendation.** 2. Select the product you want to add the complementary products or product bundles.

3. Click **Browse** to add the products. 4. Add the product you want and click **Add** and **Save** it

5. Click **Add Block** and add **Complementary Products.**

Then, you will see the complementary products displayed in the product details.

6. Click **Add Block** and add **Product Bundles.**

Then, you will see the product bundles displayed in the product details.

{% hint style="info" %} User can purchase multi-products the same time {% endhint %} {% hint style="info" %} If all items are added to the cart or out of stock, the 'Complementary products' and 'Product bundles' blocks will not display anything. {% endhint %} ### How To Use Multiple Variant Images ? {% embed url="" %} # Product Bundles Product bundles in our app allow store owners to sell multiple products together as a single package, to encourage customers to purchase more. ## How To Install ? {% embed url="" %} To install the **"Product bundles"** section in our app. You can follow these steps and the images below: 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Product Bundles.** 3. Click **Install** and **Customize.**

4. From the Shopify Editor sidebar, click **Add Section.** 5. Search for **Product Bundles** section and click on it. {% hint style="warning" %} **Product Bundles** section can only be added to the **Product Page** and **CANNOT** be added to other pages. {% endhint %}

6. Install the "[Search & Discovery](https://apps.shopify.com/search-and-discovery)" app.

7. Click **Recommendation.** 8. Select a product you want to customize [product recommendation](https://help.shopify.com/en/manual/online-store/search-and-discovery/product-recommendations) for.

9. Click **Browse** 10. Select up to 2 or 3 Complementary Product. Click **Add** and **Save.**

## How To Use ? Go to the 'Products' page in your theme, select the product you just created under 'Product Recommendations,' and you will see the layout of the 'Product Bundles' section.

Users can purchase multiple products at the same time. {% hint style="warning" %} If you don't select the correct product under '**Product Recommendations,** the '**Product Bundles'** section will not display anything. {% endhint %} {% hint style="warning" %} If the 'Product Complementary' is out of stock or all items have been added to the cart, the **'Product Bundles'** section will be empty. {% endhint %} ## How To Change The Product Preview ? 1. Click the **Change.** 2. Select or search for the product you want to switch to.

# Collection Page The Collection page in our app is a type of page that groups products based on specific attributes or criteria, making it easier for customers to browse and shop. ## 1. Setup {% embed url="" %} To install **"Collection page"** section in our app. You can follow these steps and the images below: 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Collection Page.** 3. Click the **Install** button to install the Collection **Page** sections.

4. From the Shopify Editor sidebar, click **Add Section** in the **Template** tab. 5. Search for **Collection Page** section and click on it.

{% hint style="info" %} "Collection page" section can only be added to the Collections page and cannot be added to other pages. {% endhint %} Once the installation is complete, you will see the **'Collection page'** interface as shown below.

## 2. FAQ ### 2.1. Assign template to collection Go to your Shopify admin and navigate to **Products > Collections**. Edit the specific collection you want to change, and then update the **Theme template**. If you've already customized your theme's default collection template, you can keep it set to "**Default collection"**.

### 2.2. How to preview a template in different collections 1. Click the 'Change' text. 2. Select or search for the "Collection" you want to switch to.

### 2.3. Create and customize filters on the Collection page? {% embed url="" %} 1. Install ["Search & Discovery"](https://apps.shopify.com/search-and-discovery) app.

2. Click **Filters**. 3. Click **Add Filters**. [Click here](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters) to learn more about adding or customizing the option filter for your store.

4. Click the **Source** field, and then select a filter source that you want to make available to your customers. 5. In the **Filter label** field, enter your new label. 6. In the **Values** section, select the values that you want to group as a single filter value. You can use the search bar to find more filter values. 7. Click **Save**.

{% hint style="info" %} If you haven't added a filter in the "Search & Discovery" app, the filter on the collection page will not appear. {% endhint %} # Vertical Layout This layout is **a fixed sidebar** that displays every filter category and option simultaneously on the left side , your customer can mix & match filters on the fly—no hidden menus or extra clicks—so they quickly zero in on exactly what they want. [Click here to see the layout demo](https://library.smind.io/collections/collection-page/) {% embed url="" %} ## Key Features * Persistent left-sidebar showing all filter groups at once (e.g. Price, Color, Vendor, Tags). ## Benefits * **Faster product find:** it will reduces time to first “Add to Cart” * **Higher cross-sell:** the customer can spot the complementary items that they hadn’t considered. * **Boosted AOV:** this layout simplify the complex catalogs to a vertical filtering that increases the likelihood of multi-item baskets. ## Real Example **Fashion Nova** was founded in 2006 by Richard Saghian in Los Angeles, California. It operates primarily as an online fast-fashion retailer but also maintains five brick-and-mortar stores in the U.S. **Revenue:** * Growjo estimates **$941.6 million** in annual revenue. [Sources](https://growjo.com/company/Fashion_Nova) * ECDB (eCommerceDB) records **$871.2 million** in net e-commerce sales for 2024. [Sources](https://ecommercedb.com/store/fashionnova.com) **Allbirds** was co-founded in March 2016 by Tim Brown and Joey Zwillinger, and is headquartered in San Francisco, California. It is structured as a public benefit corporation, emphasizing sustainable materials and practices **Revenue:** * Full-year 2024 net revenue was **$189.8 million.** [Sources](https://www.globenewswire.com/news-release/2025/3/11/3041000/0/en/Allbirds-Reports-Fourth-Quarter-and-Full-Year-2024-Financial-Results.html) * In Q3 2024 alone, net revenue totaled **$43.0 million**. [Sources](https://ir.allbirds.com/news-releases/news-release-details/allbirds-reports-third-quarter-2024-financial-results)

## How To Use? 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Collection Page 1-1** 3. Click **Install** and **Customize.**

4. Click Add Section 5. Search for **Collection Page 1-1** and click on it

## How to edit the Collection Page 1-1?

**Tags** * Tag heading: Enter the label that appears above your list of tags. Default: “Tags” * Tag style: Controls the look of each tag option. You’ll usually see three presets: Default (Checkbox), Style 1 (Text Link), Style 2 (Text Link) ### Categories

* Heading: Enter the title displayed above your list of category links. You can edit it to anything meaningful (e.g. “Shop by Style,” “Departments,” “Explore”). * Menu: Choose which navigation menu supplies the links here. ### Gallery

* Heading: Enter the title shown above your thumbnails. * Use media style from theme settings: When On, each thumbnail inherits whatever border-radius, shadow, or overlay your theme applies to images globally. When Off, thumbnails don't display any styling. * Open link in new tab: Controls whether clicking an image opens its destination in a new browser tab. * Image & Link: Click the thumbnail to upload or choose an image from your library. Paste any URL or search for an internal collection/page. ### Image Banner

* Image & Link: Click the thumbnail to upload or choose an image from your library. Paste any URL or search for an internal collection/page. * Use media style from theme settings: When On, your banner inherits whatever border-radius, shadow, or overlay your theme applies to images globally. When Off, it don't display any styling. * Open link in new tab: Controls whether clicking an image opens its destination in a new browser tab. ### Social Media

* Heading: You can change whatever label you like (“Connect,” “Follow us,” etc.). * To add a social media icon link: [Click here to add](/guides/showing-social-media-icons) * Icon Style: Three preset looks for your icons. * Icon Size: Drag the slider or type a value to scale your icons up or down. # Horizontal Layout This layout live in a slim **top bar** above your grid. It helps your store minimal that customers can dive straight into browsing and fine-tune their view with neat dropdowns. [Click here to see the layout demo](https://library.smind.io/collections/collection-page?view=collection-page-2) {% embed url="" %} ## Key Features * Filters & sort controls spread across the top above the product grid. * Dropdowns buttons for each filter group. ## Benefits * **Higher impulse adds:** showing products immediately encourages quick selections. * **Cleaner aesthetic:** less visual friction keeps shoppers focused on products. * **Improved SEO:** more products above the fold can boost organic visibility. ## Real Example **Death Wish Coffee** was founded in 2012 by Mike Brown in Saratoga Springs, New York, where it remains headquartered. The brand positions itself as the maker of the “World’s Strongest Coffee,” blending robusta and Arabica beans sourced from India, Peru, and other regions in South and Central America **Revenue:** * Growjo estimates annual revenue at **$44.5 million** per year. [Sources](http://growjo.com/company/Death_Wish_Coffee_Company) * LeadIQ reports annual revenue of **$35 million** as of April 2025. [Sources](https://leadiq.com/c/death-wish-coffee-company/5a1d9d5823000054008d308e)

## How To Use? 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Collection Page 2-1** 3. Click **Install** and **Customize.**

4. Click **Add Section** 5. Search for **Collection Page 2-1** and click on it

## How to edit the Collection Page 2-1?

1. **Container** * Container full-width: When **On:** Grid spans the entire browser window. When **Off:** Constrained to your theme’s max content width. * Enable spacing between items: Adds consistent margins between product cards for a clean look. 2. **Filter Settings** * Filter style (1 / 2 / 3): Three preset layouts for how filters appear * Enable sorting: Adds a “Sort by” dropdown alongside the filters. * Show columns switcher: Lets user choose 1–4 columns on desktop. * Tag filter label: Enter the name of filter label you set in Search & Discovery app. * Tag style (Default / 1 / 2): Controls the look of each tag option. You’ll usually see three presets: Default (Checkbox), Style 1 (Text Link), Style 2 (Text Link) 3. **Layout Settings** * Products per page: Drag the slider or type a value to set how many items load before paginating. * Number of columns on desktop (1 / 2 / 3 / 4): Choose your default grid width on large screens. * Number of columns on mobile (1 / 2): Choose grid width on mobile views. * Pagination: Default, Infinite scroll, or “Load more” button. * Default pagination style: Select shapes for page-number buttons (e.g. square, circle, text). 4. **Product Card** * Media ratio (Adapt, Square, Portrait, Landscape): Controls how images are cropped/fitted. * Media shape (Default, Round, Blob): Applies a mask to your images for a distinctive look. * Content alignment (Left, Center, Right): Aligns title, price, and buttons within each card. * Show “Add to cart” button * Show price (toggle) * Show second image on hover (toggle) * Show vendor (toggle) * Show color swatch (toggle) 5. **Color** * Section color scheme: Applies a preset background/text color palette to the whole section. * Product card color scheme: 6. **Section Padding** * Top padding & Bottom padding (px): add white-space above and below the collection grid. # Off-Canvas Layout This layout displays the **available filters** that slides in the left/right side on the desktop or bottom on the mobile view. That would be perfect for mobile and minimalist designs when your collection always stay uncluttered, and full filtering opens only when the customer click for it. {% embed url="" %} [Click here to see the layout demo](https://library.smind.io/collections/collection-page?view=collection-page-3-1) ## Key Features * Filters hidden behind a “Filter” button that slides in from the side (desktop) or bottom (mobile). * Partial-screen overlay for filtering controls. ## Benefits * **Mobile-first usability**: One tap opens the filter panel, then tap again to close—keeps product grid clean. * **Clutter-free**: Hides all filters until needed. ## Real Example **Pura Vida Bracelets** was founded in 2010 by Griffin Thall and Paul Goodman and is headquartered in La Jolla, California. The brand sources handcrafted bracelets from Costa Rican artisans and sells via its own website, boutique partners, and cause-marketing collaborations. * Revenue: In the fiscal year ended 1 February 2024, Pura Vida reported **$53.2 million** in revenue under its then-parent Vera Bradley. [Sources](https://shop-eat-surf-outdoor.com/news/pura-vida-sold-by-parent-company-vera-bradley/605235/) **Chubbies** was launched in 2011 by four Stanford graduates and is based in San Francisco, California, with a direct-to-consumer e-commerce model and a handful of pop-up locations * Revenue**:** For its most recent fiscal year, Chubbies achieved **$101.6 million** in sales, up from $89.3 million the prior year, and recorded **$9.1 million** in net income. [Sources](https://finance.yahoo.com/news/chubbies-built-100-million-business-050000038.html) **Emma Bridgewater** was established in 1985 by Emma Rice (née Bridgewater) and is headquartered in Hanley, Stoke-On-Trent, Staffordshire, England * Revenue: In the year ending 29 April 2023, Emma Bridgewater reported sales of **£36.2 million**, a 9 % rise from £33.1 million the previous year. [Sources](https://www.housewaresnews.net/emma-bridgewater-posts-1-4m-loss/)

## How to use? 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Collection Page 3-1** 3. Click **Install** and **Customize.**

4. Click **Add Section** 5. Search for **Collection Page 3-1** and click on it

## How to edit the Collection Page 3-1?

1. **Container** * Full-width: When **On**, your collection grid stretches edge-to-edge of the browser window. When **Off**, it’s constrained to your theme’s maximum content width. * Enable spacing between items: Adds consistent margins between product cards for a clean look. 2. **Toolbar Settings** * Toolbar style (1 / 2 / 3): Three preset layouts for the toolbar * Show total results: Displays all the results * Show columns switcher: Lets user choose 1–4 columns on desktop. * Enable sorting: Adds a “Sort by” dropdown 3. **Filter Settings** * Filter style: Three preset layouts for the filter: **Left drawer** (slide-out panel on desktop), **Right drawer** and **Toggle** style. * Filter size (S / M / L / XL): Adjusts the width of the filter container. * Heading size (XS / S / M / L): Controls the font size of each filter group title * Limit filter widget height: When On, the filters area scrolls internally if it grows too tall, preventing the sidebar from pushing the product grid down * Collapse filters: When **On,** all groups start collapsed when you click to filter. * Show count: When On, displays the number of results next to each filter option * Tag filter label: Enter the name of filter label you set in Search & Discovery app. * Tag style (Default / 1 / 2): Controls the look of each tag option. You’ll usually see three presets: Default (Checkbox), Style 1 (Text Link), Style 2 (Text Link) 4. **Layout Settings** * Products per page: Drag the slider or type a value to set how many items load before paginating. * Number of columns on desktop (1 / 2 / 3 / 4): Choose your default grid width on large screens. * Number of columns on mobile (1 / 2): Choose grid width on mobile views. * Pagination: Default, Infinite scroll, or “Load more” button. * Default pagination style: Select shapes for page-number buttons (e.g. square, circle, text). 5. **Product Card** * Media ratio (Adapt, Square, Portrait, Landscape): Controls how images are cropped/fitted. * Media shape (Default, Round, Blob): Applies a mask to your images for a distinctive look. * Content alignment (Left, Center, Right): Aligns title, price, and buttons within each card. * Show “Add to cart” button * Show price (toggle) * Show second image on hover (toggle) * Show vendor (toggle) * Show color swatch (toggle) 6. **Color** * Section color scheme: Applies a preset background/text color palette to the whole section. * Product card color scheme: 7. **Section Padding** * Top padding & Bottom padding (px): add white-space above and below the collection grid. ### Categories

* Heading: Enter the title displayed above your list of category links. You can edit it to anything meaningful (e.g. “Shop by Style,” “Departments,” “Explore”) * Menu: Choose which navigation menu supplies the links here. ### Gallery

* Heading: You can change whatever label you like (“Connect,” “Follow us,” etc.). * To add a social media icon link: [Click here to add](/guides/showing-social-media-icons) * Icon Style: Three preset looks for your icons. * Icon Size: Drag the slider or type a value to scale your icons up or down. # Expand/Collapse Layout The filter group are **collapsed or expanded into clickable headers**. The user can expand only the filter option that they care about, it's great for deep or complex catalogs product , so that nobody feels overwhelmed. [Click here to see the layout demo](https://library.smind.io/collections/collection-page?view=collection-page-3-2) {% embed url="" %} ## Key Features * Filter groups shown as collapsible accordions—only headers visible until clicked. ## Benefits * **Focused exploration:** users feel in control, opening relevant sections only * **Increased add-to-cart:** controlled refinement uncovers more matching items, boosting multi-item orders ## Real Example **Steve Madden** was founded in 1990 by designer Steve Madden. The company’s principal executive offices are located at 52-16 Barnett Avenue, Long Island City, New York 11104, USA. * Revenue: Fiscal 2024 of Total revenue of **$2,282.9 million**, up 15.2 % from $1,981.6 million in 2023. [Sources](https://www.tradingview.com/news/tradingview%3A958b0ba05397d%3A0-steven-madden-ltd-sec-10-k-report/)

## How to use? 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Collection Page 3-2** 3. Click **Install** and **Customize.**

4. Click **Add Section** 5. Search for **Collection Page 3-2** and click on it

## How to edit the Collection Page 3-2?

Here’s how it works: as you scroll, the product photo and its description change together. We also made the image "sticky," so it stays put while you scroll. Move your mouse up or down, and the text will fade as the next image slides into view. [**Click here to see the link demo ->**](https://library.smind.io/pages/demo?view=image-with-text-7) ## How To Install The Image With Text 7? Step 1: In Shopify Admin, going to Smind Section app and find **Image With Text 7** in Section tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any page template and click Add Section -> **Image With Text 7**

Step 3: Now you can customize for the layout, media, content, color and spacing of this section **General Settings** * **Layout:** The setting determines the overall width of the section's content on the page.

* **Desktop media width:** This determines the width of the image on desktop devices. The available options are Small/ Medium/ Large size. * **Desktop media position**: This controls the alignment of the image relative to the text on larger screens. **Left**: Places the image to the left of the text. **Right**: Places the image to the right of the text. * **Media ratio**: This sets the aspect ratio of the image. * **Media shape**: This setting defines the shape of the image.

* **Content position:** This aligns the block of text vertically. * **Content alignment**: This determines the horizontal alignment of the text itself. * **Content max-width**: A slider sets the maximum width for the text content. This helps in maintaining readability by controlling the length of the text lines.

* **Color Scheme**: You can use the color scheme here to change the color for the section, like changing the text color. * **Top padding**: This slider controls the amount of empty space at the top of the section, inside its border * **Bottom padding**: This slider controls the amount of empty space at the bottom of the section.

**Block Settings - Image With Text 7** * **Image**: You can upload an image from your device or select one from your Shopify files

* **Subheading**: A field for a smaller, introductory piece of text that appears above the main heading * **Heading**: This is the main title for the section. * **Heading size**: These buttons control the font size of the Heading text. * **Description**: A rich text editor for the main body of text. This field provides more detailed information

* **Button label**: This field sets the text that is displayed on the button. * **Button link**: This is where you specify the destination URL for the button * **Button style:** This determines the visual appearance of the button. (Solid/Outline/Text) * **Button full-width:** This is a toggle switch that, when enabled, will make the button expand to fill the entire width of its container

# Image With Text 8 So, you run a store selling home electronics and you've got a ton of products, right? Each one has a bunch of features and uses that you need to explain, but you don't want to bury your customers in a wall of text. If you're looking for a way to show everything off in a clean, visual way that actually makes sense, you're in the right spot. We get it. The old way of just listing features one after another is boring. It makes for a super long page, and customers have to keep scrolling and scrolling. Chances are, they'll leave out and forget what they just read.

That's why we created a new section we call **Image With Text #8**. It’s interactive. When a customer clicks on a headline for a feature, the picture right next to it changes to match. It’s all laid out neatly, with the image and text sitting side-by-side. This simple interaction puts the customer in charge. They get to decide what they want to learn about, which feels way better than being forced to dig for information. It keeps them happy and engaged, which is exactly what you want. [**Click here to see the link demo ->**](https://library.smind.io/pages/demo?view=image-with-text-8) ## How To Install The Image With Text 8? Step 1: In Shopify Admin, going to Smind Section app and find **Image With Text 8** in Section tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any page template and click Add Section -> **Image With Text 8**

Step 3: Now you can customize for the layout, media, content, color and spacing of this section. **General Settings** * **Layout**: This setting defines the overall width and spacing of the section on the page. (Boxed/ Full Width).

* **Subheading**: An optional, smaller line of text. * **Heading**: The primary title for the section. * **Heading size:** Determines the font size of the main Heading. (Extra Small/ Small/ Medium/ Large) * **Description:** A rich text field for providing more detailed information. * **Heading alignment**: Sets the horizontal alignment for all the text in the Heading block

* **Media ratio:** This controls the aspect ratio of the media (images or videos) used within the section's blocks.

* **Auto rotate slides**: A toggle switch that, when enabled, automatically cycles through the slides. * **Change slides every**: A slider that sets the time delay between slide transitions.

* **Section color scheme**: This color scheme applies to the border and shadow of the content cards within the section. * **Content color scheme**: This scheme applies to the text and background colors of the content itself.

* **Top padding**: This slider controls the amount of empty space at the top of the section, inside its border * **Bottom padding**: This slider controls the amount of empty space at the bottom of the section.

**Block Settings - Image With Text 8** * **Icon**: A dropdown menu to select a predefined icon from the theme's library. * **Upload icon**: An uploader to add a custom icon image. You can select an existing file or upload a new one. * **Icon size**: A slider that adjusts the display size of the icon. * **Icon background**: A color selector for the background of the icon.

* **Heading**: A text field for the title of the item. * **Heading size**: Buttons to set the font size for the heading. * **Content**: A rich text editor for the descriptive body text.

* **Media options**: Toggles to choose the type of media to display (Image/Video). * **Image**: An uploader for the primary image for this block. * **Mobile image (optional)**: An optional uploader to provide a different image that will be displayed specifically on mobile devices.

# Compare Product ## What is the Compare Product section? Have you ever heard of the anchoring effect? Also known as Anchoring Bias This effect explains how the first piece of information we receive (the "anchor") heavily influences our subsequent decisions. In marketing and sales, the product price that first appears in a customer's mind becomes a fixed threshold for judging the price of the next product. Marketers will anchor the first product's price very high to make the next product's price seem cheap and reasonable in comparison. The buyer will feel like they got a bargain and be excited about their purchase, not realizing that it's a marketing tactic playing on their psychology to drive a quick purchasing decision. If you want to sell the second or third product, you should set the price of the first product very high and the remaining products cheaper, so they will compare and consider buying the more affordable and reasonably priced option.

That is why we created this section - **Compare Product** to help you apply this psychological trick more effectively. We have created a comparison table between products that includes prices, product images, and descriptions. It allows you to highlight the product you want to sell, complete with labels for each product to attract attention more easily. [**Click here to see the link demo ->**](https://library.smind.io/pages/demo?view=compare-products-2) ## How To Install The Compare Product? Step 1: In Shopify Admin, going to Smind Section app and find **Compare Product** in Section tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any page template and click Add Section -> **Compare Product 2-1**

Step 3: Now you can customize for the layout, media, content, color and spacing of this section **General Settings** * **Container full-width**: When enabled, this option makes the section's content span the entire width of the browser window. * **Enable spacing between items**: This toggle, when active, adds space or gaps between the product columns.

* **Subheading**: A text field for an optional, smaller title. * **Heading**: The main title for the section. * **Heading size**: Controls the font size of the main heading. * **Description**: A rich text editor for a longer introductory text. T * **Heading alignment**: Sets the horizontal alignment for the Subheading, Heading, and Description.

* **Number of columns on desktop**: Determines how many products are shown in a single row on desktop screens. * **Enable swipe on mobile**: When turned on, this allows users on mobile devices to swipe horizontally to view the product columns, which is useful when the number of columns doesn't fit the screen width. * **Content alignment**: Aligns the content (text, price, button) within each product column. * **Product name size**: Sets the font size for the product titles. * **Price size**: Sets the font size for the product prices.

* **Icon**: A dropdown to select a predefined icon. * **Upload icon**: Provides an option to select a custom image to be used as an icon. * **Icon size:** A slider to adjust the size of the icon in pixels. * **Use content container style from theme settings**: When enabled, this would apply default styling like borders or background colors from the main theme settings to the content area.

* **Media ratio**: Sets the aspect ratio for the product images. * **Media shape**: Defines the shape of the product images.

* **Show "View detail" button**: A toggle to display or hide the button on each product card. It is currently enabled. * **Button style**: Determines the visual appearance of the button. \\ * **Button full-width**: A toggle that, when enabled, makes the button span the full width of the product column. It is currently disabled.

* **Section color scheme**: Applies a preset of colors to elements like the border and shadow of the product cards. * **Content color scheme**: Applies a color scheme to the text and other content within the section. * **Top padding**: Controls the amount of empty space above the section's content. * **Bottom padding**: Controls the amount of empty space below the section's content.

**Block Settings - Compare Product** * **Product:** This is a selection field that allows you to search for and choose a specific product from your store's catalog. * **Content**: This is a rich text editor where you can input key features or specifications. * **Plant name**: This field is for the text that will appear on the badge * **Background:** This is a color picker to set the background color of the badge. * **Label:** This is a color picker for the text color of the badge.

# Information Tab # Information Tabs 1 ## What is the Information Tabs 1 section? We all understand how a folder with tabs helps organize documents so we can find them easily. In web design, this concept is used to neatly organize and display product features. This tabbed section transforms a standard product description into an engaging showcase. Take the specialty coffee in the example. It has a unique flavor, a specific origin, and a detailed processing method. A tabbed layout lets you present this information elegantly. When a customer clicks a tab, the relevant information is displayed instantly without them needing to leave the page. This saves space, creates a very clean look, and allows customers to interact directly with the details that interest them most.

[**Click here to see the link demo ->**](https://library.smind.io/pages/demo?view=information-tabs-1) ## How To Install The Information Tabs? Step 1: In Shopify Admin, going to Smind Section app and find **Information Tab 1-1** in Section tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any page template and click Add Section -> **Information Tab 1-1**

Step 3: Now you can customize for the layout, media, content, color and spacing of this section **General Settings** * **Layout**: This dropdown determines the width of the section on the page. * **Subheading**: An introductory line of text. * **Heading**: The main title for the section. * **Heading size:** Controls the font size of the heading text. * **Description**: A rich text field for a short paragraph below the heading * **Heading alignment:** Sets the horizontal alignment for the Subheading, Heading, and Description.

* **Desktop media width**: Adjusts the width of the media on desktop screens. * **Desktop media position**: Determines whether the media appears to the left or right of the tab content. * **Media height**: Sets the height of the media container. The options are XXS, XS, S, M , and L.

* **Content position**: Aligns the block of content within the tab. * **Content alignment**: Sets the horizontal alignment of the text inside the content block. * **Content max-width**: A slider that controls the maximum width of the text content to ensure readability.

* **Section color scheme**: This scheme applies to the border and shadow of the cards * **Content color scheme**: This scheme applied to the background and text color of the main content area within the tabs. * **Top padding**: Controls the amount of empty space above the section's content. * **Bottom padding**: Controls the amount of empty space below the section's content.

**Image/ Video Block Settings - Information tabs** * **Title**: This field is for the name of the tab * **Image:** This is where you select the image that will be displayed when this tab is active. * **Cover image**: This is a placeholder image that is displayed before the video plays. * **Upload video**: This option allows you to upload a video file directly from your computer to your Shopify files. * **Video URL**: You can paste a link to a video hosted on another platform. The field specifies that it accepts YouTube * **Autoplay**: This is a toggle switch that, when enabled, will cause the video to start playing automatically as soon as the tab is opened

* **Subheading**: This is a small, introductory line of text that appears above the main heading to provide context. * **Heading**: This serves as the main title for the content within the tab. * **Heading size**: These buttons allow you to adjust the font size of the Heading text for visual hierarchy. * **Description:** This is a rich text editor for the main body of text. * **Button label:** This field defines the text that will appear on the button. * **Button link:** This is where you set the destination URL for the button. * **Button style:** This dropdown menu determines the visual appearance of the button. * **Button full-width:** This is a toggle switch that controls the button's width.

# Information Tabs 2 ## What is the Information Tabs 2? Did you know that a bad user experience is one of the biggest silent killers of online sales? The recent study found that 88% of online shoppers say they won't come back to a website after a bad experience. This includes slow page loads, confusing navigation and low-quality or missing product details and images. If your product page is cluttered, lacks detail, and doesn't have compelling images, potential customers will click away in an instant. It doesn't matter how amazing or well-priced your product is; if you don't fix it, you'll lose their trust for good. That's why we created the section - **Information Tabs 2** to solve that problem. It helps you organize product information neatly in a vertical layout, which has been proven to be much more effective than a horizontal one.

A usability study on product pages showed that [**27%**](https://baymard.com/blog/avoid-horizontal-tabs) of customers tend to ignore product information hidden within horizontal tabs. They are clearly looking for detailed product information, yet they are willing to skip it even when they see it. In contrast, with vertical information tabs, only 8% of customers skipped reading the information—three times less than with horizontal tabs. [**Click here to see the link demo ->**](https://library.smind.io/pages/demo?view=information-tabs-2) ## How To Install The Information Tabs? Step 1: In Shopify Admin, going to Smind Section app and find **Information Tab 2-1** in Section tab of Library. Click Install and Customize it.

Step 2: Going to Shopify Editor sidebar, choose any page template and click Add Section -> **Information Tab 2-1**

Step 3: Now you can customize for the layout, media, content, color and spacing of this section **General Settings** * **Container full-width**: This toggle switch, currently off, controls the width of the section's container. * **Subheading:** An optional, smaller title that appears above the main heading. * **Heading**: The primary title for the entire section. * **Heading size:** A set of buttons to control the font size of the Heading. * **Description:** A rich text field for an introductory paragraph that appears below the main heading. * **Heading alignment:** Aligns the Subheading, Heading, and Description text for the entire section.

* **Desktop media width**: Sets the width of the media on desktop devices. * **Desktop media position**: Determines the placement of the media relative to the text content within the tabs. * **Media ratio:** Controls the aspect ratio of the media container. * **Media shape:** Defines the frame shape for the media.

* **Autoplay**: A toggle switch, currently enabled, to turn the automatic tab-switching feature on or off. * **Autoplay timer**: A slider that sets the time delay before switching to the next tab.

* **Color scheme**: This is a dropdown menu that allows you to select from a list of preset color. * **Top padding**: Controls the amount of empty space above the section's content. * **Bottom padding**: Controls the amount of empty space below the section's content.

**Image/ Video Block Settings - Information tabs** * **Title**: This field is for the name of the tab * **Image**: This is where you select the image that will be displayed when this tab is active. * **Cover image**: This is a placeholder image that is displayed before the video plays. * **Upload video**: This option allows you to upload a video file directly from your computer to your Shopify files. * **Video URL**: You can paste a link to a video hosted on another platform. The field specifies that it accepts YouTube * **Autoplay**: This is a toggle switch that, when enabled, will cause the video to start playing automatically as soon as the tab is opened

* **Icon**: A dropdown menu to select a pre-loaded icon to display. * **Upload icon**: If you don't use a pre-loaded icon, you can upload your own custom icon image here. * **Icon size**: A slider to adjust the display size of the uploaded icon. * **Icon background**: A color picker to set a background color for the icon.

* **Heading**: The main title for the content within this specific tab. * **Heading size**: Buttons to control the font size of the Heading text. * **Content:** A rich text editor for the main body of descriptive text in the tab.

# Wishlist & Wishlist Page ## Overview * The **"Wishlist"** section in "Smind sections" app allows customers to save products they’re interested in **"Wishlist page"**. * Helps users easily keep track of their favorite products, making their experience better. ## How To Install ? {% embed url="" %} To use the **"Wishlist"** section, you also need to install the "**Wishlist Page"** section. Please follow the steps and images below." 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Wishlist**. 3. Click the **Install"** button to install the **Wishlist"** and **Wishlist Page** sections. {% hint style="danger" %} Note: These section is **only compatible** with Smind's section. To ensure it works well, please use section of Smind {% endhint %}

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab. 5. Search for **Wishlist** section and click on it

6. Create a new template. 7. Enter the name of new template. For example: **Wishlist.** Click **Create Template.** {% hint style="info" %} You can name the new template anything you like, suitable for its intended use. {% endhint %}

8. From new template you've just created, click **Add Section.** 9. Search for **Wishlist Page** and click on it

10. Go back to your Shopify admin, click **Page.** 11. Click **Add Page.**

12. Enter the title of the page. For example: **Wishlist** page 13. Choose a template you've just created. For example: **Wishlist** template 14. Under the Visibility, select the **Visible** for the page. Click **Save**

15. Go to Shopify Editor sidebar, click on **Wishlist** section under the Global section. 16. Choose a page you've just created for the wishlist page. For example: **Wishlist** page Once the setup is complete, you will see the products you favor on the **Wishlist page**.

## How To Use ? After adding the **"Wishlist"** section to your theme, the **Wishlist** heart icon will appear on the product. When you click on the **Wishlist icon**, the product will be automatically added to your favorites list on the **Wishlist** page. {% hint style="warning" %} The 'Wishlist' is only displayed on our section. If you are not using our sections, it will not be visible. {% endhint %}

If you click the **Wishlist** icon again, two cases may occur (depending on your settings).

Case 1: The product will be removed from the **Wishlist page.**

Case 2: The other is that it will take you to the page **Wishlist page .**

When you access the **"Wishlist page"**, you can view the list of your favorite products and remove items from this page.

## Display Locations of the Wishlist The **wishlist** can be displayed on both desktop and mobile in the following locations. 1. **Header**

2. **Product card**

3. **Product detail**

4. **Quick view**

5. **Customer account**

# Compare & Compare Page ## Overview * The **"Compare"** section in our app allows customers to view multiple products simultaneously on the **"Compare Page"**, making shopping easier. ## How To Install ? {% embed url="" %} To use the **"Compare"** section, you need to install the **"Compare page"** section. Please follow the steps and images below." 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Compare.** 3. Click the **Install** button to install the **Compare** and **Compare Page** sections. {% hint style="warning" %} Note: These section is **only compatible** with Smind's section. To ensure it works well, please use section of Smind {% endhint %}

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab. 5. Search for **Compare** section and click on it

6. Create a new template. 7. Enter the name of new template. For example: **Compare.** Click **Create Template.**

8. From new template you've just created, click **Add Section.** 9. Search for **Compare Page** and click on it.

10. Go back to your Shopify admin, click **Page.** 11. Click **Add Page.**

12. Enter the title of the page. For example: **Compare** page 13. Choose a template you've just created. For example: **Compare** template 14. Under the Visibility, select the **Visible** for the page. Click **Save**

15. Go to Shopify Editor sidebar, click on **Compare** section under the Global section. 16. Choose a page you've just created for the compare page. For example: **Compare** page After a successful setup, you will see the product you want to compare on the **Compare page**.

## How To Use ? After adding the **Compare** section to your theme, the Compare icon will appear on the product. Clicking the icon will add the product to the **Compare page**. {% hint style="warning" %} The **'Compare'** is only displayed on our section. If you are not using our sections, it will not be visible. {% endhint %}

If you click the **Compare** icon again, two cases may occur (depending on your settings).

Case 1: The product will be removed from the **Compare page.**

Case 2: The other is that it will take you to the page **Compare page.**

When you access the **"Compare page"**, you can view the products on the **Compare page** and remove them from the comparison list.

## Display Locations of the Wishlist The **Compare** can be displayed on both desktop and mobile in the following locations. 1. **Header**

2. **Product card**

3. **Product detail**

4. **Quick view**

5. **Customer account**

# Quick Add ## Overview * The "**Quick add"** section in our app allows customers to add products directly to their cart from collection or category pages. * The "**Quick add"** feature enhances the shopping experience for users. ## How To Install ? {% embed url="" %} To install the **'Quick add'** section in our app. You can follow these steps and the images below: 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Quick Add.** 3. Click the **Install** button to install the **Quick Add** sections.

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab. 5. Search for **Quick Add** section and click on it.

## How To Use ? After adding the **'Quick add'** section to your theme, the button will appear on products with multiple variants on the collection page.

{% hint style="warning" %} * This section only displayed on our product card section. If you are not using our product cards, it will not be visible. * This section only displayed on product when there's more than one variant, you can see it through the variant picker of product card. {% endhint %} When user click to **"Quick add"** button, users can see these typically happens: **Product Options Display**: A popup will appear, allowing you to select product options like size, color, or quantity. 1. Select the Product Color. 2. Select the Product Size. 3. Select the Product Quantity. 4. Click **Add To Cart** button.

**Cart Update**: Once you've made your selections, the item is added to your cart without leaving the current page.

## The Display Position of The Quick Add The **Quick add** can be displayed on both desktop and mobile in the following locations. 1. **Collection Page**

2. **Wishlist Page**

3. **Compare Page**

# Quick View ## Overview The purpose of the **"Quick View"** section in our app is to enhance the shopping experience for customers by providing a streamlined way to view product details without leaving the current page. ## How To Install ? {% embed url="" %} To install **"Quick view"** section in our app. You can follow these steps and the images below: 1. From our app, click **Library**. 2. In the **Sections** tab, search for the keyword **Quick View.** 3. Click the **Install** button to install the **Quick View** sections.

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab. 5. Search for **Quick View** section and click on it.

## How To Use ? After adding the **"Quick view"** section to your theme, you will see the **Quick view** icon.

{% hint style="warning" %} The **'Quick view'** is only displayed on our product card section. If you are not using our product cards, it will not be visible {% endhint %} Clicking the **"Quick view"** icon opens a popup displaying the product's key features (such as description, color, size, etc.) and provides easy access to add to cart, view details, or purchase the product. 1. Select the Product Color. 2. Select the Product Size. 3. Select the Product Quantity.

## Display Locations of The Quick view The **Quick view** can be displayed on both desktop and mobile in the following locations. 1. **Collection Page**

2. **Wishlist Page**

3. **Product Card**

# Cart Drawer A cart drawer is a feature that displays a summary of a customer's cart contents without redirecting them to a separate cart page ## Overview In a **Shopify store**, the **cart drawer** (also called **mini cart**, **slide-out cart**, or **side cart**) is a user interface element that allows customers to view and manage the items in their shopping cart **without leaving the current page**. Here we have a total of 13 blocks of Cart Drawer: | [Announcement](/guides/cart-drawer/announcement) | [Icon With Text](/guides/cart-drawer/icon-with-text) | | ---------------------------------------------------------------------------- | ------------------------------------------------------------------ | | [Countdown Timer](/guides/cart-drawer/countdown-timer) | [Complementary Product](/guides/cart-drawer/complementary-product) | | [Free Shipping Progress Bar](/guides/cart-drawer/free-shipping-progress-bar) | [Estimate Shipping](/guides/cart-drawer/estimate-shipping) | | [Promotional Banner](/guides/cart-drawer/promotional-banner) | [Cart Notes](/guides/cart-drawer/cart-notes) | | [Image With Text Card](/guides/cart-drawer/image-with-text-card) | [Gift Wrapping](/guides/cart-drawer/gift-wrapping) | | [Optional Services](/guides/cart-drawer/optional-services) | [Discount Code](/guides/cart-drawer/discount-code) | | [Payment Icons](/guides/cart-drawer/payment-icons) | | {% hint style="warning" %} To ensure the cart drawer opens and functions correctly, you must use Smind’s sections (not a custom or theme-default button), because it relies on Smind’s built-in Add to Cart buttons and header. **Required sections** * **Header** – Free/Pro **Use one of these sections** * **Collection Page** – Pro * **Featured Product** – Pro * **Featured Collection** – Free/Pro * **Product Bundle** – Pro * **Product Detail** – Free / Basic / Pro * **Shop the Look** – Pro {% endhint %} ## How To Install? {% embed url="" %} To install the **Cart Drawer** in our app. You can follow these steps and the images below: 1. From our app, click **Library**. 2. In the **Section** tab, select the category of **Cart Drawer** section 3. Select the Cart Drawer section, click Install and Customize

4. In the theme editor sidebar, click **Add Section** on the **Global** section. {% hint style="warning" %} If you don’t place this section inside the **Global Section**, the cart drawer **will not show up or work correctly.** {% endhint %} 5. Search **Cart Drawer** section and click to import it.

6. To customize the Cart Drawer section, click to the Cart Drawer * **Show count items:** The header so it either shows or hides the total item count in the drawer title. * **Show vendor**: Display the product vendor/brand name inside the cart drawer. * **Show shipping/tax notice**: Show a notice about shipping fees or tax information. Configure your shipping policy in **Settings → Policy → Shipping Policy** * **Enable cart sharing**: Adds a “Share your cart” panel (with a copyable link) so the customer can send their current cart to others. * **Show terms of service checkbox:** Show a notice about terms of services. Configure your shipping policy in **Settings → Policy → Terms of Service** * **Show view cart button**: Display a "View Cart" button that links to the full cart page. * **Collection**: Choose a collection to display when the cart is empty.

## Frequently Asked Questions (FAQs) ## Q: Why can’t I find the Cart Drawer in my Shopify store after installing it? To make sure your **Card Drawer** section appears correctly, check these two things: 1. **Activate SMI Theme Helper** Go to your Shopify **Theme Settings** → **App embeds** and make sure **SMI Theme Helper** is turned ON. This helper enables the app blocks to work properly inside your theme.

2. **Add the Cart Drawer to Your Current Theme** After installing a Cart Drawer from the Smind Library, you still need to add it manually to your **current theme’s template.** * From **Settings** in Smind Sections app, scroll down to choose a theme to work on, you need to make sure that this theme is your current theme.

* Open Shopify → **Online Store → Themes → Customize.**

# Announcement Displays a brief message to highlight promotions or important updates related to in-store purchases.

## **Key Features** * Custom Text: Write any message, embed small icons or links to policies/FAQs. * Styling Controls: Set background and text color. * Responsive Design: Automatically adapts to mobile and desktop drawer widths. ## Benefits * Build Trust: Display quick trust signals in the announcement, placed right when customers are about to pay, to help ease anxiety about payment or security. * Highlight Cross-Sells: You can reminds the customer to add a gift-wrapping service before they check out. “Don’t forget gift-wrap!” ## How To Use? 1. Click **Add Block** 2. Choose **Announcement**

3. Customize the **Announcement**

* **Content**: The rich-text field where you type or paste your announcement message. * **Content Alignment:** where you choose **left**, **center** or **right** alignment for your text inside the bar. * **Colors:** Change the color of background and text # Countdown Timer Display a countdown timer to create urgency and encourage faster checkout. In short, it shows customers exactly how much time remains on a promotion, a flash-sale, or a limited-stock offer.

## **Key Features** * Configurable End Time: Set a fixed date/time or tie it to when the customer added their first item. * Display after countdown ends: Action to hide or unhide the countdown timer when it reaches the end. ## Benefits * Creates Urgency: The customers feel compelled to act now rather than “think about it later,” driving faster checkouts. * Highlights Limited-Time Offers: Reinforces that your deal truly is time-bound—building trust that you’re not hiding small print. ## How To Use? 1. Click **Add Block** 2. Choose **Countdown Timer**

3. Customize the **Countdown** **Timer** block

* **Countdown message**: where you insert or paste your message. Use the `[timer]` placeholder wherever you want the ticking clock to appear. * **Countdown expired message:** The text to be replaced when your live timer text reaches to the end. * **Content alignment:** where you choose **left**, **center** or **right** alignment for your text inside the bar. * **Timer duration:** set how long the clock runs after someone opens the drawer. * **Action after countdown ends:** Choose whether, on reload, to keep showing the expired message, hide the entire block, or restart the timer. * **Colors**: Change the color of background and text # Free Shipping Progress Bar Inform customers how close they are to qualifying for free shipping. Display a progress bar in the cart drawer that updates as they add items, based on the minimum-spend threshold you set. {% embed url="" %} ## Key Features * Configurable free-shipping threshold value * Dynamic progress message (e.g. “$35 away from free shipping!”)\\ ## Benefits * Motivates shoppers to increase order value to qualify * Improves average order size and cart totals ## How To Use? 1. Click **Add Block** 2. Choose **Free Shipping**

3. Customize the **Free Shipping** block

The first thing you have to do is setting up the Shipping Zone in the Shopify Theme Editor Go to your **Shopify Admin > Settings > Shipping & Delivery** page—so you can be sure the rates you’ve set up are live. [Click here to learn more about it](https://help.shopify.com/en/manual/fulfillment/setup/shipping-rates/flat-shipping-rates) * **Minimum spend for free shipping:** Enter a amount of money that customer must reach in their cart to get free shipping. * **Message – Not Qualified**: Shown when the cart total is below your threshold. Use `{price}` to insert the difference. * **Message – Qualified:** Shows once the customer’s cart total meets or exceeds your threshold. # Promotional Banner Display a banner to highlight your current deals, discounts or calls-to-action right when customers are reviewing their cart.

## **Key Features** * Upload Banner and Heading: allow to upload the image and insert the heading. * Custom CTA: allow to customize the buttons that hooks to any URL. * Styling Controls: Background & text colors, font size, padding and alignment to match your brand. ## Benefits * Increase Conversion Rates: Remind the customer of time-sensitive offers right before checkout. * Reinforce Branding & Campaigns: Show your brand and current deals clearly right in the cart, without interrupting the shopping experience. ## How To Use? 1. Click **Add Block** 2. Choose **Promotional Banner**

3. Customize the **Promotional Banner** block

* **Image**: Upload or select the background image for your banner. * **Overlay**: Choose a color or gradient layer on top of your image to improve text contrast. * **Banner Size**: Set how tall the banner is on desktop and mobile. * **Heading**: Insert your main headline and change the heading size. * **Description:** Optional sub-text under the headline. * **Content Position**: Choose where your heading/description sit over the image: top-left, middle-center, bottom-right. * **Content Padding**: Add whitespace around your text. * **Button**: Add a button label, button link and button style. * **Color:** Set a color for text, background and button style. # Image With Text Card Uses a striking visual to draw attention and encourage customers to explore complementary product, promotion, or branded message without sending the shopper away.

## **Key Features** * Upload Image or Video: You can add any image or insert Youtube videos to draw the eye—product shot, lifestyle photo, or graphic. * Call-to-Action Button: Add a button that links directly to a product, collection, or landing page. * Headline & Description: Allow to add the heading and description for a product or collection. ## Benefits * Visual Upsell: The customer are more likely to click an eye-catching image with the headline more than simple text link. * Increased AOV: Increases what each customer spends by featuring matching items or bundles * Seamless Branding: Shows your brand’s look and message right before purchase, reminding customers of your quality or any seasonal deals. ## How To Use? 1. Click **Add Block** 2. Choose **Image with Text Card**

3. Customize the **Image with Text Card** block

* **Use content container style from theme settings:** Toggles between your theme’s default content width/padding or the card’s own custom padding. * **Media Type**: Pick a static image background or a video background for the card. * **Image & Video Sources**: Upload image or videos to the cart drawer * **Heading**: Your main title with rich-text formatting. * **Heading size**: Choose XS, S, M or L to scale the font. * **Description**: A smaller subtitle under your heading. * **Heading alignment**: Left-, center- or right-justify your heading & description within the card. * **Button**: Insert a button label, button link and button style. # Optional Services Gives customers the option to include value-added services (like shipping protection or extended warranties..) during checkout

## **Key Features** * Configurable Service List: Add as many services as you need—each with its own icon, title, description and price. * Checkbox UI: Styled checkboxes that clearly show each add-on and its price. ## Benefits * Boost Average Order Value: The customer who are ready to buy will often add a small extra—like protection or convenience that will raise the total they spend. * Drive Repeat Purchases: Offering add-ons such as extended warranties or protection plans keeps customers coming back and lowers the chance they cancel. ## How To Use? 1. Click **Add Block** 2. Choose **Optional Services**

3. Customize the **Optional Services** block

* **Automatically added by default:** When On, this services is added to every cart automatically, without the shopper having to toggle it on. When Off, the service appears as a checkbox the customer can opt into. * **Products**: Pick which service items appear in the drawer. To use this, first add each service as its own Shopify product—make sure it has no variants and you’ve turned off inventory tracking. Please follow the step #4 to add the services to your store * **Show image:** When On, displays the product’s icon next to the service name in the drawer. When Off, hides the image, showing only the service title, description and price. 4. To add the services as a Shopify Product, following the step:

In the Admin Dashboard, click Product > Add Product to create a new product * **Title, Description & Media**: Enter your title and description for the service. Upload an icon or image that will show next to the service in your cart drawer. * **Pricing**: Enter the fee you’ll charge. * **Track Quantity**: Uncheck this box so Shopify doesn’t count down inventory. * **Variants**: Don’t add any options (size, color, etc.). Keep this product variant-free # Icon With Text Delivers clear, bite-sized messages with icons to help customers grasp key info at glance.

## **Key Features** * Icon selector: Choose icons from the library or upload your icons to visually represent your message. * Layout & alignment controls: Place icon left or top of text. Choose alignment position of text within the drawer. * Rich-text formatting: Add the description for the icon or add links to policies or FAQ. ## Benefits * Builds Confidence: Trust signals combined with brief explanations reduce lower cart abandonment. * Improves Scannability: Small icon with text break up blocks of product listings and keep your messaging digestible. ## How To Use? 1. Click **Add Block** 2. Choose **Icon With Text**

3. Customize the **Icon with Text** block

* **Layout Style**: Change the layout position to horizontal or vertical layout. * **Icon Position**: Change the icon position to top or left for the content * **Content Alignment**: Controls how the heading and description are justified inside their container. * **Heading**: Enter your messages in the headline. * **Heading Size**: Pre-set font scales to make your heading larger or smaller. * **Content:** The description for the content is under the heading. * **Icon**: Pick from your theme icon library. * **Upload Icon**: Upload a custom icon. * **Icon Size**: Adjust the icon size. * **Icon Background:** Choose a background color behind your icon or leave a transparent # Complementary Product Automatically suggest one or more complementary products in the cart drawer based on the customer’s current cart contents. {% embed url="" %} ## Key Features * Configurable a recommendation title * Manually pick the product when this item has no complementary product ## Benefits * Drives upsells and cross-sells at a key purchase moment * Increases average order value by showcasing relevant items ## How To Use? 1. Click **Add Block** 2. Choose **Complementary Product**

3. Customize the **Complementary Product**

The first thing you have to do is to select complementary products and add it in the Search & Discovery app. [Click here to learn more about it](https://docs.smind.io/sections/product-detail#how-to-use-complementary-products-and-product-bundles) * **Heading**: The label shown above your recommendations (e.g. “You May Also Like”). * **Heading size**: Choose XS, S, M or L to control how big that heading appears. * **Products**: Manually pick one or more items to display if there aren’t any automated recommendations configured via the Search & Discovery app. # Estimate Shipping Allow customers to calculate real-time shipping fees directly in the cart drawer by entering their country and postal code. Fees are pulled from the Shipping Zones you’ve configured in Shopify Admin, so shoppers get an accurate estimate before checkout. {% embed url="" %} ## **Key Features** * Country selector + ZIP/postal code input * Instant lookup of shipping zone rates ## Benefits * Reduces surprise costs at checkout, lowering cart abandonment * Builds transparency and trust by showing real rates up front * Encourages international sales by clarifying shipping fees ## How To Use? 1. Click **Add Block** 2. Choose **Estimate Shipping**

3. After adding the block, you can see the button on the cart drawer

4. Choose the country you want to ship to, and then enter the zip code or postal code for the delivery address {% hint style="warning" %} You have to set up a shipping zone on the Shopify Admin. If you don't set it up correctly, the estimate shipping rate won't show up on the cart drawer. [Click here to learn it more](https://help.shopify.com/en/manual/fulfillment/setup/shipping-rates/shipping-zones) {% endhint %}

# Cart Notes Enable a “Cart Notes” field within the drawer so customers can leave special instructions, personalization requests, or gift notes alongside their order—before proceeding to checkout. {% embed url="" %} ## Key Features * Multi-line text input in the field ## Benefits * Captures valuable order-specific information upfront * Reduces post-purchase support inquiries * Improves fulfillment accuracy for personalized orders ## How To Use? 1. Click **Add Block** 2. Choose **Cart Notes**

3. After adding the block, you can see the button on the cart drawer

# Gift Wrapping Provides gift-wrapping as a optional add-on for gifting convenience and extra revenue.

## **Key Features** * Customizable Message: A rich-text field where you explain what you charge a fee for a gift wrapping. * Seamless Integration: Lives inside the cart drawer, so customers never leave the checkout flow. ## Benefits * Higher Average Order Value: Gift wrapping is an easy add-on, and even a small $5–$10 upsell bumps your revenue per order. * Brand Differentiation: A branded package can leave a stronger impression and encourage repeat purchase. ## How To Use? 1. Click **Add Block** 2. Choose **Gift Wrapping**

3. Customize **Gift Wrapping** block.

* **Gift Wrapping Product:** Choose a product as a gift wrapping. To add a product as a gift wrapping, please follow the step below. * **Text:** Display the message when your customer see above the button to explain what you’ll do, show the price, or add any special instructions.

4. To add the gift wrapping services as a Shopify Product, following the step:

In the Admin Dashboard, click Product > Add Product to create a new product * **Title, Description & Media**: Enter your title and description for the service. Upload an icon or image that will show next to the service in your cart drawer. * **Pricing**: Enter the fee you’ll charge. * **Track Quantity**: Uncheck this box so Shopify doesn’t count down inventory. * **Variants**: Don’t add any options (size, color, etc.). Keep this product variant-free # Discount Code Enables promotion code entry in the cart for a smoother and more incentives driven checkout experiences.

## **Key Features** * Apply Discount Code Instantly: Lets customers instantly validate and apply their code, no page reload. ## Benefits * Reduces Friction: The customers don’t have to hunt for the cart or checkout page, so they can enter the codes in-drawer that keeps the flow seamless. * Improves UX on Mobile: A large, touch-friendly input in the drawer is simpler than scrolling a full cart page on small screens. ## How To Use? 1. Click **Add Block** 2. Choose **Discount Code**

3. Create a discount code on the Shopify Admin, to add the discount code go to **Discount > Create Discount**. [Click here to learn more about it](https://help.shopify.com/en/manual/discounts/discount-types/percentage-fixed-amount#create-a-fixed-value-or-percentage-discount)

# Payment Icons Show icons of accepted payment methods to increase customer confidence at checkout.

## **Key Features** * Toggle Style: A simple switch in your theme settings to turn the entire icon set on or off. * Custom Icon: Upload your own icon files for each provider. ## Benefits * Builds Trust Instantly: Seeing familiar logos (Visa, Amex, Apple Pay) reassures the customer that they can pay safely with their preferred method. * Mobile-Friendly UX: A clear, compact row of tappable icons works great on phones, so even small-screen buyers feel confident completing their purchase. ## How To Use? 1. Click **Add Block** 2. Choose **Payment Icon.**

3. When the toggle is **off**, Shopify will automatically pull in and display every payment provider logo you’ve enabled in **Settings → Payments** (Visa, Apple Pay, Shop Pay, etc.). [Click here to learn more about it](https://help.shopify.com/en/manual/payments/manual-payments)

* When you switch it **on**, you can upload your own icon files for each provider * You also change the icon size to scale those icons up or down so they fit perfectly in your drawer.

# Recently Viewed This features displays a list of products a shopper has previously looked at during their current browsing session.

## **How It Works** The feature uses browser cookies to keep track of the products a user clicks on. When the user opens the cart drawer, this information is used to populate the "Recently Viewed" list with the product images, names, and prices. ## Key Benefits * Enhanced User Experience: It provides a convenient way for shoppers to recall and reconsider products they were interested in without having to search for them again * Increased Conversions: By keeping potential purchases top-of-mind, it encourages customers to add more items to their cart and complete their purchase, which can help reduce cart abandonment ## How To Use? 1. Click **Add Block** 2. Choose **Recently Viewed**

3. Customize the **Recently Viewed** block

* **Maximum items to show:** This slider controls the total number of products that will be displayed in the Recently viewed list #### Pop-up product setting * **Desktop media width:** Controls the size of the product image or video within the pop-up on desktop screens. * **Desktop media position:** Determines the placement of the product media (image/video) in the pop-up. * **Popup width:** Sets the total width of the pop-up window on desktop screens. * **Desktop title size:** Controls the font size of the product's title inside the pop-up. * **Show description:** This is enabled, meaning the product's description will be displayed in the pop-up. * **Limit description length:** It will truncate the product description to a predefined length, often adding a "read more" link. This keeps the pop-up clean and concise. * **Show "view details" button:** When enabled, this adds a button to the pop-up that links directly to the full product page, allowing the customer to see more details if they wish.

* **Hide sold out variants:** When enabled, any variant that is out of stock will be hidden from the selection options, preventing customers from trying to select it. * **Selector type:** This determines the style of the variant selection interface * **Color selector type:** This specifically controls how color variants are displayed. * **Hide other variants' media after selecting a variant:** When enabled, after a customer selects a specific variant, for example choosing a purple color for the product, the media gallery will update to show only the images associated with that purple variant, hiding the images for blue and black color. # Edit Cart Item This features allows customers to modify items in their cart directly without navigating to a separate cart page.

## **How It Works** Each product listing includes an "Edit" button (shown as a pencil icon in the first image) on the cart slide. Clicking the "Edit" button opens a pop-up window, the customer can change product variants, such as color and quantity. ## Key Benefits The primary goal of this feature is to streamline the shopping experience by reducing page reloads and making it easier for customers to make adjustments to their selections, which can lead to increased conversions ## How To Use? 1. Click **Add Block.** 2. Choose **Edit Cart Item.**

\ 3\. Customize the **Edit Cart Item** block

* **Desktop media width:** Controls the size of the product's image or video within the pop-up on desktop screens. * **Desktop media position:** Determines whether the product media appears on the Left or Right side of the product details * **Popup width:** This slider sets the total width of the pop-up window. * **Desktop title size:** This controls the font size of the product's title inside the pop-up. * **Hide sold out variants:** When enabled, this option would hide any variant that is currently out of stock, preventing customers from selecting it. * **Selector type:** This determines the style of the interface for choosing a variant. * **Color selector type:** This specifically controls how color variants are displayed. * **Hide other variants' media after selecting a variant:** When enabled, after a customer selects a specific variant, for example choosing a purple color for the product, the media gallery will update to show only the images associated with that purple variant, hiding the images for blue and black color. # Show Secure & Safe Checkout This feature serves as a trust signal to customers, reassuring them of the security of their transaction provided by and associated with the payment gateways provider, such as Amazon Pay, Authorize.net, Klarna, Opayo, PayPal, Skrill and Stripe.

## **How It Works** This features allow the store owner to display a "secure checkout" message, often accompanied by payment gateway logos, to build customer trust ## Key Benefits * Immediately Builds Customer Trust and Credibility: When a customer sees a recognizable logo like Shop Pay, PayPal, Norton, or McAfee, it serves as an endorsement from a reputable third party * Reduces Cart Abandonment: Placing trust signals here helps eliminate any last-minute hesitation a customer might have, making them more likely to proceed with the payment ## How To Use? 1. Click **Add Block.** 2. Choose **Secure & Safe Checkout.**

3. Customize the **Recently Viewed** block

* **Payment gateway providers:** This is a dropdown menu that allows you to select the payment methods you accept. When you select providers from this list

* **Custom image:** This option allows you to upload your own image to use as a trust badge. This provides flexibility to match your store's branding or use specific trust seals. * **Content:** This is a rich text editor that lets you write a short, reassuring message to your customers. * You can use the editor to format the text (bold or italics) to make it stand out. This text complements the visual icons and directly tells the customer that their information is safe. # Pop-up Related Products This features display a small and interactive popup that automatically appears when a customer adds an item to their cart, displaying product recommendations that are relevant to the item just added.

## **Main Features** * **Automatic Trigger:** The pop-up is automatically triggered by the "add to cart" action, making the suggestions timely and relevant. * **Targeted Recommendations:** It offers products that are related product , suggesting a complete look or set. * **Shopping Experience:** Customers can add multiple items from the pop-up with a single click, without having to navigate to different product pages. ## Key Benefits The primary purpose of this feature is to increase the **average order value (AOV)** by encouraging customers to purchase additional, complementary items. ## How To Use? 1. Click **Add Block.** 2. Choose **Popup Related Product.**

3. Customize the **Popup Related Product** block

* **Heading:** This is the rich text editor for the main title. * **Heading size:** This controls the font size of the heading. * **Description:** This is a rich text editor for a subtitle or additional information. * **Number of products per page:** This slider determines how many related products are shown at one time. * **Pagination:** This controls the style of the navigation indicators that appear if there are more recommended products than can be shown on one page. * **Color scheme:** This applies a predefined set of colors from your theme's global settings. # Types of Countdown Timer ## What are the new countdown timer types? We've introduced three new countdown timer options: 1. **Countdown to a date:** This timer counts down to a specific date and time. It's the same for all visitors and is perfect for scheduled events. 2. **Fixed minutes:** This timer starts a personalized countdown for each visitor when they land on your site or perform a specific action. 3. **Daily recurring timer:** This timer automatically resets after each cycle (e.g., daily or weekly), encouraging customers to return regularly. To customize the countdown timer blocks, you have to install and add the countdown timer sections first

## 1. Countdown To A Date * **Start date**: This optional field determines when the countdown timer becomes visible. If a start date is set, the timer will only appear on your site once that date and time have been reached. The format is YYYY-MM-DD HH:MM. (For example: 2025-09-26 12:00) * **End date**: This required field sets the target date and time for the countdown. The timer will count down the remaining time until this point. The format is YYYY-MM-DD HH:MM. (For example: 2025-09-27 12:00) * **Time zone**: This setting ensures the countdown is accurate for your target audience by allowing you to select the appropriate time zone for the start and end dates.

* **Number size:** You can adjust the size of the numbers in the countdown timer. The available options are Extra Small (XS), Small (S), Medium (M), and Large (L). * **Countdown style:** This option allows you to choose the visual design of the countdown timer. * **Hide countdown when time expires:** This is a toggle switch. When enabled, the countdown timer will be hidden from view after it has finished counting down. If disabled, the timer will remain visible, likely at zero.

## 2. Fixed Minutes * **Minutes:** This field determines the duration of the countdown. * **Action after countdown ends (on reload):** This crucial setting controls what happens if a visitor reloads the page after their timer has expired. You can choose from three behaviors: * **Repeat the countdown:** The timer will restart from the beginning for the visitor. This is useful if you want to give every session a fresh sense of urgency. * **Hide countdown and message:** Both the timer and the expired message will disappear completely. * **Show expired message:** The timer will not reappear, but the message you've written for when the time runs out will be permanently displayed to that visitor. * **Paragraph:** This is a rich text editor where you can craft the message that will be displayed once the countdown reaches zero.

* **Message size:** This option controls the font size of the expired message. * **Message color:** This allows you to set the color of the expired message text to match your site's branding. * **Number size:** Similar to the message size, this lets you adjust the size of the numbers in the countdown timer itself, with options ranging from XS to L. * **Countdown style:** This dropdown allows you to select the visual design of the timer.

## 3. Daily Recurring Timer * **Weekday:** This field lets you specify which days of the week the timer should be active. You can enter one or more days, separated by commas (e.g., "SAT,SUN" for a weekend sale, or "MON,TUE,WED,THU,FRI" for weekdays). * **Start date:** This optional field determines the first date the entire recurring schedule will begin. * **End date:** This optional field sets the last possible date for the recurring timer. After this date, the timer will no longer appear, even on the specified weekdays. * **Start time:** This required field sets the time of day when the countdown will begin on the active days. The format is HH:MM. * **End time:** This required field sets the time of day when the countdown for that cycle will end. The format is HH:MM.

* **Action after countdown ends (on reload):** This controls what a visitor sees if they reload the page after the daily countdown has finished but before the next one starts. * **Paragraph:** This is a rich text editor where you can write the message that appears after the countdown for a cycle has ended * **Message size:** This controls the font size of the expired message, with options from Extra Small (XS) to Large (L). * **Message color:** This allows you to set the color of the expired message text. * **Time zone:** This is a crucial setting to ensure the timer starts and ends accurately according to your target audience's location * **Number size:** This adjusts the size of the numbers within the countdown timer itself. * **Countdown style:** This dropdown lets you choose the visual design of the timer

# Color block and color scheme Learn about color block, color scheme, and how to use them. * The color block is used in sections to customize the color for only that section. * The [color scheme](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme) is a set of colors. It is created to consistently apply colors throughout different sections of the Smind, allowing for quick customization of your storefront's color. ## Overview Below are all the colors in a color scheme that will be used for all sections of Smind.

Color name	Scope of influence
Background	Color is applied to the background of the sections.
Background gradient	A gradient of colors is applied to the background of some sections. Background gradients replace the background where possible.
Text	Color is applied to the block text and border.
Subtext	Color is applied to the subheading of sections.
Solid button background	Color is applied to the primary button background.
Solid button label	Color is applied to the primary button text.
Outline button	Color is applied to the secondary button text and border.
Shadow	Color is applied to the shadows.

#### For example:

## Color Block For Smind Section {% embed url="" %} To add **Color** block to the section (skip this step if "Color block" is already in the section), click **Add Block**

{% hint style="danger" %} When you use the color block, it only affects the section that contains it, and the color scheme will not work in that section. {% endhint %} {% hint style="danger" %} If you change the background color in the color block, but the background of the section doesn't change, it might be because the **background block** is active. To apply the background color, you need to either hide or delete the background block. {% endhint %} ## Color Scheme For Smind Section To understand how to use the color scheme, read [this article](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme). To change the color scheme, click on the **Global** section **> Smind Styles > Color ,** and then customize the color schemes

{% hint style="danger" %} If you change the color scheme, but the color of the section doesn't change, it might be because the **color block** is active. To apply the color scheme, you need to either hide or delete the color block. {% endhint %} {% hint style="danger" %} If you change the color scheme, but the background of the section doesn't change, it might be because the **background block** is active. To apply the background color, you need to either hide or delete the background block. {% endhint %} This section is a global style manager where each item here lets you define the look & feel for your store. Here’s what each one controls:

| Control | What It Does | | ----------------------- | --------------------------------------------------------------------------------- | | Background | The default page-section or block background color. | | Background gradient | An optional two-tone gradient that replaces the plain Background where supported. | | Text | The primary text color used for headings | | Subtext | The secondary text color used for captions and description | | Solid button background | The fill color for the primary buttons across all blocks. | | Solid button label | The text color of button label | | Outline button | The border color for outline style buttons. | | Shadow | The color of shadow applied to the blocks | ## Configure border and shadow colors in sections with two color schemes For sections with two color schemes, the "Section color scheme" will be applied to both the border and shadow colors of the cards. #### For example:

## Color Scheme For Smind Theme If you are using Smind theme, you can change via Theme Setting {% embed url="" %} # Configuring Typography # Enabling account To show an account in the header, follow these steps: 1. From your Shopify admin, go to **Settings** 2. Click **Customer accounts.** 3. Enable the option **Show Login Links.** 4. Click **Save.**

# Getting Google Maps iframe To get Google Maps iframe, follow these steps: 1. Go to [**Google Maps**](https://www.google.com/maps)**,** choose a location. 2. Click **Share**, select tab "**Embed a map**", and then click "**COPY HTML**".

# Getting TikTok video URL To get TikTok video URL, follow these steps: 1. Open the video **webpage** on [tiktok.com](https://www.tiktok.com/) 2. Choose the video, then click "**Copy link**".

# Configuring color swatches ## Configuring the variant name The "**Variant name**" is the field that determines the name applied to display the color swatch. ## How to customize color swatches for a product? {% embed url="" %} 1. From your Shopify admin, go to **Products**, and then find a product you want to edit. 2. In the **Variants** section, look at and remember what color variant you want to edit. For example, you want to customize the **Black** color for the product.

3. From our app, click **Settings.** 4. In the **Color Swatch** section, enter the **Variant Name** and paste the HEX Color Code in the **Color Configuration.** You can find a hex color in the link. [Click here](https://htmlcolors.com/google-color-picker) 5. Click **Save.** **Follow the format: \:\** **For example: Black: #780a02**

## How to use an image file to replace the color {% embed url="" %} 1. From your Shopify admin, go to "**Content**" and click **Files** where you can manage all files uploaded to your store 2. Click on the image, then copy the **URL handle**, and note the **image type** (.JPG or .PNG). For example, we want to use this image to replace the black color. The image URL is *image\_1,* and the image type is *JPG.*

3. From our app, click **Settings.** 4. Enter the variant name and paste the URL handle into the **Color Configuration** field **Follow the format**: **\:\.\**. **For example: Black: image\_1.jpg** {% hint style="danger" %} The image type only supports JPG and PNG. {% endhint %}

## How to customize the color and image swatches (if you are using Smind theme)? 1. In the Shopify editor sidebar, click **Theme Settings** gear icon. 2. From the **Variant Pills** section, enter the hex color code or paste the image URL to replace the color swatches.

# Configuring sale badge To configure "sale percent" or "sale amount", follow these steps: {% embed url="" %} 1. From your Shopify admin, go to **Online Store > Theme.** 2. Click the theme you want to edit and select **Edit default theme content.**

3. In the **Smind** tab and then scroll to "**Product**". 4. From the **Sale** field, enter your key, following format **{{sale\_percent}}** or **{{sale\_amount}}.** 5. Click **Save.** **For example:** {{sale\_percent}} OFF ![](/files/Gc3EyRkkZgDLPZXdipdU)\ -{{sale\_percent}} ![](/files/FGjTU0wE14IhQTWbPpao) SAVE {{sale\_amount}} ![](/files/VVwWv6oD1UobV4BRgWev)\ SALE ![](/files/5XaM03COiaWFzQY9OAti)

# Configuring size chart {% hint style="warning" %} If your store only has a size chart, we recommend using the "**Pop-up**" block to set it up. To display size chart for your product page properly, you have to use the section - [**Product Detail 1 (PRO)**](https://library.smind.io/search/?filter.p.vendor=Sections\&type=product\&q=Product+Detail+1\&sort_by=price-descending) to make sure it works perfectly. {% endhint %} {% embed url="" %} To set up different size charts for your products, follow these steps: 1. From your Shopify admin, go to **Online Store.** 2. Click **Add Page.**

3. Enter the title of the pages. For example: *Dress Size Chart* 4. Enter the content for the page, you can upload your own size chart image or table (like JPG or PNG file). Click **Save**

5. Click **Products** 6. Click the product you want to add a size chart.

7. In the **Product Metafields,** click the **Smind Size Chart.** 8. Click **Select Page**, and choose the size chart page. For example: Dress Size Chart. Click **Save**

# Showing social media icons ## For stores using a different theme (not Smind theme) To add social media icons, follow these steps: 1. Open the Smind application and go to "**Settings**". 2. In the "**Global settings**" section, scroll down to "**Social media**". 3. Enter your social media links and click "**Save**".

## For stores using a Smind theme To add social media icons, follow these steps: 1. Go to **Theme Settings** on the Shopify Editor 2. Scroll down to find **Social Media**, and insert your social media link right here. Click Save

# Deleting data Before uninstalling the Smind app, we highly recommend that you click on “Delete data” and then remove the app from your Shopify admin. Please follow these steps: 1. Open the Smind app and go to "Setting" 2. Click "Delete data"

# Moving Sections When you change your Shopify theme, you might notice that your sections are no longer appear in the Library . Don’t worry — your data isn’t lost. Our app is designed to work with **one active theme at a time**, and we provide tools to move your section between themes if needed. You've just installed your Sections, Templates, Themes, Styles or Product Blocks, but you can’t find them in My Library. Why? Because it only works with **one active theme at a time**. To change the theme to work with: 1. Go to **Apps > Smind Sections > Settings** 2. Under **Theme Switching**, select the theme you want to work with, click **Save**

Once the correct theme is active, all your sections will appear in **Smind Sections > My Library > On working theme**

## How to move a section from one theme to another? There are **two ways** to move sections between themes, depending on what you need to transfer: ### Option 1: Use Transfer Data (Full content + settings) This option copies your entire setup — all installed sections along with their content and settings. **Use this if:** * You want to **preserve all content** * You are switching between **themes of the same type** **Example:**\ If you duplicate your Dawn theme for testing and rename it as **“Dawn for Testing”**, then later want to transfer data from **“Dawn for Testing”** back to your main **“Dawn”** theme — this works perfectly because both are based on the **Dawn** theme (Shopify’s default free theme). **Steps:** 1. Go to **Apps > Smind Sections > Settings > Transfer Data** 2. Select the **old theme** and the **new theme** and click **Transfer Data** {% hint style="warning" %} You can only transfer data between themes of the **same type**. Transferring from Dawn to Sense, for example, is not supported. {% endhint %} {% hint style="warning" %} Only sections that were actually **imported and edited (used in your store)** will be transferred. If a section was installed but never added or customized, it **won’t be included** in the transfer. {% endhint %}

### Option 2: Install sections manually from My Library This lets you move **individual sections** without transferring their content or settings. **Use this if:** * You only need the layout or design structure * You're switching between **different theme types**, or just want to reuse certain sections **Steps:** 1. Go to **Apps > Smind Sections > My Library** 2. Scroll down to **On other themes** 3. Click **Install** next to the section you want to add to the current theme

# Why does the section appear on all pages? Your section appears on all pages because you added it to the header group. To set it up only shown on a single page please follow these steps: 1. Remove section from the header group. 2. Add section to the template group.

# Why are section layouts broken? The broken layout of sections may be because you deleted the "Smind style" section from the Global group. To fix this, please try adding the "Smind style" section back to the Global group. Please follow these steps: 1. In Global group, click "**Add section**". 2. Add "**✧Smind style**" section.

# Why do spaces appear when hiding the theme's header? The space appears after hiding the theme's default header and adding the "Header" section of Smind. This is a problem with the theme. To fix it, please follow these steps: 1. From theme editor, go to "**Theme settings**" 2. In the "Cart type" field select "**Page**"

# How to change default text in sections? ## For stores using a different theme (not Smind theme) To change the default text in sections, follow these steps: 1. From your Shopify admin, go to "Online Store" and then choose "**Themes**". 2. Choose the theme that Smind is working on, click "More actions", then choose "**Edit default theme content**". 3. Click the "**Smind**" tab, then find and replace the text you want to change.

# How to update sections? To update sections, please follow these steps: 1. Open the Smind application and navigate to "**My Library**". 2. In the "Sections" tab, select the section you want to update, then click on "More actions" and choose "**Update**".

# How to set the default template for product pages? To set the default template for product pages, please follow these steps. 1. Open the Smind application and navigate to "**My Library**". 2. In the "Pages & templates" tab, choose "Product" tab, then click on "More actions" and select "**Set as default**".

# Why are the sections I installed not showing up in the theme editor? In the theme editor, some sections can only be added to certain types of pages. Therefore, when you "Add section" on other pages, you will not find them. For example, the "Related Product" section only appears on the product page, so you won't find it on the home page. # Integrate review scores from other apps. In this guide, we will demonstrate how to integrate the review score from an external application into the product card, positioning it below the product title. ### 1. Edit Product Card #### 1.1. Inspect the Product Title Element To accurately place the review score, it is necessary to identify the class associated with the product title. Follow these steps: * Open your collection page, such as * Highlight the product title then right-click and select Inspect (or press `F12` to use the browser's developer tools). * In the Elements tab of the developer tools, locate the class assigned to the product title.

For example, in Smind’s collection page, the product title is assigned this class. By identifying the correct class, you ensure that the review score is displayed consistently within the product card layout ``` smi-product-title ``` #### 1.2. Edit Product Code To Insert Integration Code To integrate the review score correctly, follow these steps: **Step 1: Access the Theme Code Editor** * Navigate to **Shopify Admin > Sales Channels > Online Store**. * Select your **current theme**, then click **Customize**. * Click on the **three-dot icon** in the top-left corner and choose **Edit code**.

**Step 2: Locate the Product Card File** Since you are editing the **Smind product card**, locate the relevant file `smi-product-card.liquid`. **Step 3: Insert the Integration Code** * In the code editor, press `Ctrl + F` to search for the line containing `smi-product-title` * Insert the integration code **at the end of those lines** to ensure the review score appears directly below the product title. By following these steps, you will successfully integrate the review score into the product card layout.

### 2. Insert Code From Review App #### 2.1. Judge.Me Review Navigate to Shopify Admin > Apps > Judge.me Reviews > Widgets > Star Rating Badge > Customize then copy the widget code ``` ``` {% hint style="info" %} To test, you should choose Display properties > Always show the widget. Therefore, product has no reviews will still show this review widget {% endhint %} Paste the code to the place which have been determine in 1.2

The result will be look like this

# Why Style does not change my website A \[Style] will only apply changes to Smind sections. It will not affect sections that belong to other apps or your total theme To change style of Smind section, In the theme editor sidebar, delete the default style in the **Global** section.

2. Click **Add Section** to add the new style you want.

# Product detail event Variant has changed * Selecting variant from variant picker of Smind This event is fired whenever a user has changed the variant in a product selector, either in a product page, featured product section or quick view and quick add section

Event	Detail
`variant:change`	`detail: {variant}`

\ variant: Is an object variant of Shopify () The "change variant" event will be listened to by other components to update related elements such as product price, inventory status, SKU, add to cart button, and checkout. Example usage: ``` document.addEventListener('variant:change', ({ detail: event }) => { try{ const variant = event.variant; const variantId = event.variant?.id; console.log(variant); console.log(variantId); } catch (error) { console.log('error: ', error) } }); ``` * Changing the product variant without using Smind’s variant picker. If you're replacing the variant selection using Smind’s variant picker with a third-party solution, please make sure to dispatch an event after selecting a variant so that other components can listen for the variant change. The variant change event must be named **"variant:change"** and must include a **variant object** with the same structure as Shopify's default variant object. () Example usage: ``` container.dispatchEvent(new CustomEvent("variant:change", { detail: { variant }, bubbles: true })); ```


`container`	The section container that includes the variant picker
`variant`	Object variant that selected

# Product form event Product form Add To Cart before submit. * To append custom data to the form data of Smind sections before submission, you can listen to the **"smind:product-form:before-submit"** event. ``` document.addEventListener('smind:product-form:before-submit', (event) => { try { const formData = event.detail.formData; if (this.sectionId === formData.get('section-id')) { formData.append('custom_key', custom_value); } } catch (error){ console.log('error: ', error) } }); ``` ``` custom_value: This is the element you want to add to the Smind add-to-cart form. ``` * After completing the "Add to Cart" action with a product using Smind's section, if you want to perform additional actions after the submission is completed, you can listen to the **"smind:product-form:submit-complete"** event. ``` document.addEventListener('smind:product-form:submit-complete', (event) => { try { // Handle the action you want to perform after adding to cart here. } catch (error) { console.log('error: ', error } }) ``` # Cart Drawer event If you're using Smind's cart drawer section but not the sections that provide Smind's form data. In this case, after successfully adding a product to the cart, you'll need to manually trigger the following action to display the Smind's Cart Drawer on the screen: ``` const drawer = new SMI_CartDrawer(); drawer.render(); drawer.onToggle(); ```