- XXS
- XS
- M
- L
- XL
- XXL
Important Note
Each rule must be on its own line.
Build, launch, and scale your online store with HUGE, a premium Shopify theme for Online Store 2.0. HUGE is a quick launch theme, easy to configure, allowing merchants to launch an online store fast and start selling immediately with minimal effort. Increase your site traffic and sales with powerful features and functionality such as an integrated referral and rewards program, mobile responsive design, user-friendly layout, promos, upsells, quick buy options, and more. Download The HUGE theme today and start selling more online with Shopify.
Welcome to Huge, a premium Shopify theme for OS 2.0. Use our Documentation as guidance to help set up and build your Shopify store using the HUGE theme.
Custom code tutorials in our documentation, such as demo setup instructions, theme customizations, and theme updates, are supported.
If you require further assistance such as customizations, app-integrations or theme updates, hire a Shopify Expert for help. (Services are not included in the cost of your theme.)
Still need help? Browse FAQ's or Contact
Configure the theme settings:
From here, you can select the colors you want to use throughout the theme. Through this main setting, you perform the following settings:
Setting |
Description |
|||||||
Background 1 |
Theme background color. |
|||||||
Background 2 |
Heading color. |
|||||||
Accent 1 |
Button color. |
|||||||
Accent 2 |
Text color. |
|||||||
Text |
Tagline color. |
|||||||
Secondary text |
Compare price color. |
|||||||
Buttons |
Button color. |
|||||||
Button text |
Button text color. |
|||||||
Buttons secondary |
Buttons secondary color. |
|||||||
Buttons secondary text |
Buttons secondary text color. |
|||||||
Lines and borders |
Lines and borders color. |
Announcement bar
Setting |
Description |
Background color |
Announcement bar background color. |
Text color |
Announcement bar text color. |
Link color |
Announcement bar url color. |
Header
Setting |
Description |
Background |
Background color for the header. |
Text |
Text color for the header. |
Footer
Setting |
Description |
Background |
Background color for the footer. |
Borders |
Border color for the footer. |
Text |
Text color for the footer. |
Secondary text |
Secondary text color for the footer. |
Menu and cart drawers
Setting |
Description |
Background |
Background color for the Menu and cart drawers. |
Text |
Text color for the Menu and cart drawers. |
Lines and borders |
Lines and border colors for the Menu and cart drawers. |
Image treatment
Setting |
Description |
Overlay |
Overlay color used on slideshows, large images with text, and collection list sliders. |
Overlay opacity |
Overlay opacity - Percentage of opacity for the Image treatment overlay. |
Badges
Setting |
Description |
Sale background color |
The sale badge background color. |
Sale color |
The sale badge color. |
Sold out background color |
The sold out badge background color. |
Sold out color |
The sold out badge text color. |
Featured background color |
The featured badge background color. |
Featured color |
The featured badge text color. |
Bestseller background color |
The bestseller badge background color. |
Bestseller color |
The bestseller badge text color. |
From here, you can make font-related customizations using different options.
Headings
Setting |
Description |
Font |
Select the font for the headings. |
Letter spacing |
Select the letter spacing for the headings. |
Font size scale |
Select the font size scale for the headings. |
Line height |
Select the line height for the headings. |
Body
Setting |
Description |
Font |
Select the font for the body text. |
Letter spacing |
Select the letter spacing for the body text. |
Font size scale |
Select the font size scale for the body text. |
Line height |
Select the line height for the body text. |
Extras
Setting |
Description |
Navigation letter spacing |
Select the Navigation letter spacing. |
Navigation size |
Select the navigation font size. |
Layout
Setting |
Description |
Page width |
Change the page width of the website (max 1600px). |
Enable breadcrumbs |
Check/uncheck the box to enable/disable breadcrumbs. |
Setting |
Description |
Slide navigation style |
Select one of the options from the drop-down list:
|
Setting |
Description |
Enable gift wrapping |
Select the checkbox next to one of the following options to enable gift wrapping for all or specific products:
|
All Products |
Enables gift wrapping for all products. |
Specific products only |
Enables gift wrapping for specific products only. |
Exclude specific products |
If All products was selected - Select this option if you wish to excludes specific products from gift wrapping when All Products is enabled. |
Gift product |
Select a gift product. |
Text |
Enter Gift wrap item text. |
Gift image |
Select an image for the gift wrap. |
Gift message |
Enter gift message text. |
Setting |
Description |
Enable quick shop feature |
Check/uncheck the box to enable/disable the quick shop feature in the product grid. |
Hover to reveal second image |
Check/uncheck the box to enable/disable the hover feature in the product grid. |
Image ratio |
Select a setting from the drop-down for the product grid:
|
Setting |
Description |
Enable color swatches |
Check this box to enable the color swatches feature. |
Configuration |
Enter a color configuration per line using one of the following formats
e.g., Red: #ff0000 e.g., Blue: blue.png |
Setting |
Description |
||
Enable size chart |
Check this box to enable the size chart. |
||
Size chart - page |
Select the page to display for the size chart. |
Setting |
Description |
Enable back to top button |
Check the box to enable this feature. |
Icon color |
Icon color for the back to top button. |
Background color |
Background color for the back to top button. |
Customize the look and feel of the cart drawer using the following settings:
Setting |
Description |
Enable Cart Note |
Enable this checkbox for cart note. |
Terms and conditions enable |
Enable this checkbox to display terms and conditions. |
Cart additional buttons |
Enable this checkbox for additional cart buttons. |
Terms and conditions url |
Select the terms and conditions url. |
Setting |
Description |
|
Add the link to your “Twitter” handle. |
|
Add the link to your “Facebook” handle. |
|
Add the link to your “Pinterest” handle. |
|
Add the link of your “Instagram” handle. |
TikTok |
Add the link to your “TikTok” handle. |
Tumblr |
Add the link to your “Tumblr” handle. |
Snapchat |
Add the link to your “Snapchat” handle. |
YouTube |
Add the link to your “YouTube” handle. |
Vimeo |
Add the link of your “Vimeo” handle. |
|
Add the link to your “LinkedIn” handle. |
Customize search results using the following settings:
Search Results
Setting |
Description |
PRODUCT CARD |
|
Show second image on hover |
Select the checkbox to show/hide the second image when hovering over the product card. |
Show vendor |
Select the checkbox to display the vendor in the product card search results |
BLOG CARD |
|
Show date |
Select the checkbox to display the date the blog card search results |
Show author |
Select the checkbox to display the author in the blog card search results. |
THEME SETTINGS |
|
Show product suggestions |
Select the checkbox to show the product suggestions in search results |
Custom CSS |
Add custom styles to your entire online store in the box provided. Learn more. |
These are tiny icons that appear in browser tabs, address bars, and bookmarks menus near your site's url or title. Users can upload favicon icons by clicking on the Change button under the favicon setting.
Setting |
Description |
Favicon image |
Select an image |
Setting |
Description |
Show currency codes |
Enable this checkbox to show currency codes. Cart and checkout prices always show currency codes. Example: $1.00 USD. |
With these settings, you can change the look and feel of the checkout page.
Setting |
Description |
||
Banner |
Background image |
Upload a background image for the checkout banner section. Image size of 1000 x 400px (pixels) is recommended. |
|
Logo |
Custom image |
Add your brand’s logo to the banner section. |
|
Position |
Set the logo's position to Center, Left, or Right. |
||
Logo size |
Choose any logo size: Small, Medium, or Large. |
||
Main content area |
Background image |
Upload a background image for the main body section. |
|
Background color |
Choose any background color for your main body section. |
||
Form fields |
Choose from the drop-down menu how you want your form field to appear:
|
||
Order summary |
Background image |
Upload a background image for the “Order summary” section. |
|
Background color |
Choose the background color of your “Order summary” section. |
||
Typography |
Headings |
Choose the desired font for the headings. |
|
Body |
Choose the desired font for the body content. |
||
Colors |
Accents |
Choose the color for accents on the checkout page. |
|
Buttons |
Choose the color for buttons on the checkout page. |
||
Errors |
Set the color to show errors (if any) on the checkout page. |
||
Checkout settings |
To customize more checkout settings, visit the admin. |
Add custom styles to your entire online store in the box provided. Learn more.
Configure the announcement section
Setting |
Description |
||||
Contact number |
Enter a contact phone number here. |
||||
Show social media |
Select the checkbox to enable social media icons for the Announcement bar. |
||||
Enable country/region selector |
Select the checkbox to enable the country/region. |
||||
Enable country/region flag |
Select the checkbox to enable the country/region flag. |
||||
Enable language selector |
Check this box to enable the language selector. To add a language, go to your language settings. |
||||
Add Announcement |
Text |
Enter text to display an announcement message. |
|||
Link Text |
Add text for the URL. |
||||
Link |
Add a link to the text CTA. |
Configure the header section:
Setting |
Values |
|
Logo image |
Use the logo selector option to set up an image to use as a logo. The recommended image dimensions are 247px x 47px (pixels).
|
|
Custom logo width |
Adjust the Desktop custom logo width slider to set a width for the logo image up to 250px (pixels). |
|
Custom logo width - Mobile |
Adjust the Mobile custom logo width slider to set a width for the logo image up to 250px (pixels). |
|
Logo position on large screen |
Choose a position for the location from the following options
|
|
Main Menu |
This feature will help you import menus from Shopify's default navigation list that is available in the backend. It will be displayed as the menu in the Header. |
|
Enable sticky header |
The Header remains on the screen as customers scroll up |
|
Enable country/region selector |
Select the checkbox to enable the country/region. |
|
Enable country/region flag |
Select the checkbox to enable the country/region flag. |
|
Enable language selector |
Check this box to enable the language selector. To add a language, go to your language settings. |
|
Add block Megamenu product |
Heading |
Enter a Heading for the megamenu product. |
Product 1 |
Select a product for the megamenu product. |
|
Product 2 |
Select a second product for the megamenu product. |
|
Add block Megamenu banner |
Heading |
Enter a heading for the megamenu banner. |
Image |
Select an image for the megamenu banner. Recommended format 700x450 px. |
|
Label text |
Enter text for the banner label |
|
Label text background color |
Select a background color for the label text. |
|
Label text color |
Select a color for the label text. |
|
Heading |
Enter a Heading for the banner. |
|
Text |
Enter text for the banner. |
|
Button text |
Enter button text for the banner button. |
|
Button link |
Enter button link for the banner. |
|
Enable inverse button. |
Enable this check box to enable the inverse button. |
|
Text color |
Select a color for the banner text. |
Configure Popup
Customize the look and feel of your newsletter pop-ups using the following settings:
Setting |
Description |
|
Popup Modal |
Display Mode |
Select enabled to display the popup or disabled to hide it. |
Delay |
Set the delay between 10 - 60 seconds for when the popup will appear on the website. |
|
Frequency |
Set the cookie expiration period (days); once expired, the popup will reappear on the storefront for the user. Max value is 30 days. |
|
Content |
Desktop Image |
Select the popup image. Recommended size 600x700 px. |
Layout |
Select a layout from the drop-down list:
|
|
Image size |
Select an image size from the drop-down list:
|
|
Text alignment |
Select the text alignment from the drop-down list:
|
|
Enable icon |
Check this box to enable the icon for the popup. |
|
Tagline |
Enter a tagline for the popup. |
|
Heading |
Enter text to display as a title on the popup. |
|
Text |
Enter text to display the description on the popup. |
|
Bottom text |
Enter text to display at the bottom of the popup. |
|
Close button text |
Enter the text for the close button. |
|
Enable social media |
Check this box to enable social media for the popup. |
|
Newsletter |
Enable newsletter |
Enable the Newsletter form to show in the popup. |
This section is used to add a slideshow to your home page. Users can add up to 5 slides. Each slide has its own settings for better visualization and engagement.
Configure the slideshow
Setting |
Description |
|
Slide navigation style |
You can select Arrows or Dots from the dropdown |
|
Auto-change slides |
Enable this checkbox for the slides to automatically transition. |
|
Change images every |
Set the frequency that the slides change in seconds up to a max of 10 seconds. |
|
Desktop Height |
Configure the desktop slider height. Choose from: |
|
Mobile Height |
Configure the mobile slider height. Choose from: |
|
Bar color |
Set the bar color. |
|
Custom CSS |
Add custom styles to this section only using CSS. Learn more. |
|
Add Slide |
Desktop Image |
Add desktop image for the slide. Recommended format 1920 x 1080px .jpg |
Desktop content alignment |
Select the content alignment from the following: |
|
Desktop content padding top |
Set the percentage of padding for desktop image upto 20%. |
|
Mobile Image |
Add mobile image for the slide. Recommended format 420 x 680px .jpg |
|
Mobile content alignment |
Select the content alignment from the following: |
|
Mobile content padding top |
Set the percentage of padding for mobile image upto 20%. |
|
Slide number |
Check this box to enable the slide number feature. |
|
Slide number color |
Select a color for the slide number. |
|
Caption |
Add a caption for the slide. |
|
Heading |
Enter text to display as the slide title. |
|
Text |
Enter text to display as the slide description. |
|
Button text |
Enter text to display over the button. For example - Learn More. |
|
Content width |
Select a content width up to 1000px |
|
Button Link |
Enter a URL to redirect the button; this link will open when a store visitor clicks on the button. |
|
Text color |
Select a text color for the slide. |
Configure Text columns with images
Setting |
Description |
||
Heading |
Set the heading for the Text columns with images. |
||
Custom CSS |
Add custom styles to this section only using CSS. Learn more. |
||
Add a column |
Choose an icon |
Select one of the following icons: |
|
Or add a custom image |
Select a custom image. Recommended format 64x64 .jpg |
||
Description |
Enter a description for the text column with images. |
||
Link text |
Enter text for the URL. |
||
Link |
Enter the URL for the CTA. |
Configure Promotion grid template
Customize the look and feel of Promotion grid using the following settings:
Setting |
Description |
||
Layout style |
Select a layout style for the promotion grid from the drop-down list: |
||
Full page width |
Check this box to enable the full page width feature. |
||
Heading |
Enter a heading for the promotion grid. |
||
Custom CSS |
Add custom styles to this section only using CSS. Learn more. |
Setting |
Description |
GRID 1 |
|
Desktop Image |
Add a desktop image for the promotion grid layout. Recommended format 1280 x 1080px .jpg |
Mobile Image |
Add a mobile image for the promotion grid layout. Recommended format 800 x 800px .jpg |
Label text |
Enter the text for the promotion grid layout. |
Label background color |
Select the label background color. |
Label text color |
Select the label text color. |
Heading |
Enter the heading for the promotional content. |
Text |
Enter the text for the promotional content. |
Button label |
Set the button text for the promotional content. |
Button link |
Set the URL for the button CTA. |
Button background color |
Set the button background color for the promotional content. |
Button text color |
Set the button text color for the promotional content. |
Text color |
Set the text color for the promotional content. |
ALIGNMENT |
|
Desktop text position |
Select the desktop text position from the following: |
Mobile text position |
Select the mobile text position from the following: |
Text alignment |
Select the text alignment from the following:
|
WIDTH AND HEIGHT (These settings only work for Layout 1) |
|
Width |
Select a percentage for the width:
|
Desktop height |
Set the desktop height using the slider, the max value is 800px. |
Mobile height |
Set the mobile height using the slider, the max value is 800px. |
Desktop content width |
Set the desktop content width using the slider, the max value is 800px. |
Mobile content width |
Set the mobile content width using the slider, the max value is 800px. |
GRID 2 and GRID 3 |
Refer to configuration settings for GRID 1 above. |
Configure Shop the collection
Setting |
Description |
|||
Background color |
Select a background color for Shop the collection. |
|||
Tagline |
Enter a tagline for the Shop the collection. |
|||
Heading |
Enter a heading for the Shop the collection. |
|||
Choose product |
Select a product for the collection. |
|||
Image |
Select an image for the product. Recommended format 800x800 .jpg |
|||
VERTICAL TEXT |
||||
Text |
Enter the vertical text for shop the collection. |
|||
Text Color |
Select a color for the vertical text. |
|||
Desktop font size |
Select a desktop font size, max 600px. |
|||
Mobile font size |
Select a mobile font size, max 120px. |
Configure the Collection carousel
Setting |
Description |
|||
Heading |
Enter a heading for the Collection carousel. |
|||
Auto-change slides |
Check this box to enable the slides to automatically change. |
|||
Interval time |
Set an interval time for the slides auto change using the slider up to 10s. |
|||
Enable “View all” button if collection has more products than shown |
Check this box to enable the View all button to be displayed when a collection has more products than are currently being displayed. |
|||
Button text |
Enter text to be displayed on the view all button. |
|||
Arrows Background color |
Select a background color for the collection carousel arrows. |
|||
Arrows color |
Select a color for the arrows. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add tab |
Heading |
Enter a heading for the collection. |
||
Choose collection |
Select a collection to add to the list. |
Configure the Vendors list
Setting |
Description |
|||
Background color |
Select a background color for the Vendors list. |
|||
Heading |
Enter a heading for the Vendors list. |
|||
Button text |
Enter button text to be displayed on the vendors list. |
|||
Button link |
Enter the URL for the button CTA. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add list |
Image |
Select an image for the Vendors list. Recommended format 200x80 px .png |
||
Icon |
Select an icon for the Vendors list. Recommended format 64x64px .png |
|||
Heading |
Enter a heading for the Vendors list. |
|||
Text |
Enter the text for the Vendors list. |
|||
Link |
Enter the URL to link the Vendors list to. |
This section displays products from the selected collection. Customize this section by adjusting the content and number of products to display together in this slider.
Configure the Featured Collection
Setting |
Description |
|||
Collection |
Select a collection for the Featured collection. |
|||
Enable “View all” button if collection has more products than shown |
Check this box to enable the View all button to be displayed when a collection has more products than are currently being displayed. |
|||
Button text |
Enter text to be displayed on the view all button. |
|||
Arrows Background color |
Select a background color for the collection carousel arrows. |
|||
Arrows color |
Select a color for the arrows. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add content |
Desktop Image |
Add a desktop image for the Featured collection. Recommended format 630 x 880px .jpg |
||
Mobile Image |
Add a mobile image for the Featured collection. Recommended format 800 x 800px .jpg |
|||
Tagline |
Enter the tagline for the Featured collection. |
|||
Heading |
Enter the heading for the Featured collection. |
|||
Button text |
Enter text for the button. |
|||
Link |
Enter the URL for the CTA. |
This section will display the top brands or logo list.
Configure the Logos List
Setting |
Description |
|||
Number of columns |
Select a number of columns using the slider, max value is 5. |
|||
Auto-change slides |
Check this box to enable the slides to auto-change. |
|||
Interval time |
Use the slider to set an interval time for the slides between 5-10 seconds. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add image |
Image |
Select a logo image to add to the list. Recommended format 200x70px .png |
||
Image link |
Enter the URL for the image CTA. |
Configure Featured product
Setting |
Description |
||||
Heading |
Enter a heading for the Featured product. |
||||
Product |
Select the product to be featured. |
||||
Thumbnail position |
Select the thumbnail position: |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
||||
Add block |
Heading |
No customizable settings are available. |
|||
Price |
No customizable settings are available. |
||||
Stock counter |
STOCK THRESHOLDS |
||||
Low stock threshold |
20 |
||||
Very low stock threshold |
10 |
||||
HIGH INVENTORY SETTINGS (DEFAULT) These settings will be applied when the selected variant’s inventory is above the 'Low stock inventory'. |
|||||
Background color |
Set the background color for the High inventory. |
||||
Text color |
Set the text color for the High inventory. |
||||
Text before stock count |
Enter the text to place before stock count, e.g., Available: |
||||
Text after stock count |
Enter the text to place after stock count, e.g., Left in stock |
||||
Show stock number |
Enable the show stock number feature for high inventory. |
||||
LOW STOCK SETTINGS These settings will be applied when the selected variant’s inventory is below the 'Low stock threshold'. |
|||||
Background color |
Set the background color for the low inventory. |
||||
Text color |
Set the text color for the low inventory. |
||||
Text before stock count |
Enter the text to place before stock count, e.g., Only |
||||
Text after stock count |
Enter the text to place after stock count, e.g., Left in stock |
||||
Show stock number |
Enable the show stock number feature for low inventory. |
||||
VERY LOW STOCK SETTINGS These settings will be applied when the selected variant’s inventory is below the 'Very low stock threshold'. |
|||||
Background color |
Set the background color for the very low inventory. |
||||
Text color |
Set the text color for the very low inventory. |
||||
Text before stock count |
Enter the text to place before stock count, e.g., 🔥Hot Product: Only |
||||
Text after stock count |
Enter the text to place after stock count, e.g., units remaining. |
||||
Show stock number |
Enable the show stock number feature for low inventory. |
||||
ONE UNIT REMAINING SETTINGS These settings will be applied when the selected variant has only one unit remaining. |
|||||
Background color |
Set the background color for one item remaining. |
||||
Text color |
Set the text color for one item remaining. |
||||
Text before stock count |
Enter the text to place before stock count, e.g., Get it before it’s gone🚨Only |
||||
Text after stock count |
Enter the text to place after stock count, e.g., unit remaining. |
||||
Show stock number |
Enable the show stock number feature for low inventory. |
||||
SOLD OUT SETTINGS These settings will be applied when the selected variant is sold out. |
|||||
Background color |
Set the background color for sold out. |
||||
Text color |
Set the text color for sold out. |
||||
Sold out text |
Set sold out text. |
||||
AVAILABLE SETTINGS These settings will be applied on products that are available but don’t have their inventory tracked by Shopify. |
|||||
Background color |
Set the background color for available. |
||||
Text color |
Set the text color for available. |
||||
Available text |
Set available text. |
||||
Quantity box |
Show quantity box |
Check this box to enable the show quantity feature. |
|||
Variant picker |
Type |
Choose between Pills/Dropdown. |
|||
Margin top |
Set a top margin between 0-100. |
||||
Sales countdown |
Heading |
Enter heading text for the sales countdown. |
|||
End date |
Enter an end date for the sales countdown. Format Dec 31, 2023 |
||||
Gift wrapping |
No customizable settings are available. |
||||
Product type & tag |
Enable type |
Check this box to enable the product type |
|||
Enter anyone specific tag |
Enter a specific tag for the product. |
||||
Buy buttons |
Show dynamic checkout buttons |
Check this box to enable dynamic checkout buttons. |
|||
Inline button |
Check this box to enable the Inline button. |
||||
Button position |
Select a button position
|
||||
Availability |
Text color |
Set the availability text color. |
|||
Divider |
No customizable settings are available. |
||||
Share |
Text |
Enter share text. |
|||
Product rating |
To display a rating, add a product rating app. Learn more. |
||||
Custom liquid block |
Custom liquid |
Enter the liquid template language code. For more information, refer to Shopify developers: Liquid reference. |
Configure the Lookbook
Setting |
Description |
|||
Image |
Select an image for the Lookbook.Recommended format 1280x1080px |
|||
Image focal point |
Select a focal point for the image:
|
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add product |
Select product |
Select a product for the lookbook image. |
||
Vertical position |
Select a percentage between 1% - 100% |
|||
Horizontal position |
Select a percentage between 1% - 100% |
This section is used to display a featured review/feedback from a happy customer.
Configure Featured Testimonial
Setting |
Description |
|||
Background color |
Select a background color for the Featured testimonials section. |
|||
Color star |
Select the text color for the stars. |
|||
Auto-change slides |
Check this box to enable the slides to auto-change. |
|||
Interval time |
Set the interval time between the quotes 5 - 10 seconds |
|||
Heading |
Enter text for the Featured testimonials heading. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Button text |
Enter the text for the button. |
|||
Button link |
Enter the URL for the button CTA. |
|||
Buttons |
Select a color for the buttons. |
|||
Add testimonial |
Image |
Select an image for the featured testimonial. Recommended format 120x120 px. |
||
Star rating |
Select a star rating from none - 5 from the drop-down list. |
|||
Heading |
Enter the name of the testimonial author. |
|||
Text |
Enter the quote from the customer. |
Configure Blog Posts
Setting |
Description |
||||
Auto-change slides |
Check this box to enable the slides to auto-change. |
||||
Interval time |
Set the interval time between the quotes 5 - 10 seconds |
||||
Heading |
Enter text for the Blog posts heading. |
||||
Blog |
Select a blog to add to the blog posts section. |
||||
Blog posts |
Select the number of blogs to include between 1-6. |
||||
Enable “View all” button if blog includes more blog posts than shown |
Check this box to enable the View all button to appear when more blogs are available than being displayed. |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
||||
Add block |
Heading |
Show date |
Check this box to display the blog post date. |
||
Show author |
Check this box to display the blog post author. |
||||
Excerpt |
No customizable settings available. |
||||
Link |
No customizable settings available. |
Setting |
Description |
|||
Heading |
Enter text for the Recently viewed products. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
Configure the Image with the text section
Setting |
Description |
||||||
Full height |
Check this box to make this section full height. |
||||||
Background color |
Select the background color of the entire section. |
||||||
Text color |
Select the text color for the heading text. |
||||||
Desktop image placement |
Select Text first/Image first to determine which will be displayed first from the dropdown. |
||||||
Center align text |
Enable this checkbox to center align the text. |
||||||
Custom CSS |
Add custom CSS to this section only. More information. |
||||||
Add blocks |
Heading |
Add the heading block for the section title. |
|||||
Text block |
Text |
Add description text. |
|||||
Button block |
Button label |
Enter a label for the button. |
|||||
Button link |
Enter text and url of the button |
||||||
Image Block |
Add multiple image blocks to make it a slider. |
||||||
Slide image |
Select image for the slider. |
||||||
Select product |
Select a product for image hotspots and change their vertical and horizontal positions. |
||||||
Vertical position |
Set the slider between 1-100 for the vertical position of the image. |
||||||
Horizontal position |
Set the slider between 1-100 for the horizontal position of the image. |
||||||
Select product |
Select a second product for the image hotspots and change their vertical and horizontal positions. |
||||||
Vertical position |
Set the slider between 1-100 for the vertical position of the image. |
||||||
Horizontal position |
Set the slider between 1-100 for the horizontal position of the image. |
||||||
Custom liquid block |
Custom liquid |
Enter the liquid template language code. For more information, refer to Shopify developers: Liquid reference. |
This Rich Text section enables you to add one full-width block of text; there are two types, Text block and Page block.
Configure the rich text section
Setting |
Description |
|||||
Background color |
Select background color for the entire section. |
|||||
Text color |
Select a text color for the Rich text section. |
|||||
Custom CSS |
Add custom CSS to this section only. More information. |
|||||
Add a block |
heading |
Heading |
Add a heading for your rich text block. |
|||
Text |
Description |
Add a text to the description box. |
||||
Button |
Add a button label and a button URL that links to the CTA. |
|||||
Custom liquid block |
Custom liquid |
Enter the liquid template language code. For more information, refer to Shopify developers: Liquid reference. |
Configure Video banner
Setting |
Description |
||||
Heading |
Enter text for the Video banner heading. |
||||
Heading text size |
Set heading text size between 40 - 80 px. |
||||
Text |
Enter text for Video banner section. |
||||
Button label |
Enter a button label for the video banner section. |
||||
Button link |
Enter the URL for the button CTA. |
||||
Desktop text position |
Select the text position for the desktop: |
||||
Desktop text position side |
Select the text position side for the desktop: |
||||
Background video link |
Enter the URL for the background video. Supports YouTube, .MP4, and Vimeo. Not all features are supported by Vimeo. |
||||
Desktop height |
Configure the desktop height. Choose from: |
||||
Mobile height |
Configure the mobile height. Choose from: |
||||
Text in box |
Check this box to enable the text in box feature. |
||||
Background color |
Select the Background color: |
||||
Box transparent |
Check this box to make the box transparent. |
||||
Text color |
Select the color for the text in this section. |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
This section is used to add the custom liquid code for any advanced customizations such as app snippets. Refer to Shopify developers: Custom liquid reference (opens new window).
Configure the custom liquid section
Setting |
Description |
||||
Custom liquid |
Enter the liquid template language code. For more understanding, refer to Shopify developers: Liquid reference. |
||||
Color scheme |
Select a color scheme the entire section: |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
Configure Google map
Setting |
Description |
|||||
Add block Map iFrame |
Add Google iframe code |
Enter Google iframe code in the box. For further information, please see Google maps documentation. |
||||
Add block map API |
Heading |
Enter heading for the Google map section. |
||||
Address and hours |
Enter address and hours information in the text box. |
|||||
Add API key here |
Enter your Goggle API Key here. You'll need to register a Google maps API key to display the map. |
|||||
Latitude |
Enter the latitude here. |
|||||
Longitude |
Enter the longitude here. |
|||||
Map Height |
Select a height for the map from the drop-down list:
|
|||||
Custom CSS |
Add custom CSS to this section only. More information. |
The Google Maps platform protects its products from unauthorized use by limiting API calls to authenticated users with proper credentials (i.e., an API key, this is a unique alphanumeric string that associates a Google billing account with the project and the specific API/SDK).
The API key is a UID (unique identifier), which authenticates all requests associated with the project for usage and billing purposes.
Note: Users must have at least one API key associated with the project.
Pre-Requisites
A project with a billing account and the Maps JavaScript API are required before you can start. See Set up in Cloud Console for further information.
Project name |
Use the default name or enter a customized name. You can change the project name at any time. For further information, see Identifying projects. |
Project ID |
Use the default or click "EDIT" to add a "Customized ID" that "Google APIs" use as a unique identifier for the project. |
Billing account |
Select a billing account for the project. This option is only displayed if you have more than one billing account. |
Permissions |
Users must be a "Billing account administrator" or "Project billing manager" to associate a project with the billing account. For further information, see the billing access control documentation. |
Location |
If users have an organization to link the project to, click Browse and select it; otherwise, choose "No organization." For further details, see Creating and Managing Folders and Relationships between organizations, projects, and billing accounts. |
To create a Google Maps API Key:
This is the bottom section of your online store; share brief information about your store and add navigation menus for your site here to assist your users when navigating.
Configure the footer
Setting |
Description |
||||||||
Logo |
Use the logo selector option to set up an image to use as a logo. The recommended image dimensions are 210px x 40px (pixels). |
||||||||
Custom logo width |
Adjust the slider Custom logo size to set a size for the logo image between 50px and 250px (pixels). |
||||||||
Text |
Enter footer text. |
||||||||
Show social media links |
Check this box to enable social media links in the footer. |
||||||||
Enable payment icons |
Enable shopify payment icons in the footer. |
||||||||
Bottom footer menu |
Select a bottom footer menu. |
||||||||
Theme Settings |
Enter social media links in the boxes provided. |
||||||||
Custom CSS |
Add custom CSS to this section only. More information. |
||||||||
Add blocks |
Footer menu |
Heading |
Add a heading block for the section title |
||||||
Footer menu |
Select the footer menu. |
||||||||
Column width |
Set the column width percentage. |
||||||||
Text with icon |
Logo |
Add a logo image for the footer. |
|||||||
Custom logo width |
Set the custom logo width between 50-250px. |
||||||||
Sub-heading |
Add text here for the footer. |
||||||||
Contact number |
Enter your company contact number here. |
||||||||
Column width |
Select a width percentage for the column 15-100%. |
The Default product page allows you to customize the appearance of products.
It has the following types of blocks:
Setting |
Description |
||||||||
Product information |
Configure the thumbnail position, enable share icon and sticky bar from here. Custom CSS for the template product information can also be added here. |
||||||||
Product type & tag |
Enable the product type here and add a tag for the product. |
||||||||
Heading |
No customizable settings available. |
||||||||
Price |
No customizable settings available. |
||||||||
Description |
Displays the product description on the page. |
||||||||
Star rating |
Displays customer reviews and ratings. These reviews can be included by adding the Shopify reviews app. The star color, size, alignment product, and badge text with no reviews can all be configured here. |
||||||||
Stock counter |
See Stock counter in Featured product for full details. |
||||||||
Quantity box |
Check the show quantity box to enable the show quantity feature. |
||||||||
Variant picker |
Displays a variant picker for selecting variants of a product. Choose between Dropdown/Pills |
||||||||
Gift wrapping |
No customizable settings available. |
||||||||
Gift item |
No customizable settings available. |
||||||||
Sales countdown |
Enter heading text for the sales countdown and an end date for the sales countdown. Format Dec 31, 2023 |
||||||||
Buy buttons |
Displays the “Add to cart” and “Buy now” buttons in the Featured product section together with the quantity selector, for selecting the number of products to purchase and the enable pickup availability feature.
|
||||||||
Product rating |
To display a rating, add a product rating app. Learn more. |
||||||||
Availability |
No customizable settings available. |
||||||||
Complementary product |
Displays information for a product that pairs well with. To select complementary products, add the Search & Discovery app. Learn more |
||||||||
Custom liquid block |
Custom liquid |
Enter the liquid template language code. For more information, refer to Shopify developers: Liquid reference. |
Setting |
Description |
|||||
Custom CSS |
Add custom CSS to this section only. More information. |
|||||
Add block |
Description |
No customizable settings available. |
||||
Tab |
Heading |
Enter a heading for the details tab. |
||||
Tab content |
Enter text for the details tab. |
|||||
Tab content from page |
Select a page for the tab content. |
|||||
Reviews |
No customizable settings available. Manage app. |
If a customer redirects to a product page from your store, related products will be displayed in the product recommendation section.
Setting |
Description |
||||
Heading |
Add title text to be displayed for the product recommendations. |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
If a customer redirects to a product page from your store, related products will be shown in the product recommendation section.
Note - The "Recently Viewed"section is only available on the default product and feature pages.
Setting |
Description |
||||
Heading |
Add title text to be displayed on the Recently Viewed section. |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
Setting |
Description |
||
Option name |
Select one of the options: |
||
Option values |
Enter the option value(s). Multiple values can be added here. Click Done when finished. |
||
Select variant image |
Select an image or add an image, then click Done. |
||
Actions |
Edit price |
Either enter a price to apply to all variants or enter a price for the selected variant. If you select multiple variants you can edit them all together. Click Done to save. |
|
Delete variant |
Deletes the selected variant. This cannot be undone. |
||
Edit SKU |
Add/edit the SKU(s) for the selected variant.If you select multiple variants you can edit them all together.
|
||
Edit barcode |
Add/Edit the barcode(s). If you select multiple variants you can edit them all together. |
||
Edit HS code |
Add/Edit the Harmonized System code(s). If you select multiple variants you can edit them all together. |
||
Edit country/region of origin |
Select a Country/Region of origin for the variant(s). If you select multiple variants you can edit them all together.
|
||
Edit locations |
Select the stock location(s) for the variant(s).
|
||
Options |
Add image |
Click Add image or Choose existing to populate the image for the variant. |
|
Pricing |
Price |
Select a currency and enter a price (by default the price of the original product is listed). |
|
Compare at price |
Select a currency and enter a compare at price (by default the compare at price of the original product is listed). |
||
Charge tax on this product |
Check the box if the product is subject to sales tax. |
||
Cost per item |
Enter a cost per item (customers won’t see this). |
||
Inventory |
SKU |
Enter a SKU for the variant. |
|
Barcode |
Enter a Barcode for the variant. |
||
Track quantity |
Optional: Check the track quantity box. |
||
Quantity |
Edit locations |
Select the location(s) where the variant is stocked. |
|
Shipping |
Physical Product? |
Configure the Shipping - Check the box if the product is a physical product. |
|
Weight |
Enter a weight and select the unit of measurement: |
||
Apply weight to all variants for “variant name” |
Check this box if all variants are the same weight. |
||
Include customs information for international shipping |
Customs Information |
Country/Region of origin Enter customs information for the product - Country of manufacture. |
|
HS (Harmonized System code) Enter customs information for the product - HS (Harmonized System) code. |
|||
Digital product or service |
Select this option if the product is digital or a service (i.e. no shipping required). |
The Gift wrapping feature is now enabled, but it will also appear as a standalone product. This can be hidden:
Enable the Gift Wrapping option for specific products
Add Gift Wrapping for a specific product
Exclude the Gift wrapping option for specific products
Exclude Gift wrapping for a specific product
You can customize the color swatches used either using Hex Code or an image.
Example:
This page will list all the products in your collection list. Users can choose to sort or filter the product listings on this page using various options.
Setting |
Description |
||||
Hero |
Image |
Select an image for the collection. |
|||
Mobile image |
Select a mobile image for the collection. |
||||
Heading |
Enter a heading for the collection list page. |
||||
Text color |
Select a text color for the heading. |
||||
Theme settings |
Enable breadcrumbs |
Check this box to enable breadcrumbs.. |
|||
Collections list page |
Enable “View all” button of collection has more products than shown |
Check this box to enable the view al button when more products are available than are being displayed. |
|||
Button text |
Enter text for the view all button. |
||||
Sort collections by: |
Select an option from the drop-down list:
|
||||
Theme settings |
Image ratio |
Select an image ratio:
|
|||
Hover to reveal second image |
Check this box to enable the hovering to reveal second image feature. |
||||
Enable color swatch |
Check this box to enable the color swatch feature. |
||||
Configuration |
Enter a color configuration per line using one of the following formats
e.g., Red: #ff0000 e.g., Blue: blue.png |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
Customize the Contact
Setting |
Description |
||
Heading |
Add Contact section heading text. |
||
Text |
Select a text color for the contact page. |
||
Text Center |
Check this box to center the text. |
||
Custom CSS |
Add custom CSS to this section only. More information. |
||
Add block |
Name |
Field title |
Add field title for the contact name. |
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Make field required |
Check this box to make this a required field. |
||
|
Field title |
Add Field title for email. |
|
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Phone |
Field title |
Add Field title for phone. |
|
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Make field required |
Check this box to make this a required field. |
||
Message |
Field title |
Add Field title for message. |
|
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Multi line text |
Field title |
Add field title for the multi-line text block. |
|
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Make field required |
Check this box to make this a required field. |
||
Single line text |
Field title |
Add field title for the single-line text block. |
|
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Make field required |
Check this box to make this a required field. |
||
Radio buttons |
Field title |
Add field title for the radio buttons. |
|
List of options |
Enter a comma-separated list of names for the radio buttons. |
||
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Make field required |
Check this box to make this a required field. |
||
Checkboxes |
Field title |
Add field title for the checkboxes. |
|
List of checkboxes |
Enter a comma-separated list of names for the checkboxes. |
||
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Make field required |
Check this box to make this a required field. |
||
Dropdown |
Field title |
Add field title for the drop-down list. |
|
Placeholder text |
Enter place holder text for the drop-down list, e.g., “-- Select an option --”. |
||
List of checkboxes |
Enter a comma-separated list for the drop-down list options. |
||
Width on desktop |
Select the width on desktop: Half width/Full width |
||
Make field required |
Check this box to make this a required field. |
Customize the Faqs
Setting |
Description |
|
Heading |
FAQ section heading text. |
|
Text |
Add text for the faq to show as a description. |
|
Custom CSS |
Add custom CSS to this section only. More information. |
|
Add block |
Heading |
Add FAQ heading text. |
Description |
Add a faq question and answer. |
Published blogs can be viewed and read from this page.
To understand more about blogs, please refer to Shopify blog posts.
Setting |
Description |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
It has the following types of blocks:
Block |
Description |
||||
Heading |
Add this block to display the article title. You can show/hide the date and author name from this block. |
||||
Excerpt |
This content is from your blog post. Edit blog post. |
||||
Link |
This content is from your blog post. Edit blog post. |
||||
Show category in sidebar |
Add this block to display categories in the sidebar. This block only works if the sidebar is enabled. |
||||
Show recent articles in sidebar |
Add this block to display recent articles in the sidebar. This block only works if the sidebar is enabled. |
This is the page where published blogs can be viewed and read.
To understand more about blogs, please refer to Shopify blog posts.
Block |
Description |
||||
Featured Image |
This content is from your blog post. Edit blog post. |
||||
Heading |
Add this block to display the article title. You can show/hide the article publish date, and author name from this block. |
||||
Content |
This content is from your blog post. Edit blog post. |
This page shows all the products that the customers have selected to purchase.
Setting |
Description |
||||
Shipping text |
Enter shipping text here. |
||||
Return text |
Enter returns text here. |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
Checkout can’t be edited using sections. To customize your checkout, go to theme settings.
Use the settings to customize the password page.
Setting |
Description |
||||
Logo image |
Use the logo selector option to set up an image to use as a logo.
|
||||
Custom logo width |
Adjust the slider Custom logo width to set a size for the logo image inside the section between 50px and 250px (pixels). |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
As per our Theme Support Policy, Marketplace Solutions supports all bug fixes and answers any merchant technical questions regarding our theme within two business days.
As a Theme Partner, Marketplace Solutions is responsible for supporting merchants who use our theme. Being merchant-focused and providing quality support is essential to the success of our theme.
Merchant support requests are submitted through our contact form, which is linked to the Shopify Theme Store and our theme documentation.
We keep our documentation up to date, as changes occur within Shopify we update our theme. As we support merchants using our theme, we identify any gaps in our theme documentation and make updates as necessary.
When we submit our theme to the Shopify Theme Store for an update, the theme will have a version number and release notes that highlight the main features of the new version.
Our theme documentation includes an FAQ section and other relevant information that could help to navigate and address potential questions that merchants might have.
Merchant Support
We assist merchants with all theme related questions and reply to all support requests within two business days. If there are technical issues with our theme such as broken layout, dead link or logical errors, then we are responsible for fixing within a timely manner and we fix all critical bugs immediately.
Custom code tutorials in our documentation such as demo setup instructions, theme customizations and theme updates are supported.
Still need help? Browse FAQ’s or Contact
Support Hours:
Monday - Friday
9:00am - 5:00pm EST (Excluding public holidays)
We answer all questions regarding our theme within two business days.
We will never sell or share your information. Read more in our Privacy Policy.