San Francisco
Below you’ll find a list of articles broken down by sub topics that cover each and every aspect of your theme. We regularly maintain our documentation in collaboration with our support staff.
General Settings
Settings that are used in almost all sections
Section Margin
Allows you to change the top and bottom margin in the section
- Top margin slider allows you to change the top margin in the section.
- Bottom margin slider allows you to change the bottom margin in the section.

Section Padding
Allows you to change the top and bottom padding in the section
- Top padding slider allows you to change the top padding in the section.
- Bottom padding slider allows you to change the bottom padding in the section.

Back to Top
To enable Back to Top button, navigate to Theme settings > Advanced.

Color Swatches
To enable and edit Color swatches, navigate to Theme settings > Color swatch.
To display color swatches as variant images, you can check the instructions here.
If product color options are added via category metafields, they will automatically appear in the following locations:
- On the product page
- In the featured product section
- On the collection page in filters. Customize filters with the Search and Discovery app.
If the product color option is added as a custom option, the Swatch trigger field must be filled in to display color swatches. You can also add custom colors by adding their name and color in HEX format.
To display color swatches on the product card, the Swatch trigger field must also be filled in.


Custom Product Badges
To enable and edit Custom badges, navigate to Theme settings > Product card.

The next step is to add metafields to the products.
To add and edit metafields, follow these steps:
-
Navigate to Settings > Custom data in the Admin panel.
- Select Products.
-
Click the button "Add definition" and fill the fields. In the Name field enter "Badges" so
that "custom.badges" appears in the Namespace and Key field. In the Select type field
select "Single line text" and "List of values."
-
Navigate to the product and add information below.
Customizable pagination
For collection list pages, product list pages, the blog page and the search page, you can configure the pagination type. To select pagination type, navigate to Theme settings > Pagination > Pagination type.
-
Load more type
-
Infinite scroll type
-
Classic pagination type
Rich Text Editor
This section of documentation covers the rich text editor. You can use the rich text editor to add or edit text in several places on your store:
- Product descriptions
- Collection descriptions
- Blog Posts
- Pages
- Store Policies
Below we will cover only the custom elements that you can create with our theme. If you want to find more information about rich text editor, check official Shopify documentation: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor
Image Gallery

To add image gallery to the rich text editor, follow these steps:
-
Add table element to the rich text editor.
-
Add images to the table.
-
Open HTML by clicking on the "Show HTML" button.
-
You'll see the post's content in HTML format.
-
Find the table.
-
Don't forget to remove all ` ` elements.
-
Add 'table-gallery' class to the table.
- Done! Don't forget to save your changes!
Alternative Blockquote

To add alternative blockquote to the rich text editor, follow these steps:
-
Add blockquote element to the rich text editor.
-
Open HTML by clicking on the "Show HTML" button.
-
You'll see the post's content in HTML format. Find the blockquote element.
-
Add 'blockquote-alt' class to the blockquote.
- Done! Don't forget to save your changes!
Blockquote author

To add blockquote author inside blockquote in rich text editor, follow these steps:
-
Add blockquote element to the rich text editor.
-
Open HTML by clicking on the "Show HTML" button.
-
You'll see the post's content in HTML format. Find the blockquote element.
-
Add
<cite>Author Name</cite>
element with author inside it into blockquote (for better look, add it before the closing</blockquote>
tag). - Done! Don't forget to save your changes!
Figure (Image or Video with Caption)

To add image or video with caption (figure) to the rich text editor, follow these steps:
-
Add image or video element to the rich text editor.
-
If you are working with image, change the image size to 1024px for the best look.
-
Open HTML by clicking on the "Show HTML" button.
-
You'll see the post's content in HTML format. Find your image (
<img>
tag) element. -
Remove
<div>
and</div>
tags that wraps the image element. Wrap the image inside<figure>
and</figure>
tags. -
Add caption text inside
<figcaption>
and</figcaption>
tags inside<figure>
tag. For better look, add it before the closing</figure>
tag. - Done! Don't forget to save your changes!
Header Group
Sections that are used on all pages by default.
Announcement Bar
The announcement bar appears at the top of every page and includes custom messages with optional links. It's good to use for promoting sales or need-to-know updates.

- Minimum height slider allows you to change the announcement height only on desktop devices.
- Minimum height on mobile devices slider allows you to change the announcement height only on mobile devices.
- Color scheme selector allows you to change the color scheme. You can change the colors in the Theme settings.
- Text field allows you to add and edit text.

Header
You can customize the header.


- Use the Logo image file selector allows you to select or upload your logo file.
- Use the Dark mode logo image file selector to select or upload your logo, which can be seen in Dark mode and when header is overlay.
- Logo position selector allows you to place the logo either on the left or in the center.
- (Optional.) If you add a logo, you can use the Logo width slider to change the logo size.
- Choose a Main menu to be displayed in the header.
- Use the Sticky header field to select a variant of the header when user scrolls in page.
- Enable country/region selector field enables the display of country/region.
- Enable language selector field enables the display of language.
- Enable search allows you to add Search modal and customize it.
- Choose a Popular searches menu to be displayed its items below the search interface.
- Enable bottom border field allows you to connect the lines under the header.

Desktop Burger Menu
This burger menu is only available for display on desktop devices (screen width greater than 1200px).
You can display social media links, additional links, and add up to 4 promo cards to the burger menu.

- Add the Desktop burger menu block to the Header.
- Enable social media links to display them at the bottom of the burger menu.
- Choose a Additional links to display them at the bottom of the burger menu.
- Choose a Card type. The Link type will be a large link card with an arrow icon. The Media type allows you to upload a image, add a promotional button.
- Heading, description and link customizations are available in each card.

Mega Menu
Mega menu allows you to display lists of products categorized into categories, as well as additional links.

- Add the Mega menu block to the Header.
- Type the exact name of the link in the Trigger field.
- Fill in the categories, for each category you can customize Type, Heading, Link, Products list for Products type, Image for Image type and an Additional label that is displayed on the right side above the product list or above the image.
- Choose a Additional links to display them at the bottom of the mega menu.

Search
You can add an additional menu for quick customer access to your selected pages. The menu items will be displayed below the search interface.



In this theme, you can use a predictive search. It is enabled by default for header, but you can disable it in the Theme settings > Predictive search.

Overlay Group
Popup
In the Popup settings, you can change layout, add image, subscribe form, customize position, open and exit animations and other options.

- Add the id of the popup/notification bar you chose to open to the Id field in the Triggers section (e.g. "popup").
- Navigate to the popup/notification bar settigns and add the Id with "#" in the beginning to the "CSS selector for manual trigger" field.


Notification Banner
In the Notification Banner settings, you can change layout, add image, texts, customize banner position, change open and exit animations and other options.

You can also use this banner as a button-trigger for opening another notification bar or a popup.
Age Verification Popup
An Age verification popup is a prompt that appears on a website to confirm the user's age before accessing restricted content. In the Age verification popup settings, you can change customize text and buttons.

Footer Group
Sections is used on all pages by default.
Footer
Footer appears at the bottom of every page. You can customize it to fit your brand and product offerings.

- Use Color scheme selector to change the color scheme.
- Enable border top field enables a line above the section.
- Use the Logo image file selector allows you to select or upload your logo file.
- Use the Dark mode logo image file selector to select or upload your logo, which can be seen in Dark mode.
- If you add a logo, you can use the Custom logo width slider to change the logo size.
- Text allows you to add additional description under the logo.
- Blocks alignment allows you to adjust the positioning of blocks in the footer.
- Social media icons field enables the display of the social media links in the footer.
- Country/Region Selector field enables the display of the region selector in the footer.
- Language Selector field enables the display of the language selector in the footer.
- Payment Methods field enables the display of payment methods in the bottom line of the footer.
- Copyright allow to show info about copyright.
- Policy Links field enables the display of the policies links in the footer.
- Follow On Shop allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled.
- Block Subscribe form allows you to add and customize subscribe form.
- Block Menu allows you to select menus, which will be displayed on the top line of the footer.
- Block Info allows you to add additional textual content at the bottom of the footer.

All Sections
The theme contains several customizable sections that you can add to your page in any order.
Hero
The section allows you to add a main image, an animated image, a welcome text, and a call-to-action button.


- Header overlay checkbox allows you to have a transparent header when the slideshow section is the first.
- Use Color scheme selector to change the color scheme for the section.
- Enable animation checkbox field allows you to enable animations for the section. If disabled, the section will be displayed without any animations.
- Media options allows you to add a main background and animated secondary images, as well as customize the appearance of the images

Slideshow
The section allows you to add slides with image, heading and text.


- Use Layout selector to change the slide to Overlay or Split screen (text, image) layout.
- Use Full width checkbox to enable this section with full screen or make it in container.
- Header overlay checkbox allows you to have a transparent header when the slideshow section is the first and has Overlay and Full-screen modes enabled.
- Use Color scheme selector to change the color scheme for the section.
- Aspect ratio sets the aspect ratio of the image.
- Enable loop checkbox field allows you to enable loop for slider.
- Enable autoplay checkbox field allows you to enable autoplay for slider.
- Slide autoplay duration allows you to change delay after each slide.
- Block Item options Color scheme allows you to set the color scheme for the slide.
- Block Item options Image allows you to set a image for the slide.
- Block Item options Overlay opacity slider allows you to change the opacity of the overlay.
- Block Item options Video allows you to set a video for the slide.
- Block Item options Subheading allows you to set a Subheading for the slide.
- Block Item options Heading allows you to set a heading for the slide.
- Block Item options Description allows you to set a description for the slide.
- Block Item options Button options allows you to set a button and customize it.

Rich text
This section allows you to add Rich text content block.


- Color scheme selector changes the color scheme for the section.
- Full width toggle changes the width of the section (full screen or inside container).
- Text alignment allows you to change content position.
-
This section contains 4 block types. You can add up to 4 blocks (one of each type),
including:
- Subheading – allows you to add a subheading.
- Heading – allows you to add a heading and customize its size.
- Description – allows you to add a description (rich text content).
- Button – allows you to add a button and customize it.
Image with Text
This section allows you to add image with text (content) block.


- Color scheme selector changes the color scheme for the section.
- Content color scheme selector changes the color scheme of the content block (block with subheading, heading, description and buttons).
- Section heading options (Subheading, Heading, Heading size, Description and Text alignment) allows you to set a subheading, heading and description for the whole section.
- Image Options (Image, Image position, Aspect ratio and Image fit) allows you to set a image for the section and customize it.
- Content options (Inner heading, Inner heading size, Inner text, Inner content horizontal alignment and Inner content vertical alignment) allows you to set a subheading, heading and description for the content block and customize it.
- Primary button options and Secondary button options allows you to add primary and secondary buttons and customize them.
Images with content
This section allows you to add images with content (rich text) blocks.


- Color scheme selector changes the color scheme for the section.
- Section heading options (Subheading, Heading, Heading size, Description and Text alignment) allows you to set a subheading, heading and description for the whole section.
-
Image Options allows you to set the images (Image 1, Image 2) for the section and
customize them. Includes following options:
- Image 1 allows you to set an image for the section.
- Image 2 allows you to set an image for the section.
- Images container aspect ratio allows you to set an aspect ratio for the whole images container.
- Image fit allows you to set an image fit for the images.
-
Text options allows you to set an inner heading and inner text(s) for the section
and customize them. Includes following options:
- Inner subheading allows you to set an inner subheading.
- Inner heading allows you to set an inner heading.
- Inner heading size allows you to set an inner heading size.
- Inner text 1 allows you to set an inner text 1.
- Inner text 2 allows you to set an inner text 2.
Banner grid
This section allows you to add a grid of cards with background image or video and texts.



- Color scheme selector changes the color scheme for the section.
- Section heading options (Subheading, Heading, Heading size, Description and Text alignment) allows you to set a subheading, heading and description for the whole section.
-
Grid options allows you to customize grid layout. Includes following options:
- Grid columns amount – allows you to set the number of grid columns.
- Cards container desktop aspect ratio – allows you to set the aspect ratio of the whole cards container on desktop devices.
-
This section contains one block type - Card.
Card options includes:- Color scheme selector changes the color scheme for the card.
-
Card postion options allows you to set the position of the card in the grid.
Includes:
- Column start selector allows you to select the starting column for the card.
- Column end selector allows you to select the ending column for the card.
- Row start selector allows you to select the starting row for the card.
- Row end selector allows you to select the ending row for the card.
-
Image and video options allows you to set background image or video for the
card. Includes:
- Background image allows you to set background image for the card.
- Video allows you to set a video for the card.
- Overlay opacity slider allows you to change the opacity of the overlay.
- Card aspect ratio on mobile devices allows you to set the aspect ratio of the card on mobile devices.
- Content options allows you to add a heading, description and button for the card.
Ticker Banner
This section allows you to add big banner with images and ticker.


- Color scheme selector changes the color scheme for the section.
- Subtitle allows you to set a subtitle for the section.
- Text allows you to set a text for the section.
- Background image allows you to set a background image for the section.
- Background image overlay opacity slider allows you to change the opacity of the background image overlay.
- Mobile aspect ratio allows you to set the aspect ratio of the section on mobile devices.
- Desktop aspect ratio allows you to set the aspect ratio of the section on desktop devices.
- Background image object fit selector changes the object fit for the background image.
- Image blocks aspect ratio selector allows you to set the aspect ratio of the Image blocks.
-
Ticker options allows you to add and customize ticker. Includes following options:
- Ticker text allows you to set a text for the ticker.
- Ticker speed allows you to change speed of the ticker.
- Ticker text color allows you to select the color of the ticker.
- Dark mode ticker text color allows you to select the color of the ticker in dark mode.
- Ticker position selector allows you to select position of the ticker.
-
This section contains one block type - Image.
Image options includes:- Image – allows you to set an image.
- Image fit – allows you to set an image fit for the image.
Popular Products
The section allows you to display popular products and customize their display.

- You can choose both the desktop and mobile layouts of products using the Cards layout and Mobile cards layout options, respectively.
- If you choose the Grid layout for desktop, you can set the number of blocks per row using the Products per row option.
- By selecting the Slider layout for mobile, you can display a slider with arrows or show a visible overflow of the slider block by adjusting the Mobile slider layout.
- You can also adjust the Gap between cards (available only for Grid and Column layouts).
- Additionally, you can customize the product cards options in this section.
- The Button options allow you to set a button and customize it.
Product tabs
This section allows you to display a set of products and organize them into tabs using special filters. The settings are similar to those in the Popular Products section, but here, products are added directly inside the blocks.

- Within each Tab block, you can specify the tab's name and choose the products to display in that tab.

Product Card Slider
This section allows you to configure a dedicated image to showcase a set of products as a slider. It can be displayed in two formats: as two cards separated from the main content and slider, or as a unified layout containing both types of content.

- You can customize the entire section's Color Scheme.
- Set the text content using the Heading, Subheading, and Description fields, and adjust the Text Alignment.
- You can choose between two layout options: Cards, which resembles a grid of two cards, or Overlay, which is presented as a solid layout.
- For the Overlay layout, you can enable the Full Width option.
- You also have the option to enable a unique scroll animation if desired.
After configuring the general fields, you can proceed to the settings for the Text content block settings and the Products block settings.
Text content block settings:
- Similar to the general section settings, you can choose a specific Color Scheme for this part.
- You can set the text content for the Heading, Subheading, and Description.
- Additionally, you can add a Button linked to a specific page or URL.
- The Vertical Alignment and Horizontal Alignment options allow you to adjust the content's position within the block.
- This section also provides the option to add a Background Image, customize the Desktop Aspect Ratio (for the mobile devices it will be calculated automatically), and modify an optional overlay with a customizable Overlay opacity (it may be displayed as a gradient by enabling the Show overlay as gradient option).
Products block settings:
- This part also has a customizable Color Scheme.
- You can specify a Heading for this section using the Heading field, but only if you previously selected the Cards layout.
- The Select Products option allows you to choose and edit the list of products displayed in the slider.
- Customize the appearance of product cards using the Card Ratio and Card Image Fit options.
- You can also enable autoplay and set the speed for the sliding animation.
Cards

Solid

Content cards
This section lets you create sets of cards with text content and images, displaying them as either a scrollbar or slider.

- The Color scheme settings allow you to customize the appearance of the whole section.
- Cards can be presented in two formats using the Desktop layout option: Scrollbar or Slider, with desktop cards being draggable via a dedicated floating Drag button.
- On mobile, the content is shown as a slider by default, but the Mobile cards layout option lets you switch between Visible overflow slider and Slider with arrows
- Text content, such as Heading, Subheading, and Description, can be adjusted along with Text alignment.
Cards are composed of two parts: a Text part and an Image part, each with its own customization options:

Both parts of the block can be enabled or disabled as needed. A specific Color scheme can also be applied to them.
-
Text part
- Text content can be added through the Heading, Subheading, and Description fields, similar to the whole section settings.
- A button with a custom link can also be included.
- Content placement inside the card can be adjusted with the Horizontal alignment and Vertical alignment options.
-
Image part
- The Display order option allows you to set the order in which the image part is displayed.
- You can add an image using the Image option and adjust the overlay with the Overlay opacity setting, if needed.
- Similar to the text part, a button can be added and linked to a specific page.
- If a button is added, its Horizontal alignment and Vertical alignment can be customized.
Scrollbar

Slider

Countdown
You can add and customize a countdown timer. If you add an image, this section will be displayed as two blocks; otherwise, it will be displayed as a single block.

- Use the Color scheme selector to change the color scheme of the section and the Content color scheme selector to adjust the inner content's color scheme.
- You can add a gap between the blocks if both are present. You can also choose the Content order of the blocks.
- The End date option allows you to set the countdown's end date.
- The End time option allows you to set the countdown's end time.
- After the timer ends allows you to specify what should happen when the countdown is completed: either the section will be hidden, or a special text will be displayed.
- Text after the timer ends will be shown if the Show text option is selected.
- You can add a unique Subheading, Heading, and Description for this countdown. You can also insert a Button with a custom link and style it. Additionally, you can adjust the alignment of the timer block's content.
- The Image option allows you to set an image for the section.
- The Overlay opacity allows you to adjust the overlay's opacity to the image.

Testimonials (reviews)
This section allows you to add and customize testimonials (users' reviews).



- Color scheme allows you to change the color scheme of the section.
- Layout allows you to change the layout of the section (With image/Without image).
- Mobile slider layout allows you to select the layout of the slider on mobile devices.
- Section heading options allows you to set a heading, subheading, description for the section and customize it.
-
Slider text options allows you to customize styles of the slider text that appears
on the top. Includes following options:
- Heading allows you to set a heading.
- Text allows you to set a text.
-
Images options allows you to customize testimonials images styles. Includes
following options:
- Image ratio allows you to set an aspect ratio for the images.
- Image fit allows you to set an image fit for the images.
-
Testimonials slide block allows you to add and customize testimonials (users'
reviews). Each block has the following options:
- Image allows you to set an image for the testimonials slide.
- Review score allows you to set a review score.
- Text allows you to set a text of the review.
- Author's name allows you to set the name of the author of the review.
- Product allows you to set a product that is related to the review.
- Show arrow in product link allows you to show or hide arrow in product link.
Featured Collections
Displays a list of featured collections.


- Color scheme allows you to change the color scheme of the section.
- Layout allows you to change the layout of the section (With one image/With two images).
- Mobile slider layout allows you to select the layout of the slider on mobile devices.
- Section heading options allows you to set a heading, subheading, description for the section and customize it.
-
Collections list options allows you to set a list of collections and customize it.
Includes following options:
- Show products count – allows you to show or hide the number of products in collection.
- Image ratio – allows you to set the aspect ratio of the image.
- Image fit – allows you to set the object fit for the image.
- Heading size – allows you to change the size of the collections' headings.
-
Collection block allows you to select collection and customize it. Includes
following options:
- Collection – allows you to select collection.
- Title – allows you to set a title for the collection. If not set, collection title will be used.
- Overwrite featured image – allows you to overwrite collection's featured image.
- Secondary image – allows you to set a secondary image for the collection. NB! Applicable only for the "With two images" layout type. Will be displayed only on desktop.
Product Markers
The section allows you to mark products in the image and choose display position.

- Background image allows you to set a background image for the section.
- Background image ratio sets the aspect ratio of the image.
- Product card settings allow you to customize product cards in the section
- Product marker block allows you to select a product and set the position of its marker.

Collapsible Content
You can add and customize a collapsible content section, such as using it for FAQs.


- The color scheme of the section can be adjusted using the Color scheme selector.
- A unique Subheading, Heading, and Description can be added, along with the Text alignment option.
- You can also choose a color scheme for the rows by toggling the Row color scheme.

- For each collapsible row block, you can set a Heading to be displayed by default, and a togglable Description.
- You can also choose special rows to be opened by default.
Multicolumn
This section allows you to add multiple columns of content.



- Color scheme selector allows you to change the color scheme of the section.
- Subheading Heading, Heading size, Description and Text alignment options allows you to set a subheading, heading and description for the whole section.
- Columns layout options allows you to customize columns layout. Includes following options:
- Columns per row – allows you to select the number of columns in one row.
- Columns spacing – allows you to set the spacing between columns.
- Row spacing – allows you to set the spacing between rows.
- Enable slider on mobile – allows you to display this section as slider on mobile.
- Enable slider on desktop – allows you to display this section as slider on desktop.
- Column options allows you to customize each column. Includes following options:

Image multicolumn
This section allows you to add columns consisting of images and assign special links to them.

- The color scheme of the section is adjustable through the Color scheme selector.
- A unique Subheading, Heading, and Description can be added, along with the option Text alignment for horizontal alignment.
- The number of columns per row is determined in the Image per row field, while spacing between columns and rows is configured using the Column spacing and Row spacing selectors.
- The Image ratio selector allows for adjusting the ratio of the image blocks.
- On mobile devices, images can be displayed as a slider by enabling the Enable slider on mobile option.
Each block offers several customization options:

- Basic settings, such as the Color scheme and Text content settings, can be adjusted similarly to the entire section.
- Each block can have a unique image, with options to set the Image fit for the container and adjust the overlay using the Overlay opacity field.
- The Link field adds a clickable link to the image block.
- The Button options allow you to add a button with a custom label and link. The Button as a cursor feature can make the button act as a cursor within the image block.


Blog Posts
The section allows you to select a blog and display its blog posts.


- Blog field allows you to choose a blog which posts will be displayed.
- Color scheme selector allows you to change the color scheme of the section.
-
Header options allows you to set a subheading and heading for the section. Header
options includes the following:
- Section header text allows you to set a text for the section header.
- Section header size allows you to change the size of the section header text.
- Show "Read all" button allows you to show or hide "Read all" button.
- "Read all" button label allows you to set the label of "Read all" button.
- Button style allows you to change the style of "Read all" button.
- Show arrow allows you to show or hide arrow in "Read all" button.
-
Posts layout options allows you to customize posts layout. Includes following
options:
- Display as slider on mobile allows you to display this section as slider on mobile.
- Mobile slider layout allows you to select the layout of the slider on mobile devices.
- Posts per row slider allows you to select the number of posts in one row.
- Posts count slider allows you to change the number of displayed posts.
-
Post Image Options allows you to customize post's image.
Post Image Options includes:
- Show post image allows you to show or hide post's image.
- Image ratio allows you to choose the orientation of pictures for cards.
- Image fit allows you to choose the fit of pictures for cards.
-
Post title options allows you to customize post's title.
Post title options includes:
- Font family allows you to select the font of the post's title.
- Font size allows you to select the size of the post's title.
-
Post content options allows you to customize post card's content.
Post content options includes:
- Show post date allows you to show or hide post's date of publication in post card.
- Show post tags allows you to show or hide post's tags in post card.
- Show post author allows you to show or hide post's author in post card.
- Show post excerpt allows you to show or hide post's excerpt in post card.
- Show "Read article" button allows you to show or hide "Read article" button in post card.
- "Read article" button label allows you to set the label of "Read article" button.
- Show comments count allows you to show or hide comments count in post card.
Steps

- In the section settings, you can customize the following parameters: subtitle, title, description, alignment, as well as Section Padding and Section Margin.
- The Step block allows you to customize the step's title, description, and image, along with selecting the image ratio.

Featured Product
In this section, you can display a single product and provide information about it. This section is similar to Product information, but with limited functionality.

Page
Information on topic pages
Product Page
The product page features two types of appearances: Default Product (which includes two essential sections: Product Information and Product Recommendations) and Extended (which includes several additional sections in addition to the two basic ones).



Product Information
The Product Information section allows users to view all relevant information about the product.

- This section features a customizable Color Scheme.
- You can adjust the image gallery placement for both desktop and mobile layouts using Desktop Product Gallery Alignment and Mobile Product Gallery Alignment.
- Specify the image fit for the main gallery slider and thumbnails using the Image Fit and Thumbnails Image Fit options.
- The Color Scheme for image content is also customizable.
-
There's a special feature to promote products using a Product countdown bar:
- You can specify the Color Scheme for the timer bar.
- Set the timer's Start Date and End Date.
- Define a final action when the timer ends.
- You can even add an Add to Cart button.
Product Recommendations
Dynamic recommendations use order and product information to change and improve over time.
To add and edit product recommendations, follow these steps:
-
Install the Search & Discovery app by Shopify from the Apps page in the Admin panel.
-
Once installed, open the app and follow the 'View recommendations' link in the Feature
overview section to add recommendations to your products.
Admin settings for this section look like below:

- Heading allows you to set a heading for the section.
- Heading size selector field allows you to change the size of the section header.
- Product card options allow you to customize product cards in the section.
Variant Picker
You can choose between two types for the Variant Picker: Pills and Dropdown.
Pills
Pills display options as buttons. In this type, the color option can be shown as Color swatches.

To display a color as a variant image, follow these steps:
-
Select an image for each variant on the product creation/edit page.
- Fill in the Swatch Trigger field in Theme Settings > Color Swatch.
-
On the product page (you can create a separate template if needed), add the Variant Picker block with the following settings: Type: Pills, Swatch Type: Variant image.
Dropdown
Dropdown allows variant selection through dropdown options.

Collections Page

Collection Banner

- Show collection image field turn on image display.
- Image for "Products" page Image for automatically generated page with all products.
- Featured collection list allows you to highlight some collections.
Product Grid

- Products per page field sets the number of displayed cards.
- Enable filtering field turn filtering.
- Enable sorting field turn sorting.
- Product card options allow you to customize product cards in the section.
- Desktop filter layout selector field allows you to select one of two desktop filter types.
Horizontal in modal filter layout

Vertical filter layout

Collections List
Displays a list of all collections


- Heading field sets a header section.
- Collections per row slider allows you to change the number of collections per line only on desktop devices.
- Sort collections by field filters the collection by the specified parameters
- Image ratio field allows you to choose the orientation of images for cards.
- Image fit field allows you to choose the fit of pictures for cards.
- Show description enables the display of the collection description.
Cart

Cart free shipping progress bar
To add and edit cart free shipping progress bar, follow these steps:
- Enable the Theme settings - Cart - Free shipping progress bar option.
- Set the value required to qualify for free shipping. This value should be specified in the store's default currency. For customers using other currencies, conversion will be applied.
- Create a free shipping discount in the store and set the same amount, or configure a shipping rate.
- To create and edit a shipping rate, go to the store settings under the Shipping and delivery tab.



Cart recommended products

Blog



- Posts per page slider allows you to change the number of posts per page.
- Posts per row slider allows you to select the number of posts in one row.
-
Featured posts options allows you to customize featured post(s). To add a featured
post(s), add at least one Featured post block. Featured posts options
includes:
- Dekstop aspect ratio allows you to set the aspect ratio of the Featured posts slider on desktop devices.
- Mobile aspect ratio allows you to set the aspect ratio of the Featured posts slider on mobile devices.
- Show post date allows you to show or hide post's date of publication in featured post.
- Show post tags allows you to show or hide post's tags in featured post.
- Show post author allows you to show or hide post's author in featured post.
- Show post excerpt allows you to show or hide post's excerpt in featured post.
- Content position allows you to select the alignment of the featured post's content.
-
Post Image Options allows you to customize post's image.
Post Image Options includes:
- Show post image allows you to show or hide post's image.
- Image ratio allows you to choose the orientation of pictures for cards.
- Image fit allows you to choose the fit of pictures for cards.
-
Post title options allows you to customize post's title.
Post title options includes:
- Font family allows you to select the font of the post's title.
- Font size allows you to select the size of the post's title.
-
Post content options allows you to customize post card's content.
Post content options includes:
- Show post date allows you to show or hide post's date of publication in post card.
- Show post tags allows you to show or hide post's tags in post card.
- Show post author allows you to show or hide post's author in post card.
- Show post excerpt allows you to show or hide post's excerpt in post card.
- Show "Read article" button allows you to show or hide "Read article" button in post card.
- "Read article" button label allows you to set the label of "Read article" button.
- Show comments count allows you to show or hide comments count in post card.
-
Featured post block has following options:
- Post allows you to select a post.
- Color scheme allows you to select the color scheme for the block.
- Overwrite image allows you to overwrite post's image.
- Overlay opacity allows you to change the opacity of the image overlay.
Blog Post



- Comments section color scheme allows you to select the color scheme for the comments section.
- Comment color scheme allows you to select the color scheme for comments.
-
This section contains 3 block types. You can add up to 3 blocks (one of each type),
including:
- Article header
- Content
- Article footer
-
Article header block has following options:
- Color scheme allows you to select the color scheme for article header's text block.
- Image ratio selector allows you to choose the aspect ratio of the post's feature image.
- Show excerpt allows you to show or hide post's excerpt in article header.
- Show date allows you to show or hide post's date of publication in article's header.
- Show author allows you to show or hide post's author in article's header.
- Show tags allows you to show or hide post's tags in article's header.
-
Content block has following options:
- Content alignment selector allows you to choose the alignment of the post's content.
NB! To learn more about the post content and rich text editor, please refer to the Rich text editor section.
-
Article footer block has following options:
- Show author allows you to show or hide post's author in article's footer.
- Show tags allows you to show or hide post's tags in article's footer.
- Show date allows you to show or hide post's date of publication in article's footer.
- Share options allows you to enable share block and each share link from the list.
About

Importing Our Demos
You can also copy the structure of any of our 5 demos in a few steps.
- Download the settings file to copy the demo settings from there.
-
Go to section "Online Store >> Themes" your store. Click on the three dots button of your theme. Go to the code editor by clicking the edit code button
-
In the code editor, search for the file "index.json" and change the code to the demo code you want to transfer. Click "save" to save your changes.
Demos Structure
Click on the demo name to download the file with the appropriate structure.
Support
You can ask any questions about the theme and our support agent will help you within 24 hours on business days.
Visit Help Center View Terms & Conditions