Shopify Documentation

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:

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:

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.

Gallery

It is possible for you to customize your Shopify Theme to add a photo gallery or lookbook to your website.

Let's review the Gallery section configuration:

1. Section Height — select a suitable gallery section height from the option dropdown (Small/Medium/Large);

Content:

1. Image — choose a custom image for Gallery. You can upload image from your computer or select image from your library. For higher quality upload images wider than 2048 pixels;
2. Images alignment — select a suitable gallery images alignment from the option dropdown (Top/Middle/Bottom);
3. Link — specify a link to a certain Collection, Product, Pages, Blogs or Blog Post;
4. Caption (optional) — enter the Caption (words printed above a picture).

To add an image to gallery section press the Add image button. You can display four images maximum.

Click on the Image section.

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

Set an Image alignment: Top, Middle or Bottom.

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

Enter the Caption (words printed above a picture).

You can delete picture from the Gallery section (press the Delete button).

Example:

1. Image — 2 images;
2. Images alignment
3. Picture #1 — Bottom;
4. Picture #2 — Bottom;
5. Link — no;
6. Caption — no.

1. Image — 4 images;
2. Images alignment
3. Picture #1 — Middle;
4. Picture #2 — Middle;
5. Picture #3 — Middle;
6. Picture #4 — Middle;
7. Link
8. Picture #1 — Collection;
9. Picture #2 — Blog;
10. Picture #3 — Pages;
11. Picture #4 — Product;
12. Caption
13. Picture #1 — New Collection;
14. Picture #2 — Our Blog;
15. Picture #3 — About Us;
16. Picture #4 — Super Price;

Image with Text

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.

Image with Text Overlay

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

Let's review the Image with Text Overlay section configuration:

1. Image height — choose a suitable section size from the option dropdown: Small(2048x256), Medium(2048x512), Large(2048x682);
2. Image — choose a custom image for this section. You can upload image from your computer or select image from your library. The image should be more than 2048px wide to resize and crop properly;
3. Images alignment — select a suitable image alignment from the option dropdown (Top/Middle/Bottom);
4. Parallax — enable the Checkbox to apply parallax effect to the picture;
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. Heading — Image with text overlay;
3. Text — Pair large text with an image to give focus/.../;
4. Button label — disabled;
5. Button Link — disabled.

1. Image height — Medium(2048x512);
2. Image — Yes;
3. Images alignment — Middle;
4. Parallax — enabled;
5. Heading — THE FUTURE OF MOBILITY. TODAY;
6. Text — We represent a holistic and /.../;
7. Button label — READ MORE;
8. Button Link — Blog Post.

Instagram Section

Let's review the Instagram section configuration:

1. Heading — add the title of the section;
2. Instagram user ID — specify the Instagram user ID. You can get user ID here;
3. Instagram access token — enter your access token. Find out how to receive Instagram Access Token;
4. Number of images — set a number of article to show. Note, the photos will autoupdate automatically. (6/12).

Remember to Save the settings.

To remove the section press the Delete Section button.

Logo List

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.

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);

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.

Slideshow

It is possible for you to add a slider to your website with text and button on the slides.

Let's review the Slideshow section configuration:

1. Slideshow autoplay — enable the Checkbox to apply the slideshow autoplay;
2. Autoplay transition duration — defines slides' autoplay transition duration in seconds (5-10 seconds);
3. Slide image size — select a suitable slider image size from the option dropdown (Small/Medium/Large);

Content

1. Image — choose a custom image for this section. You can upload image from your computer or select image from your library;
2. Images alignment — select a suitable slider image alignment from the option dropdown (Top/Middle/Bottom);
3. Heading — add the title of the slide;
4. Subheading — input the text you want to display on the slide;
5. Button text — specify the button text;
6. Button Link — specify a link to a certain Collection, Products, Pages, Blogs or Blog Post.

To add a slide to slider press the Add image slide button. You can add five slides maximum.

Click on the Image slide section.

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

Set an Image alignment: Top, Middle or Bottom.

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

Enter the Caption (words printed above a slide).

You can delete slide from the Slideshow section (press the Delete button).

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:

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).

Products Carousel section

Let's review the Products Carousel section configuration:

1. Heading — add the title of the section.



2. Title graphic element — upload the background image for the Title area. Maximum image size is 130 x 70. Click "Edit" to add the Image alt text.



3. Caption — enter the text for the caption. The caption is displayed under the Heading.



4. Collection — select the products' collection to display in this section. You can add a new collection as well.



5. Carousel products count — specify a number of products to display. The carousel activates, in case you select 8, 12, 16 or 20 product to show in One Row mode. In Two Rows mode the carousel is active for 12, 16 and 20 values.



6. Carousel rows — you can set one or two rows carousel.
7. Carousel direction — choose the carousel direction. Note, the Two-way direction works for Two Rows mode only.



8. Image size — set the product images size. You can use Small (270x170 px), Medium (270x270 px) or Large (270x374 px) image size for the section.



9. Image alignment — select the image alignment from the option drop-down.

Remember to Save the settings.

To remove the section press the Delete Section button.

Single Product

This functionality enables you to show a Single Product block on your site.

Let's review the Single Products section configuration:

1. Product — choose the product to display;
2. Image size — select a suitable product image size from the option dropdown (Small/Medium/Large);
3. Image alignment — select a suitable product image alignment from the option dropdown (Top/Middle/Bottom);
4. Show weight — enable the checkbox to show the product weight;
5. Show SKU — enable the checkbox to show the product SKU;
6. Show barcode — enable the checkbox to show the barcode;
7. Show collections — enable the checkbox to show the collection;
8. Show product types — enable the checkbox to show the product type;
9. Show vendor — enable the checkbox to show the product vendor;
10. Show tags — enable the checkbox to show tags;
11. Show social sharing buttons — enable the checkbox to show social sharing buttons;
12. Show description — enable the checkbox to show description.

Google

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

Let's review the Google Map section configuration:

1. Section height — select a suitable Google Map section height from the option dropdown (Small/Medium/Large);
2. Map address — enter the address you want to be marked on the map. Google maps will find the exact location;
3. API key — Google Api Key is necessary for the correct work of the map. You can receive and activate it by following the link. If your store experiences more than 2,500 visitors a day, you'll need to generate both JavaScript and Geocoding API keys;
4. Map style — choose the appropriate Map Style from the option dropdown (Default style/Light/Dark/Pale Down/Apple maps/Midnight);
5. Marker color — choose a color for the marker. You can select a color from the Color Palette;
6. Show captions — enable the checkbox to show the heading, address and the office hours;
7. Heading — add the title of the section;
8. Text address and hours — input the text you want to display within the sections (address and the office hours);
9. Show 'Get directions' button — enable the checkbox to show Get directions button. The site visitor has the opportunity to generate directions between the destinations (custom address and your store address).

Testimonials

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;

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.

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.