A Guide to Styling Embedded Modules in Your Website

A Guide to Styling Embedded Modules in Your Website

Your website’s visual appeal is crucial for capturing attention and keeping visitors engaged. With Roccai’s swipe module, you not only have a powerful decision-making tool at your disposal but also the ability to customize its visual layout to perfectly align with your brand’s unique style.

Let’s dive into the different styling options available and how you can create the perfect look for your site.

Explore a Variety of Customizable Styles

  • Create a section with two columns.
  • Set the background color to a gradient from (#336370) to (#7ab2c2) or your preferred colors.
    • Right column: Add text and a button.
    • Left column: Embed the module (see guide).
  • Round the corners of the container by 10px.
  • Create a section with two columns.
  • Set a background image for each column.
    • Left column: Add text and a button.
    • Right column: Embed the module (see guide).
  • Round the corners of the container by 10px.
  • Open the settings for the right column. Under Spacing, set the padding to 110px for both the top and bottom.
  • Create a section with 3 columns.
  • Change the section background to a gradient from white (#ffffff) to dark blue (#072130).
  • First column: Embed the module (see guide) and round the container corners to 30px.
  • Second column: Set a background color and round the corners with a 30px border. Add an image (drop), title, and text.
  • Third column: Set a background color, round the corners with a 30px border, and add a title, text, and button.
  • Create a section with two columns.
  • Yellow Circle:
    • Click the grey + in the right column and add a Divider.
    • Set the background color to #f6c85d.
    • In Design > Sizing, set the width and height to 380px.
    • Set the Border to 400px to create a rounded circle.
  • Field with dots:
    • Add a transparent image with dots.
    • Set Alignment to the left and Width to 34% in Sizing.
    • In Spacing, set the right margin to 20%.
  • Circle Made of Dots:
    • Click the grey + in the right column and add a Divider.
    • In Sizing, set the width and height to 220px.
    • Set the Border to 400px to round the corners.
    • Adjust the border width to 6px, choose a color, and set the border style to Dotted.
  • Left column: Add text and a button.
  • Right column: Embed the module (see guide).
  • Round the container corners by 10px.

Whether your brand leans toward minimalism, bold designs, or custom flair, Roccai has a swipe module template to suit your needs.

How to Get Product Feeds from Shopify: A Step-by-Step Guide

How to Get Product Feeds from Shopify: A Step-by-Step Guide

As we illustrated in our Product Feed Generation Guide for WooCommerce, the easiest way to generate a product feed is, of course, with a plugin, and Shopify is no different! In this step-by-step guide, you will learn how to get product feeds from Shopify using the FeedFusion plugin.

1. Introduction: How to Get Product Feeds from Shopify

What are Product Feeds?

Product feeds are files that contain detailed information about your products, such as titles, descriptions, prices, and images. You can use these feeds to upload product information to the Roccai platform to generate your User Journey. The feed should be an URL and in XML or JSON format.

Why Use FeedFusion?

This guide will focus on the FeedFusion plugin for Shopify, a powerful tool that simplifies the process of generating product feeds. It offers advanced filtering options, making it easy to create tailored feeds that meet specific needs and ensuring that your product information is accurate and up-to-date across all platforms.

2. Setting Up FeedFusion on Shopify

Installing the FeedFusion Plugin
  • Go to the Shopify App Store: Open your Shopify admin panel and navigate to the App Store.
  • Search for FeedFusion: Type “FeedFusion” into the search bar.
  • Install the Plugin: Click on the FeedFusion app and click the “Add app” button. Follow the on-screen instructions to install the plugin.
  • Authorize the App: Once installed, authorize FeedFusion to access your Shopify store data.
Initial Configuration
  • Open FeedFusion: Open the FeedFusion app from your Shopify admin panel after installation.
  • Set Up Your Account: Follow the prompts to set up an account. This will include entering your business details and preferences.
  • Configure Basic Settings: Adjust the basic settings such as default currency, language, and target markets.

3. How to Get Product Feeds with FeedFusion

Accessing FeedFusion
  • Navigate to FeedFusion: In your Shopify admin panel, go to Apps and click on FeedFusion.
  • Dashboard Overview: Familiarize yourself with the FeedFusion dashboard. This is where you’ll manage all your product feeds.
Creating a New Feed
  • Start a New Feed: Click on “Create New Feed.”
  • Choose a Template: Select a template that matches your needs, or start from scratch.
  • Select Products: Choose which products you want to include in your feed. You can select all products or specific collections.
image showing how to create a new feed in feedfusion

4. Using Filtering Options in FeedFusion

Setting Up Filters
  • Access Filters: Within your new feed, navigate to the Filters section.
  • Add Filters: Click “Add Filter” and choose from the available options, such as price range, product type, or stock status.
  • Customize Filters: Adjust the filter settings to match your specific needs. For example, you can set a filter to include only products above a specific price.
image showing a filtering option in feedfusion, useful to get product feeds from Shopify
For Roccai, we need the following
  • id (required)
  • title (required)
  • subtitle
  • description (required)
  • imageUrl (required)
  • link (required)
  • tags
  • categories
  • price
  • sales price
  • status (in stock etc.)

5. Exporting and Using Your Product Feed

Exporting the Feed
  • Choose Export Format: Choose XML to ensure a seamless upload to the Roccai platform.
  • Export the Feed: Click “Export” and save the file to your computer.
Integrating with Swipe Journeys

Upload the Feed:

You can read more about this process in our guide: Getting Started.

6. Troubleshooting and FAQs

Common Issues
  • Feed Not Updating: Ensure that the FeedFusion plugin has the necessary permissions to access your Shopify store data.
  • Incorrect Product Data: Double-check the filters and settings in FeedFusion to ensure they are configured correctly.
Additional Resources to get Product Feeds from Shopify

If you have any questions or run into any issues, feel free to reach out to our support team or consult the additional resources provided.

How to Get Product Feeds from WooCommerce: A Step-by-Step Guide

How to Get Product Feeds from WooCommerce: A Step-by-Step Guide

Follow these easy steps to generate product feeds using the CTX Feed plugin. This method ensures that your product data is accurate, up-to-date, and ready to be uploaded to our platform to create your Swipe Journey.

Introduction to Product Feeds

Product feeds are files that contain a list of your products and their attributes, such as price, description, image URLs, and availability. These feeds are crucial for listing your products on various platforms like Google Shopping, Facebook Ads, and on our platform too.

Why Use CTX Feed Plugin

The CTX Feed plugin is highly recommended for its user-friendly interface and powerful features. It supports over 100 marketing channels and allows you to create feeds in multiple formats, including XML, CSV, and JSON. This flexibility ensures that your product data meets the specific requirements of different platforms, saving you time and effort​.

Step-by-Step Guide to Installing and Using CTX Feed

For simplicity, this guide is divided into two parts. The first part helps you install and activate the CTX Feed plugin. Let’s get started!

Part 1: Installing CTX Feed

1. Log in to Your WooCommerce Dashboard: Go to your WooCommerce admin panel.

2. Navigate to Plugins -> Add New: Search for “CTX Feed” in the search bar.

3. Install and Activate: Click on the “Install Now” button for the CTX Feed plugin and then activate it.

Part 2: Creating Your First Product Feed

Now, let’s move on to the second part: creating and retrieving the product feed.

1. Access CTX Feed: After activation, find the CTX Feed option in your dashboard menu.

2. Create a New Feed: Click “Make Feed” to create a new product feed.

3. Select a Template: Choose a template based on the platform you want to integrate with.

4. Configure Feed Settings:

  • File Format: Select your preferred file type.
  • Mapping Attributes: Map your WooCommerce product attributes to the required fields of the selected platform.

5. Generate the Feed: Click on the “Generate” button to create your product feed.

6. Download and Manage: Once generated, you can download the feed or copy the URL to integrate with the Roccai platform. If you choose to download the file, the format must be either XML or JSON.

All done! In order to find and manage the feed you have just created, go to the “Manage Feeds” option from the CTX Feed menu. In there, you will find the newly generated product feed for the WooCommerce store.

Customization Options

This section will guide you through various customization options available in the CTX Feed plugin, including setting up auto-updates, creating custom attributes, and utilizing advanced filtering options.

1. Setting Up Auto-Updates

Keeping your product feeds up-to-date is crucial for maintaining accurate product listings on various marketing platforms. The CTX Feed plugin allows you to automate this process, saving you time and ensuring your feeds are always current.

  1. Navigate to Manage Feeds: Go to the “Manage Feeds” section in the CTX Feed plugin.
  2. Set Update Intervals: Choose how frequently you want the feed to update (e.g., every hour, daily, etc.). This ensures your product data remains current without manual intervention.
2. Creating Custom Attributes

Custom attributes allow you to add additional information to your product feeds that may not be included by default. This can be particularly useful for meeting the specific requirements of certain marketing channels.

  1. Define Custom Attributes: Navigate to the custom attributes section in the CTX Feed plugin.
  2. Add New Attribute: Enter the name and value of the custom attribute you want to add. For example, you might want to add a “Sale Price” attribute for products on discount.
  3. Map Attributes: Ensure that the custom attributes are correctly mapped to the corresponding fields required by the marketing channel.
3. Utilizing Advanced Filters

Advanced filtering options in the CTX Feed plugin allow you to include or exclude specific products from your feeds based on various criteria. This helps in creating more targeted and relevant product feeds.

  1. Access Filter Options: When creating or editing a feed, look for the filter settings section.
  2. Apply Filters:
    • By Category: Include or exclude products from specific categories.
    • By Price Range: Set a minimum and maximum price range for products to be included in the feed.
    • By Stock Status: Include only products in stock or exclude those out of stock.
    • By Product Attributes: Filter products based on specific attributes such as color, size, or brand.
  3. Save Filter Settings: After configuring the desired filters, save the settings to apply them to your feed.

Manual Product Feed Creation (Brief Overview)

While using a plugin like CTX Feed is the easiest and fastest method, it’s worth noting that you can also create product feeds manually. This involves exporting your product data into a CSV file and formatting it according to the specifications of the platform you’re targeting. This method is more time-consuming and prone to errors, so a dedicated plugin is recommended.

FAQs

Can multilingual feeds be created? Yes, CTX Feed Pro supports multiple languages and currencies, making it ideal for international operations.

How do I ensure my product feed is up-to-date? The CTX Feed plugin offers an auto-update feature that allows you to set regular intervals for updating your product feeds. This ensures your feed data is always current.

What file formats does CTX Feed support? CTX Feed supports various file formats, including XML, CSV, TXT, TSV, JSON, and XLS. This flexibility allows you to choose the format that best suits your needs and the requirements of the marketing channels you’re using.

Additional Resources

Conclusion

Following this guide, you can efficiently create and manage product feeds using the CTX Feed plugin, ensuring your products are accurately represented.

If you need further assistance, don’t hesitate to contact our support team or consult the additional resources provided.

How to introduce the swipe journey and collect data for Lead Gen

How to introduce the swipe journey and collect data for Lead Gen

This is a guide on adding additional cards, such as start, info, and final cards, to your swipe journey. The purpose is to introduce the swipe journey but also to be able to collect user data for surveys, Lead Gen etc.

The Start Card

Step 1

You can add a start card once you have created your swipe journey (see onboarding guide). To do this, click Start Card in the menu to the left.

Step 2

You can introduce the swipe journey and describe the purpose and what happens next by adding a title, subtitle, image, and button text and press UPDATE. (Logo can be changed under Settings).

The Info Card

Step 1

You can find the Info Card under the Start Card in the menu on the left.

Step 2

You can find the Info Card under the Start Card in the menu on the left. Use this card to collect information on the user before swiping. This could be name, age, preferences, etc.

Remember to add your privacy policy.

The Final Card

Step 1

The Final Card is found in the menu on the left and is similar to the Info Card.

Step 2

The Final Card is used to collect information about the customer for Lead Gen after swiping. This can be name, email, mobile number, etc. It can also be a “well done,” “thanks for your help,” or “sign up for our newsletter.” Remember to add a privacy policy.

The button can lead to products, a website, or a popup.

It is also possible to go directly to the products if the customer does not want to fill out the contact form.

Find the styling of the secondary button under Settings.

If you need our help, please contact us via the chat in the bottom right corner.

How to create and add a product feed

How to create and add a product feed

This guide is designed to help you create a product feed sourced from your website and add it to the Roccai platform.

Step 1

The first thing you need to do is create a product feed in your website’s backend. A product feed is a structured file containing detailed information about a company’s products; you might know this from Google Shopping.

The format must be either .xml or JSON. And it should be a live link.

This is an example of what one item in a Google Shopping feed could look like.

Product feed xml example

The product feed must contain the following elements

  • id (required)
  • title (required)
  • subtitle
  • description (required)
  • imageUrl (required)
  • link (required)
  • tags
  • categories
  • price
  • sales price
  • status (in stock etc.)

NB: The product feed should be a live link and updated in real-time.

Shopify

If you use Shopify you can use this plugin (up to 100 products for free):
https://apps.shopify.com/product-feeds-generator-by-amasty?locale=da

Or checkout this guide on how to get a product feed from Shopify using the FeedFusion plugin

WooCommerce

Checkout this guide on how to generate a product feed in Wocommerce.

Step 2

Sign in to app.roccai.com, and the onboarding will begin. Start by selecting a category and press NEXT.

Step 3

Now, it is time to select a name for your Swipe Journey. Then please choose a language (should be the same as in the product feed) and press CREATE MODULE.

Step 4

You then select Via Link and add your product feed. Press DETECT DATA. If you want to build the swipe journey manually, that is also possible.

Step 5

Here, you can see how we map the fields on the platform.

If you need our help, please contact us via the chat in the bottom right corner.