- XXS
- XS
- M
- L
- XL
- XXL
Important Note
Each rule must be on its own line.
Build, launch, and scale your online store with URGE, a premium Shopify theme for Online Store 2.0. URGE 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 URGE theme today and start selling more online with Shopify.
Welcome to Urge, a premium Shopify theme for OS 2.0. Use our Documentation as guidance to help set up and build your Shopify store using the URGE 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 |
Theme background color. |
|||||||
Heading |
Heading color. |
|||||||
Text |
Text color. |
|||||||
Tagline |
Tagline color. |
|||||||
Compare price |
Compare price color. |
|||||||
Sale price |
Sale price color. |
|||||||
Buttons |
Button color. |
|||||||
Button text |
Button text color. |
|||||||
Lines and borders |
Lines and borders color. |
|||||||
Input focus |
Focus color for inputs. |
|||||||
Cart count bubble background color |
Background color for the cart count bubble. |
|||||||
Cart count bubble text color |
Text color for the cart count bubble. |
Announcement bar
Setting |
Description |
Background color |
Background color for the announcement bar. |
Text color |
Foreground color on background colors. |
Link color |
Color used for links. |
Header
Setting |
Description |
Background |
Background color for the header. |
Text |
Text color for the header. |
Text hover |
Text hover color. |
Transparent background |
Transparent background color. |
Transparent text |
Color for transparent text. |
Transparent text hover |
Color for transparent text when hovered over. |
Topbar background color |
Background color for the topbar. |
Topbar text color |
Text color for the topbar text. |
Footer
Setting |
Description |
Background |
Background color for the footer. |
Borders |
Border color for the footer. |
Text |
Text color for the footer. |
Menu and cart drawers
Setting |
Description |
Overlay |
Menu overlay color. |
Overlay opacity |
Percentage for the opacity for the menu and cart drawers overlay. |
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. |
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 |
Italic Font |
Select the italic font. |
Navigation letter spacing |
Select the Navigation letter spacing. |
Navigation size |
Select the navigation font size. |
Capitalize navigation |
Enable/disable font capitalization. |
Layout
Setting |
Description |
Page width |
Change the page width of the website (max 1600px). |
Enable breadcrumbs |
Check/uncheck the box to enable/disable breadcrumbs. |
Breadcrumb background color |
Background color for breadcrumbs. |
Breadcrumb text color |
Text color for breadcrumbs. |
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 |
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 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. |
Enable type |
Check/uncheck the box to enable/disable the product grid type. |
Image ratio |
Select a setting from the drop-down for the product grid:
|
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. |
Choose product |
Select a gift wrapping 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 size chart |
Check this box to enable the size chart. |
||
Size chart - page |
Select the page to display for the size chart. |
||
Enable custom size chart |
Enable to use your custom size chart configured below. Please disable this if you are using Page as Size Chart. 6 sizes can be configured. |
||
Size - 1 |
Size |
This is the size name e.g. XL |
|
Length (cm) |
Length in cm for this size. |
||
Chest (cm) |
Chest in cm for this size. |
||
Shoulder (cm) |
Shoulder in cm for this size. |
||
Sleeve length (cm) |
Sleeve length in cm for this size. |
||
Size -2, 3, 4, 5 & 6 |
See settings descriptions for Size -1 above. |
Setting |
Description |
Enable back to top button |
Check the box to enable this feature. |
Text and icon color |
Text and 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 |
Cart type |
Change cart type to Page or Cart drawer. |
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. |
Enable free shipping bar |
Enables the free shipping threshold feature. |
Threshold |
Set the threshold to meet for free shipping. |
Country/region selector
Setting |
Description |
Enable country/region selector |
Select the checkbox to enable the country/region |
Language selector
Setting |
Description |
Enable language selector |
Select the checkbox to enable the language selector. |
Setting |
Description |
Show discount |
Check this box to enable the discount feature. |
Discount SVG color |
Change the discount SVG badge color. |
Discount color |
Change the discount badge text color. |
Sold out background color |
Change the sold out badge background color. |
Sold out color |
Change the Sold out badge text color. |
Featured background color |
Change the featured badge background color. |
Featured color |
Change the featured badge text color. |
Bestseller background color |
Change the bestseller badge background color. |
Bestseller color |
Change the bestseller badge text color. |
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:
Product Suggestions
Setting |
Description |
Enable product suggestions |
Select the checkbox to show/hide the product suggestions in search results. |
Show vendor |
Select the checkbox to show/hide the vendor in search results. (Visible when product suggestions is enabled). |
Show price |
Select the checkbox to show/hide the price in search results. (Visible when product suggestions is enabled). |
Popular Search
Setting |
Description |
Placeholder text |
Place holder text for the search bar. |
Heading |
Popular search heading |
Text |
Additional text to be displayed. |
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. |
|
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 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).
|
White Logo Image |
Use the logo selector option to set up an image to use as a white logo. The recommended image dimensions are 247px x 47px (pixels).
|
Desktop custom logo width |
Adjust the Desktop custom logo width slider to set a width for the logo image up to 250px (pixels). |
Mobile custom logo width |
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 positon 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 |
Overlay header over home page |
Place the header over the top of the home page. |
Enable social media |
Enable social media icons. |
Need help text |
Change the heading of the menu promo. |
Need help link |
Enter a link for help. |
Configure the announcement section
Setting |
Description |
|
Text |
Enter text to display an announcement message. |
|
Link Text |
Add text for the link url. |
|
Link |
Add a link to the text CTA. |
Setting |
Description |
|
Heading |
Enter a heading for the Megamenu promotion. |
|
Image |
Add an image for the Megamenu promotion section. |
|
Title |
Add a Title for the Megamenu promotion. |
|
Link Text |
Add text for the link url. |
|
Link |
Add a link to the text CTA. |
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. |
Popup type |
Choose between slide and load. |
|
Only for on load type |
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 |
Slide label |
Enter text for the slide label. |
Slide label width |
Select a width for the slide label upto 300 px. |
|
Image |
Select the popup image. Recommended size 600x800 px. |
|
Heading |
Enter text to display as a title on the popup. |
|
Text |
Enter text to display the description on the popup. |
|
Newsletter |
Enable newsletter |
Enable the Newsletter form to show in the popup. |
Button background |
Set the button background color. |
|
Button text |
Set the button text color. |
Configure Cart drawer template
Customize the look and feel of your newsletter pop-ups using the following settings:
Setting |
Description |
|
Title |
Add a Title for the Cart drawer template. |
|
Custom CSS |
Add custom styles to this section only using CSS. Learn more. |
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/Dots/Bars 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, minimum of 5 seconds and a maximum 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 |
Mobile Image |
Add mobile image for the slide. Recommended format 420 x 680px .jpg |
|
Heading |
Enter text to display as the slide title. |
|
Heading font size |
Select a heading font size between 40px - 120px. |
|
Text |
Enter text to display as the slide description. |
|
Text font size |
Select a text font size upt to 18px max. |
|
Text alignment |
Select the text alignment from the following:
|
|
Button Text |
Enter text to display over the button. For example - Learn More. |
|
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. |
|
Button size |
Select a button size either Small or Large. |
Configure Promotional grid template
Customize the look and feel of Promotional grid using the following settings:
Setting |
Description |
||
Background color |
Set the background color for the promotional grid. |
||
Custom CSS |
Add custom styles to this section only using CSS. Learn more. |
||
Add content |
Background |
Set the background color for the promotional grid content. |
|
Text |
Set the text color for the promotional content. |
||
Heading |
Enter the heading for the promotional content. |
||
Text |
Enter the text for the promotional content. |
||
Button text |
Set the button text for the promotional content. |
||
Button link |
Set the URL for the button CTA. |
||
Buttons |
Set the buttons color for the promotional content. |
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 |
||
Heading |
Enter the heading for the text column with images. |
||
Description |
Enter a description for the text column with images. |
Configure Brand list
Setting |
Description |
|||
Background image |
Select a background image for your brand list. |
|||
Background color |
Select a background color for the brand list section. |
|||
Text color |
Select the text color for the brand list section. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add a brand |
Quote |
Add a quote to display in the brand. |
||
SVG |
Add an SVG image for the brand. |
|||
Icon image |
Add an icon image for the brand. |
Configure Collection list slider
Setting |
Description |
|||
Heading |
Enter a heading for the Collection list. |
|||
Image ratio |
Choose an image ratio from: |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add collection |
Image |
Add an image to display a custom image for the collection tile. |
||
Hover image |
Select an image to be displayed when hovered over. Recommended format 450x600 px. |
|||
Choose collection |
Select a collection. |
|||
Text |
Select a text color. |
Setting |
Description |
|||
Desktop background image |
Add desktop background image. Recommended format 1920 x 1080px .jpg |
|||
Mobile background image |
Add mobile background image. Recommended format 420 x 680px .jpg |
|||
Desktop height |
Configure the desktop height. Choose from:
|
|||
Mobile height |
Configure the mobile height. Choose from:
|
|||
Textbox position |
Set the alignment for the text box: Left, Right or Center. |
|||
Enable textbox below image for mobile device |
Select this box to enable the text box to be displayed below the image for mobile devices. |
|||
Tagline |
Enter the tagline for the text box. |
|||
Heading |
Enter a heading for the text box. |
|||
Text |
Enter the text for the text box. |
|||
Box content alignment |
Set the alignment for the box content: Left, Right or Center. |
|||
Box background image |
Select a background image for the text box. |
|||
Border image |
Select an image for the border. |
|||
Box radius |
Set the radius for the text box, max value 18px. |
|||
Background |
Set the background color for the text box. |
|||
Text |
Set the text color. |
|||
Tagline |
Set the tagline text color. |
|||
Button 1 |
Button text |
Enter the text to be displayed on the button. |
||
Button link |
Enter the URL for the button CTA. |
|||
Buttons |
Select a color for the buttons. |
|||
Button 2 |
Button text |
Enter the text to be displayed on the button. |
||
Button link |
Enter the URL for the button CTA. |
|||
Buttons |
Select a color for the buttons. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
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.
Setting |
Description |
|||
Tagline |
Enter a tagline for the Featured collection. |
|||
Heading |
Enter a heading for the Featured collection. |
|||
Image ratio |
Choose an image ratio from:
|
|||
Shop all |
Check this box to enable the Shop all feature. |
|||
Theme Settings |
Hover to reveal second image |
Check the box to enable the hover to reveal second image feature. |
||
Enable percentage |
Check the box to enable the percentage feature. |
|||
Enable quick shop feature |
Check the box to enable the quick shop feature. |
|||
Enable type |
Check the box to display the product type. |
|||
Enable color swatches |
Check the box to enable color swatches. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
Configure the Lookbook
Setting |
Description |
|||
Tagline |
Enter a tagline for the Lookbook. |
|||
Heading |
Enter a heading for the Lookbook. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add image |
Slide Image |
Select a slide image for the lookbook. Recommended format 1500x768 px .jpg |
||
Image focal point |
Select a focal point for the image:
|
|||
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% |
Configure the Image with the text section
Setting |
Description |
||||||
Full width |
Check this box to make this section full width. |
||||||
Background color |
Select the background color of the entire section. |
||||||
Text color |
Select the text color for the heading text. |
||||||
Tagline color |
Select the tagline text color. |
||||||
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 |
Tagline |
Enter a tagline for the Image. |
|||||
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. |
||||||
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 |
||||
Enable top spacing |
Select this checkbox to enable top spacing. |
||||
Enable bottom spacing |
Select this checkbox to enable bottom spacing. |
||||
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 |
Add a heading for your rich text block. |
|||
Description |
Add a text to the description box. |
||||
Button |
Add a button label and a button URL that links to the CTA. |
||||
Custom liquid |
Enter the liquid template language code. For more information, refer to Shopify developers: Liquid reference. |
Configure the Collection list
Setting |
Description |
|||
Heading |
Enter a heading for the Collection list. |
|||
Background color |
Select a background color for the collection list section. |
|||
Text color |
Select the text color for the collection list section. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add collection |
Choose collection |
Select a collection to add to the list. |
||
Featured image |
Select a featured image for the collection. Recommended format 800x950px |
|||
Heading |
Enter a heading for the collection. |
|||
Text |
Enter the text to be displayed for the collection. |
|||
Link Text |
Text to be displayed for link. |
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 |
Payment Option |
Heading |
Select a collection to add to the list. |
||
image |
Select an image for the product. |
||||
Price |
Enable availability |
Check this box to enable the product availability. |
|||
Variant picker |
Type |
Choose between Pills/Dropdown. |
|||
Buy buttons |
Show dynamic checkout buttons |
Check this box to enable dynamic checkout buttons. Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. Learn more |
|||
Show quantity box |
Check this box to enable the quantity box. |
||||
Enable pickup availability feature. |
Check this to enable the pickup availability feature. Learn how to setup this feature here |
||||
Product type & tag |
Enable type |
Check this box to enable the product type |
|||
Enter anyone specific tag |
Enter a specific tag for the product. |
||||
Sales countdown |
Heading |
Enter heading text for the sales countdown. |
|||
End date |
Enter an end date for the sales countdown. Format Dec 31, 2023 |
||||
Delivery countdown |
SVG icon |
Enter the SVG icon. |
|||
Icon image |
Select an icon image. This is used as the icon image if SVG is not provided. |
||||
HTML code |
Edit the HTML delivery date. The numbers can be edited but do not change the ids. |
||||
Sales point |
SVG icon |
Enter the SVG icon. |
|||
Icon image |
Select an icon image. This is used as the icon image if SVG is not provided. |
||||
Heading |
Enter heading text for the sales point. |
||||
Text |
Enter text for sales point. |
||||
Custom liquid block |
Custom liquid |
Enter the liquid template language code. For more information, refer to Shopify developers: Liquid reference. |
Configure Collage with text
Setting |
Description |
|||
Background color |
Select a background color for the collage section. |
|||
Text color |
Select the text color for the collage section. |
|||
Tagline color |
Set the color for the tagline. |
|||
Content |
SVG |
Add an SVG image for the collage. |
||
Icon image |
Add an icon image for the collage. |
|||
Tagline |
Add a tagline to display in the collage. |
|||
Heading |
Enter text for the collage heading. |
|||
Heading link |
Enter the URL for the heading CTA. |
|||
Text |
Enter the collage text. |
|||
Image 1 - Image 8 |
Enable |
Check this box to enable the specific image (repeat for all 8 images). |
||
Image |
Select an image to add to the collage (repeat for all 8 images). |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
Configure the Don't miss deals section
Setting |
Description |
|||
Desktop background image |
Add desktop background image. Recommended format 1920 x 1080px .jpg |
|||
Mobile background image |
Add mobile background image. Recommended format 420 x 680px .jpg |
|||
Desktop height |
Configure the desktop height. Choose from:
|
|||
Mobile height |
Configure the mobile height. Choose from:
|
|||
Heading |
Enter a heading for Don't miss deals section. |
|||
Heading |
Select a color for the heading text. |
|||
Timer color |
Set the timer text color. |
|||
Month |
Select the month that the deal ends. |
|||
Day |
Select the day that the deal ends. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add content |
Image |
Select an image for the deal. Recommended format 300x400 px .jpg |
||
Choose product |
Select a product of the deal. |
|||
Text |
Enter text to describe the deal. |
|||
Button text |
Enter button text. |
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. |
|||
Text color |
Select the text color for the Featured testimonials section. |
|||
Tagline color |
Set the color for the tagline. |
|||
Dots color |
Set the dots color. |
|||
Interval time |
Set the interval time between the quotes 6 - 10 seconds |
|||
Tagline |
Add a tagline to display in the Featured testimonials section. |
|||
Heading |
Enter text for the Featured testimonials heading. |
|||
Image |
Select an image for the featured testimonial. |
|||
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 |
Quote |
Enter the quote from the customer. |
||
Quote by |
Enter the name of the testimonial author. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
This section will display the top brands or logo list.
Configure Logos List
Setting |
Description |
|||
Heading |
Enter text for the Logos list heading. |
|||
Background color |
Select a background color for the Logos list section. |
|||
Text color |
Select the text color for the Logos list section. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Buttons |
Select a color for the buttons. |
|||
Add image |
Image |
Select a logo image to add to the list. |
||
Image link |
Enter the URL for the image CTA. |
Configure Blog Posts
Setting |
Description |
|||
Background color |
Select a background color for the blog posts section. |
|||
Heading |
Enter text for the Blog posts heading. |
|||
Tagline |
Enter tagline text for the blog posts section. |
|||
Enable overlap |
Check this box to enable the title text to overlap the image. |
|||
First blog full width |
Check this box to make the first blog full width. |
|||
Blog |
Select a blog to add to the blog posts section. |
|||
View all text |
Enter text for the button link to CTA. |
|||
Custom CSS |
Add custom CSS to this section only. More information. |
|||
Add block |
Image |
Select a logo image to add to the list. |
||
Image link |
Enter the URL for the image CTA. |
|||
Heading |
Show date |
Check this box to display the blog post date. |
||
Show author |
Check this box to display the blog post author. |
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. |
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.
Configure the custom liquid section
Setting |
Description |
||||
Custom liquid |
Enter the liquid template language code. For more understanding, refer to Shopify developers: Liquid reference. |
||||
Background color |
Select background color for the entire section. |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
Configure Google map
Setting |
Description |
||||
Background image |
Select a background image for the Google map. Recommended format 1920x1080 px .jpg |
||||
Desktop height |
Configure the desktop height. Choose from:
|
||||
Mobile height |
Configure the mobile height. Choose from:
|
||||
Tagline |
Enter tagline text for Google map section. |
||||
Heading |
Enter heading for the Google map section. |
||||
Address and hours |
Enter address and hours information in the text box. |
||||
Add Google iframe code |
Enter Google iframe code in the box. For further information, please see Google maps documentation. |
||||
Button 1 |
Button text |
Enter a button label for the Google map. |
|||
Button link |
Enter the URL for the button CTA. |
||||
Button 2 |
Button text |
Enter a button label for the Google map. |
|||
Button link |
Enter the URL for the button CTA. |
||||
Custom CSS |
Add custom CSS to this section only. More information. |
Note: You must add the "Google maps API" key in the map theme settings. Refer to the instructions below for a guide to integrating the Google Maps API key with your theme.
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. |
||||||||
Newsletter form |
Heading |
Add a heading block for the newsletter form. |
|||||||
Subheading |
Add subheading text to the newsletter form. |
||||||||
Text |
Add text to the newsletter form. |
||||||||
Input background |
Select a color for the input background. |
||||||||
Input text |
Select a color for the input text. |
||||||||
Button background |
Select a color for the button background. |
||||||||
Button text |
Select a color for the button text. |
||||||||
Column width |
Select a width percentage for the column. |
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 zoom features, and also the Theme settings for configuration (color swatches), choose product, Text, gift image, gift message, gift wrapping, all products, size chart and Custom CSS for the template product information here. |
||||||||
Product type & tag |
Enable the product type here and add a tag for the product. |
||||||||
Heading |
Displays the product’s title; there are no customizable block settings available for this. |
||||||||
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. |
||||||||
Product vendor |
Displays the name of the product vendor. There are no customizable block settings available for this. |
||||||||
Price |
Add this block to display the product’s price like Sale and Compare at price. Product availability can be enabled/disabled here using the Enable availability check box. |
||||||||
Sales countdown |
Enter heading text for the sales countdown and an end date for the sales countdown. Format Dec 31, 2023 |
||||||||
Variant picker |
Displays a variant picker for selecting variants of a product. Choose between Dropdown/Pills. |
||||||||
Gift item |
Displays the gift option. There are no customizable block settings available for this. |
||||||||
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. Select the “Show recipient form for gift card products” checkbox to enable gift card products. |
||||||||
Delivery countdown |
Displays a countdown to delivery and an icon/svg file. |
||||||||
Sales point |
Displays a sales pitch about a product, icon/svg, heading and text. |
||||||||
Payment option |
Add an image and heading here for a payment option. |
||||||||
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. |
If a customer redirects to a product page from your store, related products will be displayed in the product recommendation section.
Setting |
Description |
||||
Tagline |
Add tagline text to be displayed for the product recommendations. |
||||
Heading |
Add title text to be displayed for the product recommendations. |
If a customer redirects to a product page from your store, related products will be shown in the product recommendation section.
Setting |
Description |
||||
Tagline |
Add tagline text to be displayed for the product recommendations. |
||||
Heading |
Add title text to be displayed on the Recently Viewed section. |
||||
Enable quick shop feature |
Check the box to enable the quick shop feature. |
||||
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 |
|
Image |
Select an image for the collection. Recommended format 1920x450 px .jpg |
|
Heading |
Enter a heading for the collection list page. |
|
Description |
Enter a description for the collection list page. |
|
Show collection title |
Check this box to show/hide the collection title on the page. |
|
Show collection description |
Check this box to show/hide the collection description on the page. |
|
Text color |
Set the text color for the Collections list. |
|
Content width |
Select a content width between 100px - 1500px. |
|
Product grid |
Enable sorting |
Select this checkbox to enable sorting on the page. |
Pagination |
Select either Infinite scroll/Pagination |
|
Product Card |
Set the number of products per row minimum 2, maximum 4. |
|
Custom CSS |
Add custom CSS to this section only. More information. |
Customize the Contact
Setting |
Description |
||
Heading |
Add Contact section heading text. |
||
Background color |
Select a background color for the contact page. |
||
Text |
Select a text color for the contact page. |
||
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. |
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. |
Content |
Add a faq box for the 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 |
Add this block to display the article excerpt. |
||||
Link |
Add this block to display the Read more link. |
||||
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 |
Add this block to display the article image on the page. |
||||
Heading |
Add this block to display the article title. You can show/hide the article publish date and author name from this block. |
||||
Content |
Add this block to display article content. |
||||
Social share buttons |
Add this block to display the social share icons. |
||||
Show related articles |
Add this block to show/hide the filtered list of similar articles. |
This page shows all the products that the customers have selected to purchase.
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 |
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.