Roxxe

HomePage Area

Sections Configuration

Navigate to the Online Store > Themes section.

Select the theme you want to modify.

Click on the Customize theme button to open the settings editor page where you can change the appearance and content of the theme.

Go to the Sections tab. This is Live editor. You can track changes in the appearance of your store without reloading the page.

In your installed theme you will see the following options:

Blog Articles

This functionality enables you to display a number of blog posts from a certain blog (articles) in a grid with image, title, author name, publication date and VIEW ALL button.

Let's review the Blog Articles section configuration:

This section settings allow you to set the title of the section, the background color, blog and the number of recent articles to display (3, 6 or 9), as well as the Small 370х208, Medium 370x308 or Large 370x493рх image size. You can align the image by the top/bottom edges or by the center. The text can be placed in the usual way or over the image. You can also enable the author’s name display and the "View all" button which will lead to the blog page.

  1. Heading — add the title of the section;
  2. Blog — choose the collection of blog post you want to display;
  3. Show posts — set a number of article to show (3/6/9);
  4. Images size — select a suitable article image size from the option dropdown (Small/Medium/Large);
  5. Images alignment — select a suitable article images alignment from the option dropdown (Top/Middle/Bottom);
  6. Text position — select a suitable text position from the option dropdown (Normal/Overlay);
  7. Show author — tick to show the author;
  8. Show 'View all' button — tick to show the View all button.
  1. Heading — Featured posts;
  2. Blog — Blog;
  3. Show posts — 3;
  4. Images size — Small (370x208);
  5. Images alignment — Bottom;
  6. Text position — Normal;
  7. Show author — Yes;
  8. Show 'View all' button — No.
  1. Heading — Our Blog;
  2. Blog — Blog;
  3. Show posts — 3;
  4. Images size — Medium (370x370);
  5. Images alignment — Bottom;
  6. Text position — Overlay;
  7. Show author — No;
  8. Show 'View all' button — Yes.

Collection List

This functionality enables you to display a number of collections in a grid with image, amount of products and VIEW ALL button.

Let's review the Collection List section configuration:

The ‘Collection list’ section settings are the following:

  1. The title of the section.
  2. Size of the collection image (Small 270x151px, Medium 270x255px, Large 270x360px) and its alignment.
  3. Text position: over the image or below it.
  4. The ‘View all’ button, leading to the listing page of all the collections.

You can add up to 12 collection blocks (4 per row) into this section. To do this you just need to select the desired collection in the block settings.

  1. Heading — add the title of the section;
  2. Images size — select a suitable collection image size from the option dropdown (Small/Medium/Large);
  3. Images alignment — select a suitable collection images alignment from the option dropdown (Top/Middle/Bottom);
  4. Text position — select a suitable text position from the option dropdown (Normal/Overlay);
  5. Show 'View all' button — tick to show the View all button;
  6. Collection — choose the collection of products you want to display.

To add a collection to display press the Add collection button.

Click on the Collection section.

Select desired collection from the option dropdown.

You can display twelve collections maximum.

Example:

  1. Heading — Collections;
  2. Images size — Small (370x208);
  3. Images alignment — Top;
  4. Text position — Normal;
  5. Show 'View all' button — No.
  1. Heading — New Collections;
  2. Images size — Medium (370x370);
  3. Images alignment — Middle;
  4. Text position — Overlay;
  5. Show 'View all' button — Yes.

Custom Content

It is possible for you to add a custom content to your website.

You can add Image and Text block.

Add Video block to your website.

You also can add a block with the certain product to your website.

A block with the certain collection can be placed on your website.

You also can add a custom HTML block.

Let's review the Custom Content section configuration:
  1. Heading — add the title of the section;

Image

  1. Image — choose a custom image for this block. You can upload image from your computer or select image from your library;
  2. Container width — choose a suitable container width from the option dropdown (25/33/50/66/75/100%);
  3. Images alignment — select a suitable image alignment from the option dropdown (Top/Middle/Bottom);

Text

  1. Heading — add the title of the text block;
  2. Text — input the text you want to display within the block. You can italicize text (press the "I" button) or mark it in bold (press the "B" button);
  3. Text alignment — select a suitable column text alignment from the option dropdown (Left/Centered/Right);

Video

  1. YouYube video url — this option allows you to specify custom URL for video from YouTube that has to be visible on the page;
  2. Container width — choose a suitable container width from the option dropdown (25/33/50/66/75/100%);

Product

  1. Product — choose the product to display;
  2. Container width — choose a suitable container width from the option dropdown (25/33/50/66/75/100%);

Collection

  1. Collection — choose the collection of products you want to display;
  2. Container width — choose a suitable container width from the option dropdown (25/33/50/66/75/100%);

Custom HTML

  1. HTML — enter the custom HTML in this field;
  2. Container width — choose a suitable container width from the option dropdown (25/33/50/66/75/100%).

To add a new Custom Block press the Add content button.

Select desired custom section content type from the dropdown (Image/Text/Video/Product/Collection/Custom HTML).

Click the Content (Image/Talk about your brand/Video/Product/Collection/Custom HTML) section and configure the custom content block options.

Featured Product

This functionality enables you to show "Featured products" in tab panel, that keeps the layout clean and well-organized.

Let's review the Featured Products section configuration:

You may set the preferred title for the Featured products section. You may set the background color for the section, then there will also be some inner paddings.

The settings allow you to choose a collection to become ‘featured’ and the number of its products: 4 / 8 / 12 / 16 / 20. There is also an option to define the desired product image size: Small (270x190), Medium (270x270), Large (270x341) , and its alignment.

  1. Heading — add the title of the section;
  2. Collection — choose the collection of products you want to display;
  3. Show products — specify the number of products to show within the section;
  4. Images size — select a suitable product image size from the option dropdown (Small/Medium/Large);
  5. Images alignment — select a suitable product images alignment from the option dropdown (Top/Middle/Bottom).

Image with Text Section

It is possible for you to add image with text to your website.

Let's review the Image with Text section configuration:
  1. Image — choose a custom image for this section. You can upload image from your computer or select image from your library;
  2. Layout — choose a proper layout type for the section (Image on left/Image on Right);
  3. Images size — select a suitable section image size from the option dropdown (Small/Medium/Large);
  4. Image alignment — select a suitable image alignment from the option dropdown (Top/Middle/Bottom);
  5. Heading — add the title of the section;
  6. Text — input the text you want to display within the section;
  7. Button label — specify the buttons' text;
  8. Button Link — specify a link to a certain Collection, Products, Pages, Blogs or Blog Post.

Example:

  1. Image — no;
  2. Layout — Image on left;
  3. Heading — Image with text;
  4. Text — Pair large text with an image to give focus/.../;
  5. Button label — disabled;
  6. Button Link — disabled.
  1. Image — Yes;
  2. Layout — Image on Right;
  3. Images size — Medium;
  4. Images alignment — Middle;
  5. Heading — THE FUTURE OF MOBILITY. TODAY;
  6. Text — We represent a holistic and /.../;
  7. Button label — READ MORE;
  8. Button Link — Blog Post.

Logo List Section

This functionality enables you to display a number of Logos in a grid with a link to a certain Collection, Products, Pages, Blogs or Blog Post.

Logo list section settings allow you to set the title, choose between the 4 block size options: Extra Small (170x78), Small (170x119), Medium (170x124), Large (170x132), set the background color for the section, define the separate background for the blocks (only for the icon type blocks), select the blocks text color (only for the icon type blocks), set the icon and text alignment for the icon type blocks:

regular (below the icon)or in one line (beside the icon).

You may add up to 12 blocks of 2 types: logo or icon. In case you add more than 6 blocks, they will show up in a carousel.

Logo block allows adding an image and a link.

Icon block allows choosing one of the 20 predefined icons, add the text and the link.

Let's review the Logo List section configuration:
  1. Heading — add the title of the section;
  2. Images size — select a suitable Logo image size from the option dropdown (Small/Medium/Large);
  3. Images alignment — select a suitable Logo images alignment from the option dropdown (Top/Middle/Bottom).

    4. Content

  1. Image — choose a custom image for Logo. You can upload image from your computer or select image from your library;
  2. Link — specify a link to a certain Collection, Products, Pages, Blogs or Blog Post.

To add a Logo to display press the Add logo button. Click on the Logo section.

Upload desired image from your computer (press the Upload image button) or select image from your library (press "select from the library").

Specify a Link to a certain Collection, Products, Pages, Blogs or Blog Post.

You can display twenty Logos maximum.

Testimonials Section

This section contains the settings which control the display of Testimonials on the pages of the store.

Let's review the Testimonials section configuration:
  1. Heading — add the title of the section;

    2. Content

  1. Quote Text — add the content of the testimonial;
  2. Quote Author — add the author's name.

To add a Logo to display press the Add quote button.

Click on the Quote section.

Add the content of the testimonial and the testimonial author's name.

You can display nine testimonials maximum.

Text Columns with Images

It is possible for you to add text columns with images to your website.

Let's review the Text columns with images section configuration:
  1. Heading — add the title of the section;
  2. Image size — choose a suitable image size from the option dropdown: Small(370x208), Medium(370x370), Large(370x493);
  3. Images alignment — select a suitable images alignment from the option dropdown (Top/Middle/Bottom);
  4. Text alignment — select a suitable column text alignment from the option dropdown (Top/Middle/Bottom);

Content

  1. Image — choose a custom image. You can upload image from your computer or select image from your library;
  2. Heading — add the title which will be displayed under the image;
  3. Text — add the text which will be displayed under the image;
  4. Button label — specify the buttons' text;
  5. Button Link — specify a link to a certain Collection, Products, Pages, Blogs or Blog Post.

To add a new column to display press the Add column button.

Click on the Add a title or tagline section.

Upload desired image from your computer (press the Upload image button) or select image from your library (press "select from the library").

Enter the Heading and the Text which will displayed under the image.

Specify a button text and set the link to a certain Collection, Products, Pages, Blogs or Blog Post.

You can display six blocks maximum.