Platform guides

Platform integration guides

Find how to apply carousels on the shop or website platform you use

Godomall integration guide

  1. 1

    Log in to the Godomall admin

    Log in to the Godomall admin page.

  2. 2

    Open the design settings menu

    In the left menu, click [Design Settings] → [HTML Edit] → [Common File Edit].

  3. 3

    Edit the header.html file

    Select header.html and insert the generated JSON-LD code right above the </head> tag.

    <!-- existing header content --> <!-- Naver carousel structured data --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ItemList", "name": "Popular products", "itemListElement": [ // generated carousel data ] } </script> </head>
  4. 4

    Save and verify

    Save the file and use view-source on your live shop to confirm the code was inserted correctly.

Tip:

On Godomall you can also add structured data to each product page individually. Try creating a separate template for product detail pages.

Cafe24 integration guide

  1. 1

    Log in to the Cafe24 admin

    Log in to the Cafe24 admin page.

  2. 2

    Shop settings menu

    Select [Shop Settings] → [Design Settings] → [HTML Edit].

  3. 3

    Edit the layout file

    Select layout.html or index.html to edit.

    <!-- Cafe24 header area --> <head> <!-- existing meta tags --> <!-- Naver carousel JSON-LD --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ItemList", "name": "Recommended products", "itemListElement": [ // insert the generated carousel data here ] } </script> </head>
  4. 4

    Apply the changes

    Save the file and click [Apply Design] to publish the changes to your shop.

Note:

Cafe24 may restrict some HTML tags. If your code doesn't save properly, contact Cafe24 support.

WordPress integration guide

  1. 1

    Log in to the WordPress admin

    Open your WordPress dashboard.

  2. 2

    Edit the theme or use a plugin

    You can choose between two methods:

    Method 1: Edit the theme directly

    Select [Appearance] → [Theme Editor] → header.php.

    <?php wp_head(); ?> <!-- Naver carousel structured data --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ItemList", "name": "Blog posts", "itemListElement": [ // generated carousel data ] } </script> </head>

    Method 2: Use functions.php

    // Add to functions.php function add_naver_carousel_schema() { $schema = '{ "@context": "https://schema.org", "@type": "ItemList", "name": "Blog posts", "itemListElement": [ // carousel data ] }'; echo '<script type="application/ld+json">' . $schema . '</script>'; } add_action('wp_head', 'add_naver_carousel_schema');
  3. 3

    Use a plugin

    You can also manage structured data through a GUI with a plugin such as Schema & Structured Data for WP.

Shopify integration guide

  1. 1

    Log in to the Shopify admin

    Log in to the Shopify admin page.

  2. 2

    Edit the theme

    Select [Online Store] → [Themes] → [Actions] → [Edit code].

  3. 3

    Edit the theme.liquid file

    Open theme.liquid in the Layout folder and add the code above the </head> tag.

    <!-- Shopify default head tags --> {{ content_for_header }} <!-- Naver carousel structured data --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ItemList", "name": "Popular products", "itemListElement": [ {% for product in collections.featured.products limit: 10 %} { "@type": "Product", "name": "{{ product.title | escape }}", "url": "{{ shop.url }}{{ product.url }}", "image": "{{ product.featured_image | img_url: 'master' }}", "description": "{{ product.description | strip_html | truncate: 160 | escape }}", "position": {{ forloop.index }} }{% unless forloop.last %},{% endunless %} {% endfor %} ] } </script> </head>
  4. 4

    Save and verify

    Save your changes and view the source on your store to confirm they were applied correctly.

Pro tip:

With Shopify Liquid syntax you can include product data in the carousel dynamically. The example above automatically adds the products in the featured collection to the carousel.

Imweb integration guide

  1. 1

    Log in to the Imweb admin

    Log in to the Imweb admin page.

  2. 2

    Site settings menu

    Go to [Site Management] → [Site Settings] → [SEO Settings].

  3. 3

    Add head tag code

    On the SEO settings page, insert the generated JSON-LD code in the 'Head tag code' area.

    <!-- Add to the Imweb head tag code area --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ItemList", "name": "Popular content", "itemListElement": [ // generated carousel data ] } </script>
  4. 4

    Save and apply

    Save your settings and check that they're applied to your site. It may take a few minutes for changes to take effect.

Tip:

Imweb also lets you set SEO per page. To apply a carousel to a specific page only, use that page's SEO settings.

Direct HTML insertion guide

  1. 1

    Prepare the HTML file

    Open the HTML file you want to add the carousel to in a text editor.

  2. 2

    Add JSON-LD to the head section

    Insert the generated code inside the <head> tag, right above the </head> tag.

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My website</title> <!-- Naver carousel structured data --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ItemList", "name": "Recommended content", "itemListElement": [ { "@type": "Article", "name": "First post title", "url": "https://mysite.com/post1", "description": "Post summary", "image": "https://mysite.com/image1.jpg", "position": 1 }, { "@type": "Article", "name": "Second post title", "url": "https://mysite.com/post2", "description": "Post summary", "image": "https://mysite.com/image2.jpg", "position": 2 } ] } </script> </head>
  3. 3

    Optional: add HTML markup

    For search engine optimization, you can also add the actual HTML content.

    <body> <!-- Actual carousel HTML markup --> <section class="carousel-section"> <h2>Recommended content</h2> <div class="carousel-container"> <article class="carousel-item"> <img src="https://mysite.com/image1.jpg" alt="First post"> <h3><a href="https://mysite.com/post1">First post title</a></h3> <p>Post summary</p> </article> <article class="carousel-item"> <img src="https://mysite.com/image2.jpg" alt="Second post"> <h3><a href="https://mysite.com/post2">Second post title</a></h3> <p>Post summary</p> </article> </div> </section> </body>
  4. 4

    Save and upload the file

    Save the edited HTML file and upload it to your web server.

Important:

The JSON-LD data must match the actual HTML content. If search engines detect a mismatch, they may ignore the structured data.