IBase is a responsive theme designed to look sharp across all devices, whether it be smartphones, tablets or PC devices. It is also optimized for SEO and fast browsing. 
This theme is compatible with all the settings you can find on the admin page, as well as Smart Themes. This means you can freely edit the HTML, CSS and JS of this theme using the code editor.
Cafe24's responsive themes use WebP, an image format that provides superior lossless compression for images, to minimize the image loading speed.
Internet Explorer, however, does not support WebP images, so you will also need to use JPG images or other supported formats. 
Read the guide below for more information on how to edit this theme and change images.

Get IBase from the Cafe24 Store

1. Content guide

Product images

From your Cafe24 admin, you can change the size of your images in Products > Add product > Images.
Select [Add multiple images] to add a different image for the product image and the list thumbnail image. Before adding any images, click [Adjust size] to change the size of your images.

Layout

1) Logo

Add your store logo in Smart Themes Editor > Logo section > Edit > Properties.
To make sure your logo is clearly visible on mobile devices, add an image that is twice as big as the size you actually see.
(For example, if the image size on screen is 104 x 27 px, you must upload a 208 x 54 px image. *Recommended image: 208 x 54 px)

2) Top banner (text)

In Smart Themes Editor, hover your mouse over the banner at the top of the page and click [Edit].
Edit the text between the <div class="desc"> and </div> tags.

<div class="desc">Spend KRW 25,000 or more for free shipping / Sign up now and get KRW 3,000 OFF coupon</div>

If you wish to remove the banner, simply click the "X" button in the top-right corner of the selected section.

3) Product categories

From your Cafe24 admin, you can configure product categories in Products > Categories > Product categories.
Your product categories will appear in your theme's header and sidebar.

4) Footer information

From your Cafe24 admin, you can configure your store information in My Store > General > Store profile.
These details will appear in your theme's footer.

Main contents

1) Top banner slider

This banner slider placed at the top of your landing page is your store's main visual element.

Changing the images

1. Place the URL link to which you want to redirect users in the href="" of the <a> tag under <div class="here">.
2. Edit the text between <h2 class="text"> and </h2>.
3. Prepare a WebP and JPG image each for PC, tablets and smartphones.
4. Add the WebP image to source srcset="".
5. Add the JPG image to img src="".

<div class="swiper-slide">
  <div class="item">
    <div class="here">
      <h2 class="text">Banner text</h2>
      <a href="Link" class="button">shop now</a>
  </div>
  <!-- PC image -->
  <picture class="RW">
    <source srcset="Banner image_PC.webp" type="image/webp">
    <img src="Banner image_PC.jpg" width="100%" height="100%" alt="main banner">
  </picture>
  <!-- tablet image -->
  <picture class="RTB">
    <source srcset="Banner image_Tablet.webp" type="image/webp" />
    <img src="Banner image_Tablet.jpg" width="100%" height="100%" alt="main banner">
  </picture>
  <!-- mobile image -->
  <picture class="RMB">
    <source srcset="Banner image_Smartphone.webp" type="image/webp" />
    <img src="Banner image_Smartphone.jpg" width="100%" height="100%" alt="main banner">
  </picture>
  </div>
</div>

This banner slider has two images by default. If you want to add more banners, simply copy the <div class="swiper-slide"> ... Omission </div> code shown above.

<div class="swiper-slide"> ... Omission </div>
<div class="swiper-slide"> ... Omission </div>
<div class="swiper-slide"> ... Omission </div>

2) Card-type banner (three columns)
You can edit this section's source code by clicking on a card-type image in the Smart Themes Editor.

You can directly edit the source code in the HTML viewer or through the HTML editor window that opens when you click [Edit].

1. Place the URL link to which you want to redirect users in the href="" of the <a> tag.
2. Prepare images of equal dimensions in both WebP and JPG format for the banner images. (*Recommended image: 594 x 325 px)
3. Add the WebP image to source srcset="".
4. Add the JPG image to img src="".

<a href="Link">
  <picture>
    <source srcset="Banner image.webp" type="image/webp">
    <img src="Banner image.jpg" width="100%" height="100%" alt="banner1" loading="lazy">
  </picture>
</a>

3) Product layout (4 columns)

Products sold on your store appear in a 4-column layout under the top banner.

• The module code "product_listmain_1" is used for this section. You can find it in Products > Product layout > Home page category layout > Manage home categories on your Cafe24 admin.
• The text entered for Product category is displayed as the title of this section.
• Products you add to that home category will appear in this section.

4) Banner-type product layout

This is a product layout that is integrated with an image banner.

Product layout

• The module code "product_listmain_2" is used for this section. You can find it in Products > Product layout > Home page category layout > Manage home categories on your Cafe24 admin.
• The text entered for Product category is displayed as the title of this section.
• This section will only become a slider once you upload at least two images.

Banner image

1. Prepare images of equal dimensions in both WebP and JPG format for the banner images. (*Recommended image: 594 x 325 px)
2. Add the JPG image to img src="".
3. Add the WebP image to source srcset="".

<picture>
  <source srcset="Banner image.webp" type="image/webp">
  <img src="Banner image.jpg" alt="banner" loading="lazy" width="100%" height="100%">
</picture>

5) Sale item

The sale item section is a tab layout made out of four home category modules.

• The module codes "product_listmain_3, 4, 5, 6" are used for this section. You can find them in Products > Product layout > Home page category layout > Manage home categories  on your Cafe24 admin.
• If you do not have any home categories for product_listmain_5, 6, please add them in [Manage home categories].
• The text entered for Product category will be used as the tab title.

You can change the section's title (Sale item) by editing the text between the <h2> and </h2> tags.

<div class="mainTitle">
  <h2>Sale Item</h2>
</div>

6) Video-type product layout

This is a product layout that is integrated with a video.

Product layout

1. The module code "product_listmain_7" is used for this section. You can find it in Products > Product layout > Home page category layout > Manage home categories on your Cafe24 admin.
2. If you do not have a home category for product_listmain_7, please add one in [Manage home categories].
3. The text entered for Product category is displayed as the title of this section.
4. This section will only become a slider once you upload at least two images.

Changing the banner video
Change the poster and image to that of the video you created.

1. Prepare images of equal dimensions in both WebP and JPG format for the video's background image. (*Recommended image: 570 x 639 px)
2. Add the WebP image to source srcset="".
3. Add the JPG image to img src="".
4. Replace the link in source data-src="" under the video tag with that of your video.
5. Replace the image in poster="" under the video tag with that of your video preview.

<div class="banner">
  <picture class="back">
    <source srcset="Video background image.webp" type="image/webp">
    <img src="Video background image.jpg" alt="banner" loading="lazy" width="100%" height="100%">
  </picture>
  <video muted controls preload="auto" poster="Video preview image.jpg" class="linkVideo" id="video">
    <source data-src="Video link" type="video/mp4">
  </video>
</div>

7) Image banner (center)

Image banner

1. Place the URL link to which you want to redirect users in the href="" under the <a> tag.
2. Prepare images of equal dimensions in both WebP and JPG format.
3. Since smartphones and tablets support WebP images, only prepare a JPG image for PC.
4. Add the WebP image to source srcset="".
5. Add the JPG image to img src="".
6. Edit the text between <div class="text"> and </div>.

<a href="Link">
  <div class="text">Enter banner text</div>
  <picture>
    <source srcset="Banner image_Smartphone.webp " media="(max-width: 767px)"/>
    <source srcset="Banner image_Tablet.webp " media="(max-width: 1024px)"/>
    <source srcset="Banner image_PC.webp" />
    <img src="Banner image_PC.jpg " alt="banner" loading="lazy" width="100%" height="100%"/></picture>
</a>

8) Product layout (3 columns)

Products sold on your store appear in a 3-column layout at the bottom of the page.

1. The module code "product_listmain_8" is used for this section. You can find it in Products > Product layout > Home page category layout > Manage home categories on your Cafe24 admin.
2. If you do not have a home category for product_listmain_8, please add one in [Manage home categories].
3. Products you add to that home category will appear in this section.

9) Instagram

Install the Instagram Widget from Cafe24 Store to use this section.
Once the app is installed, select this section in Smart Themes Editor and delete it.

Icons

You can change the icons that appear on your product pages (Add to cart, Add to wish list, etc.) through the Cafe24 admin.

From your Cafe24 admin, go to Themes (PC) > Features > Icons for your store's PC version, and Themes (Mobile) > Features > Icons for your store's mobile version.
You can upload new icon images that you created to fit the size recommendations.

2. CSS editing

Media query configuration

Since IBase is a responsive theme, when you edit the style of either the smartphone, tablet or PC, you will also have to edit the style included in the corresponding media query syntax.
Media queries must be configured as follows.
(This example shows cases in which the font size needs to be adjusted depending on the device.)

/*The source codes used accross all devices (smartphones, tablets and PC) 
are put at the top. */
.banner { color:#000; }

/*The styles that need to be added separately for each device are added below. */
/* Smartphones */
@media all and (max-width:767px) {
.banner { font-size:14px; }
}

/* Tablets */
@media all and (max-width:1024px) {
.banner { font-size:16px; }
}

/* PC */
@media all and (min-width:1025px) {
.banner { font-size:20px; }
}

Responsive class
These are the classes used for showing/hiding elements depending on the device. They only have the display property.

<p>This sentence will only have <br class="RMB">a line-break on smartphones.</p>