Shops
      Back to home
      1. Help Center
      2. Sales
      3. Shops

      Shops Design

      The Design Tab allows you to customize your shop's theme, style, color, images, and text. Learn more about your customization options and best practices for getting a picture-perfect layout.

      On this page:

      Choosing a theme

      Global Styles

      Page Styles

      Help Screen Styles

      Unsplash

      FAQ

      Choosing a theme


      From the Design tab of your shop, you can choose from the various shop themes available. 

      To change the shop theme: 

      1. Click the Change Theme button in the right-hand corner
      2. Click Preview to preview the shop theme
      3. Click Select to choose a different theme, or click Customize to update the shop's current theme

      shops change theme

      Page style options will vary depending on the selected theme.

      [Back to top]

      Global Styles

      The Global Styles tab allows you to customize your Shop name, add a Shop logo, change your Shop color, and select your Product list style and Project Page style. You also have the option to reset the customizations here. 

      Expanding and minimizing the menu

      To expand and minimize the menu, click on the arrow in the top right corner.

      global styles-1

      [Back to top]

       

      Shop name and Logo

      To change your Shop name :

      1. Click on the Text tab 

      2. Type in your preferred Shop name in the box field

      To add a Logo instead:

      1. Click on the Logo tab

      2.  Select Add Logo Image 

      3. Click + Add Image to Upload your own Image > select Image > select Open


      same name

      [Back to top]

       

      Shop Color

      Your chosen Shop Color affects the color of the different text and icons within a Shop.

      To change the color:

      1. Click on the color box
      2. Either choose the color from the palette or enter the HEX, RGBA, or HSLA color you'd like to use

      color

      If you're using the Split Theme, the color also determines the color overlay that appears on the landing page's right-hand side. 

      [Back to top]

       

      Product list style 

      The product list style determines how you present the shop's products to your client. There are two styles to choose from:

      • Tile - this format is the same style as the Gallery and Smart Gallery presentation styles. It is responsive and adapts to different image sizes, making it perfect for displaying images with various widths and heights. Your shoppers can hover over the products to view the product name and price range.
      • Grid - this format standardizes the product's images, so they are all square and in line with one another. It also shows each product's name and price range, without your shopper having to hover over the different items.

      To change the product list style:

      1. Click the "Product List Style" drop-down and make your selection

      chrome_AyIdmCjqlM

      [Back to top]

       

      Product Page Style

      The Product page style determines how you present your shop's products to your client.

      There are three styles to choose from:

      Carousel - this format allows you to display your products as one interactive slide. Your shoppers will be able to easily click on the arrow button to view all the products as one rotating gallery. 

      Popup - this format allows your shopper to view a pop-up view of the products. 

      Dropdown - By clicking on the product, this format will have the shoppers viewing the products as a dropdown list. 



      To change the product page style, click the "Product page Style" drop-down and make your selection.

      [Back to top]

      Resetting Global styles

      Click on the Reset Global style button > Reset style if you would like to clear the changes made and revert to the default options. 

      reset global style

      Once you have selected to Reset Styles, you will not be able to Undo the action. 

      [Back to top]

      Page Styles

      Each shop has four themes for you to choose from and the Page Styles tab allows you to customize the Themes you have selected.   

      Expanding and minimizing the menu

      Click on the arrow in the top right corner to expand or minimize the menu.page styles

      [Back to top]

       

      Billboard

      This theme features a large background image sized at 1456 x 1007 pixels.

      This theme allows you to update settings including:

      Dim Background

      If you'd like to dim the background image of the shop's landing page, click on the toggle to have it switched on or off.dim images

      [Back to top]

      Banner and Button Text

      You can customize the Banner text to change the title on the shop's landing page and the Button text that appears in the "Shop button.

      To customize the Banner and Button text:

      1. Click on the Banner or Button text field

      2. Enter the text you'd like to use 

      banner text

      [Back to top]

      Background Image

      You can choose to upload your own image or use Unsplash to customize your shop's landing page.

      To upload an Image: 

      1. Click the Background Image box
      2. Click the Upload tab
      3. Click Upload Image > select the file, or drag and drop the image you need

      chrome_yXkIiZXxkM

      [Back to top]

       

      Categories & Carousel

      If you're using the Categories & Carousel theme, there are two sections within the Page Styles sections that you need to update:

      1. Carousel 
      2. Categories

      Carousel 

      The Carousel tab is where we can update settings including:

      Carousel Images

      You can upload your own image to use for the landing page of your shop, or use Unsplash.  

      To upload your own Image: 

      1. Click the Edit Carousel Images button
      2. Select Upload Image > select the file, or drag and drop the image you need
      3. Repeat step 2 as needed (optional) 
      4. Drag and drop the Images to rearrange them (optional)
      5. Click Done

      chrome_EtlLaA9VU4

      To delete an image:

      1. Click the Edit Carousel Images button
      2. Click the red delete button in the right-hand corner of the image
      3. Click Done
      chrome_wQWTltvsYX

      [Back to top]

       

      Fill Banner

      If you're using the "Fill Banner" option, carousel images should be sized at 1366 x 490 pixels.
      If you're not using the "Fill Banner" option, images can be sized at any dimension. We recommend using a rectangular dimension where the image's width is 3.6 x its height (i.e., 1800 x 500 pixels).

      If you would like to use the Fill Banner option, click on the Fill Banner radio button to switch it on or off.   

      chrome_F6M71bQ4n6

      [Back to top]

      Auto Scroll Carousel

      This setting will automatically scroll through the carousel images on your shops landing page within the client view. If you do not select this option, your shoppers will be able to click the back-and-forth arrows to scroll through the images manually.

      Click on the Auto Scroll Carousel radio to turn the feature on or off.

      chrome_pZhxUaqGMy

      [Back to top]

      Categories 

      This Categories tab is where we can update settings including:

      Product categories are defined by the products' titles. If you want to categorize the products within your shop, you can add titles to the shop and drag and drop the relevant products into the correct sections.

      Category Images

      Category images will display on the landing page of the shop to give your clients a preview of what kinds of products will be in their chosen category. You can choose to upload your own image or use Unsplash to customize your Main product Image and Hover Image. 

      To upload your a Main Image: 

      1. Click on the Edit Category Images button and Select Change Main Image to change the Main category Image.
      2. Select Upload Image > select the file, or drag and drop the image you need\
      3. Click Done.

      chrome_KGbyhyj095

      To upload a Hover Image:

      1. Click on the Edit Category Images button and Select Add/Change Hover Image
      2. Select Upload Image > select the file, or drag and drop the image you need
      3. Click Done

      Repeat the steps above for all categories. 

      chrome_8zZgDdPnAj

      Select the box next to Use product images for category images in the top left corner to default all category images to product images listed on your products.

      2023-06-06 15 43 13

      A category's Main Image displays when the client is viewing the landing page and the Hover image displays when the client hovers their mouse over the category tile. Main Images are required, but Hover Images are optional and can be deleted. 

      [Back to top]

       

      Category title

      You can choose to display or hide category titles on the landing page of the shop for each of your chosen categories. 

      Click on the radio button toggle to have it switched on or off.

      chrome_dtigIOllaD

      [Back to top]

       

      Featured

      This theme features a Background Banner image sized at 1300 x 225 pixels and 4 featured products. 

      This theme allows you to update settings including:

      Featured Products

      You can choose four products you'd like to feature on the landing page.

      To add a product to the landing page:

      1. Click the Add Featured Product button 
      2. Select choose a featured product > Select Image 
      3. Repeat step 2 to add the other 3 products. 
      4. Click Done.

      chrome_xJI1WJNv3z

      [Back to top]

       

      Banner and Button Text

      You can customize the Banner text to change the title on the shop's landing page and the Button text that appears in the "Shop" button.

      To customize the Banner and Button text:

      1. Click on the Banner or Button text field

      2. Enter the text you'd like to use 

      chrome_No7YERHV2y

      [Back to top]

       

      Background Banner image

      You can click Change Image to upload your own image or use Unsplash.  

      To upload your own Image: 

      1. Click the Change Image button
      2. Select an image from the options available or click to Upload your own > select the image > then click Open

      chrome_fd06TJQOJK

      [Back to top]

      Poster

      This theme features large, page-specific images sized at 1456 x 1007 pixels.

      This theme allows you to toggle between the Home and All Products pages of your shop, as well as all Category pages and update their respective settings.

      Home

      To update the Home page, select Home from the Page dropdown.

      Your Home page section is where you can update settings including:

      Background Image

      You can choose to upload your own image or use Unsplash to customize your shop's landing page.

      To upload an Image: 

      1. Click the Background Image box
      2. Click the Upload tab
      3. Click Upload Image > select the file, or drag and drop the image you need

      Categories

      This Categories tab is where we can update settings including:

      Product categories are defined by the products' titles. If you want to categorize the products within your shop, you can add titles to the shop and drag and drop the relevant products into the correct sections.

      Category Images

      Category images will display on the landing page of the shop to give your clients a preview of what kinds of products will be in their chosen category. You can choose to upload your own image or use Unsplash to customize your Main product Image. 

      To upload your a Main Image: 

      1. Click on the Edit Category Images button and Select Change Main Image to change the Main category Image.
      2. Select Upload Image > select the file, or drag and drop the image you need
      3. Click Done.

      Repeat the steps above for all categories. 

      Select the box next to Use product images for category images in the top left corner to default all category images to product images listed on your products.

      A category's Main Image displays when the client is viewing the landing page and the Hover image displays when the client hovers their mouse over the category tile. Main Images are required, but Hover Images are optional and can be deleted. 

      Category title

      You can choose to display or hide category titles on the landing page of the shop for each of your chosen categories. 

      Click on the radio button toggle to have it switched on or off.

       

      All Products

      To update the All Products page, select All Products from the Page dropdown.

      Your All Products page section is where you can update settings including:

      Background Image

      You can click Add Image to upload your own image or use Unsplash.  

      To upload your own Image: 

      • Click the Change Image button
      • Select an image from the options available or click to Upload your own > select the image > then click Open

       

      Dim Banner

      If you'd like to dim the background image of the shop's landing page, click on the toggle and drag it from right to left to get the dimness you need. 

       

      Category Pages

      To update the settings for a specific Category page, select the relevant category from the Page dropdown.

      Your Category page sections are where you can update settings including:

      Background Image

      You can click Add Image to upload your own image or use Unsplash.  

      To upload your own Image: 

      • Click the Change Image button
      • Select an image from the options available or click to Upload your own > select the image > then click Open

       

      Dim Banner

      If you'd like to dim the background image of the shop's landing page, click on the toggle and drag it from right to left to get the dimness you need. 

       

      Split

      This theme features a split view of the same image. The left-hand side shows the full image, sized at 1007 x 1456 pixels, and the right-hand side shows a zoomed-in version of the image with a color overlay.

      This theme allows you to update settings including:

      Banner and Button Text

      You can customize the Banner text to change the title on the shop's landing page and the Button text that appears in the "Shop" button.

      To customize the Banner and Button text:

      1. Click on the Banner or Button text field

      2. Enter the text you'd like to use 

      chrome_SfXj8IJvgl

      [Back to top]

       

      Background  image

      You can click Change Image to upload your own image or use Unsplash.  

      To upload your own Image: 

      1. Click the Change Image button
      2. Select an image from the options available or click to Upload your own > select the image > then click Open

      chrome_rGWXm5gKN6

      [Back to top]

       

      Resetting Page Styles

      Click on the Reset Page Styles button > Reset style if you would like to clear the changes made and revert to the default options. 

      chrome_Owrnqmi9Nf

      Once you have selected to Reset Styles, you will not be able to Undo the action. 

      [Back to top]

      Help Screen Styles

      The Help Screen Styles selection allows you to control how your splash screen/help screen appears within your shop.

      To turn on the Help Screen:

      1. Click the Help Screen radio toggle so that it turns dark blue

      If you have customized your Splash Screen from the Settings tab in your shop, it will only display to your client if the Help Screen toggle is turned on within your Shop's Design tab.

      Help Screen Style

      You can choose between two Help Screen Styles:

      1. Text Only
      2. Side by Side

      Text Only

      This style displays a pop-up window containing:

      • On the left: the text that appears in the Splash Screen section within the Settings tab of your shop
      • On the right: the shop contact's name and email address, as entered within the Settings tab of your shop

      Side by Side

      This style displays a pop-up window containing:

      • On the left: an uploaded image
      • On the right: all details from the splash screen section of your Settings tab, your shop contact's contact information, and a Start Shopping button that directs your shopper to the product list

      Help Screen Image

      You can choose to upload your own image or use Unsplash to customize your shop's splash screen/help screen.

      To upload an Image: 

      1. Click the Add Image box
      2. Click the Upload tab
      3. Click Upload Image > select the file, or drag and drop the image you need

      Resetting Help Screen Styles

      Click on the Reset Help Screen Styles button > Reset Styles if you would like to clear the changes made and revert to the default options. 

      [Back to top]

      Unsplash 

      Unsplash is an image database dedicated to proprietary stock photography. You can source high-resolution images from Unsplash's database to use in the design of your shops. 

      To upload an image from Unsplash:

      1. Click the "Theme" drop-down and make your selection
      2. Click the Unsplash tab
      3. Type in a keyword to search for images from Unsplash's database > select an image from the options available 

      chrome_GrIRZ0CiPR

      [Back to top]

       

      FAQ

       

      Can I skip the landing page and show the products right away?

      There's no way to skip the landing page altogether, but you can remove the text from the shop's splash screen (in the Shop > Settings > Splash screen/ Help) and direct your client straight to the landing page; from there, they can click to start shopping.

       

      Can I embed a shop on a website?

      Yes, you can! Copy the shop's URL (in the Shop, click Actions > Preview Shop > copy the URL) and insert it into the website using an iframe. Check with your IT team, or the person who manages the website, if you're unfamiliar with iframes or HTML coding.

       

      What file type should I use for the background image?

      Shop's background images should be a JPG, PNG, or PDF file.

       

      Why is the background image not showing correctly?

      Images that do not match the required dimensions get distorted or cropped during the upload process and will not be displayed correctly. Make sure your image file matches the theme's required dimensions:

      • Billboard - 1456x 1007 pixels
      • Featured - 1300 x 225 pixels
      • Split - 1007 x 1456 pixels

      [Back to top]