Store Structure | Shoptimized™

How can we help?

Home Store Structure

Store Structure

Drag-n-Drop Sections

Shoptimized 5.0 theme allows users to add dynamic sections to the homepage, and implement all the creative and marketing needs of the store owner.

Go to Shopify Admin Panel > Online Stores > Themes > Customize theme (Shoptimized 5.0)> Sections > Add section. See below:

[Section.gif]

With Shoptimized, you have full control over how your theme looks. See the screenshot below to see available options:

[options.gif]

To add a new section, just click the “+ Add Section” button:

[section.gif]

For example – Here are the available Mobile Slider options:

[mobile.gif]

After you have finished customizing a section, hit the “Save” button on the top right corner of theme customization window:

[save.gif]

Homepage Slider for Desktop and Mobile Devices

You have two options for Homepage slider – Desktop Slideshow and Mobile Slideshow – these are separate options that allow you to create a fully separate (or same) slider image for both screen sizes.

This allows you use optimized slider images for any kind of device.

Homepage Slider Options:

Here’s how to add a slide banner to your Shoptimized theme (Desktop):

Configure Theme > Settings > Desktop Slideshow

You’ll notice there are two image selection options. Add Image allows you to upload your own images – “Explore Free Images” allows you to connect to our stock photo library to add thousands of niche images!

To add more images to the slideshow, simply click “Add Image Slide”

To remove an image from the slider, click “Remove Content” on the selected image.

Slider Text Settings:

Shoptimized helps you save some time and money on hiring out for graphics or subscribing to another service, so along with the new image selection comes slider text to fit your message and branding.

To change text, just click on a slide within the slideshow and you’ll see the text options to change as needed:

In this section, you will also see “Horizontal Position” and “Vertical Position”. These options just put text right where you want it.

Finishing Up Your Homepage Slider

Now that your slider images are display optimized, it’s time to fine-tune your settings.

Make Slider Full Width – This option does exactly what it says and removes borders for a full width “Hero” image. (Or slideshow)

Autoplay Speed (in seconds) – This option allows you to set the timing speed between slides. Lower values = faster display speed, Higher values = slower display speed. 5 = 5s, 20= 20s.

Slide Heading Text Color – This changes the text for the slider heading only. (Line 1)

Slide Heading Size – This lets you change the text size for the slider heading only.

Slide Sub-Heading Text Color – This changes the text of the slider sub-heading only. (Line 2)

Slide Sub-Heading Size – This lets you change the text size for the slider sub-heading only.

Slide Button Color – This changes the color of the CTA (Call to Action) button on the slider.

Slide Button Text Color – This changes the color of the CTA text color.

To see your changes after replacing text, click save, allow Shoptimized to refresh and see your slider in action! Repeat this process until your theme looks how you want.

Mobile Slider Settings:

Setting your mobile slider is as easy as following the same instructions for desktop! The only difference is that you need to be in mobile response view to see these settings in action. (Top center of your screen, the leftmost icon, and center is desktop view)

Customize > Sections > Mobile Slideshow

Collection Sliders

Do you want to display your hottest, popular items? Maybe you have new items you want to showcase? This is where you do it!

Caution: Too many collections will slow your store down, be mindful of how many you use. We recommend no more than 1 on mobile and 2-3 on Desktop.

Featured Collections – Here, you will select the Shopify product collection you wish to display. You have 3 sliders total, 2 are active, and one is hidden. (You can tell by the crossed eye symbol.)

Customize > Sections > Featured Collections

Heading – Changes the heading of your featured collection.

Collection – Choose the collection you want to display.

Products Per Row – Allows you to adjust how many products are seen per row. We recommend 3-4 on Desktop and 2 for Mobile.

Need to hide a featured collection?

Collection List

The collection list puts your store on display – Choose the collections you want customers to see first.

Customize > Sections > Collection List

This section is very self-explanatory:

Heading – Changes the heading title for the collection group.

Hide Collection Title – Hides or displays the collection group title.

Collection – Add your desired collection to the 6 available slots. We recommend 2 for mobile, 3-4 for Desktop.

Don’t forget to hit “Save” to keep your settings! That’s all there is to collections!

NOTE: The section name will CHANGE if you enter a new heading.

Homepage Promotion

Promotion is paramount as an e-commerce store owner. Using promotions in the right way with help further boost your conversions and sales. That’s why Shoptimized offers a promo section right in the theme.

We’ve opted for an Instagram-based promotion section, due to the fact that using your customer’s images while they use your hashtags is the perfect brand-building relationship.

Promotion Main Desktop Image – Allows selection of the main promotional image for desktop visitors.

Promotion Main Mobile Image – Allows selection of the main promotional image for mobile visitors.

Promotion Title – Changes the title of your promotion to whatever you like.

Promotion Hashtag – Have a brand or promotional hashtag? Put yours in this space.

Promotion More Text – Use this as a CTA (Call to Action) telling visitors what to do and what they get in return i.e. prizes!

Image Slides – Add more images to your promotional section using customer photos.

Finally, click Save to retain your settings. Voila! Promotional content is ready to steer your brand to success.

Instagram Section

It’s no secret that IG is a powerful source of branding, traffic and diversification, which is why we’ve focused on the platform with Shoptimized 5.0. We’ve redesigned to showcase your fans and customers using your products with a MUCH easier method than emailing back and forth…

Customize > Sections > Instagram

Heading – Lets you change the heading to whatever you wish. We suggest a CTA or stock “Instagram” label.

Sub-Heading Color – Switch up the sub-heading color to match your branding and fit your theme.

Access Token – Here is where you will copy and paste your Instagram account Access Token which you can get here without the hassle of developer tools:

http://instagram.pixelunion.net/

Number of Rows – Determines the number of rows.

Number of Images per Row – Determines the number of images per row. We recommend keeping these stock for maximum performance and load times.

Data Direction – Set your Instagram section to display horizontally or vertically depending on your brand, theme and usability needs. We recommend horizontal. Scroll button position will change with your selection.

Popup Background Color – Select the color you’d like to display on the Instagram post a visitor clicks on. This changes the post itself, NOT the box color behind the image!

Links Color – Changes the link color for your hashtags, username and other links specific to Instagram.

Now your IG, hashtags, customer photos and daily posts show up on your Shoptimized theme!

Homepage Marketing Images

While it may seem redundant with all the other images you may be using, the Homepage Marketing Images section is meant to be used for marketing images such as sales, deals, holidays, etc.

Of course, you can remove or hide any sections you deem unnecessary and we recommend doing just that if need be.

That’s all there is to it. Don’t forget to click “Save” or you’ll lose your changes!

Homepage Video

A video is huge in e-commerce and marketing in general, where 45% of people watch more than an hour of Facebook or YouTube videos a week. Needless to say, we made sure to include a video section for you.

You’re given two options for videos. Our recommendation is a brand story video as well as a CEO video because humanizing your business helps you connect on a deeper level with your visitors and potential customers.

To upload a video you must use an embed code, which you can get from your YouTube video link or video host of choice. Embed code should be in the form of <iframe>short link</iframe>

Show Video Section on Homepage Only – Enables or disables the video section on homepage only or static across your site.

Background Color– Pick the background color for this section that best fits your brand or color scheme.

Font Color – Pick the font color for that best fits your brand or color scheme.

Font Size – Choose the best size font for your branding.

Font Style – Choose the best style according to your brand and theme setup. Light, Normal, Bold, And Bolder.

That’s it! Your Homepage Videos are ready to be viewed by thousands (or millions!) Click “Save” now!

Homepage Reviews

Reviews are critical to conversions and sales, so we’ve included a customer review section to put your best customer reviews front and center, where they belong. You know what they say: First impressions matter! That couldn’t be truer with e-commerce.

Display Reviews – Toggle between displaying or hiding reviews. Highly recommended to keep them.

Background Color – Pick the background color for this section that best fits your brand or color scheme.

Quotation Mark Color – Pick the color for that matches your brand or color scheme.

Font Color – Select the font color for that matches your brand or color scheme.

Title Font Color – Choose the best color font to match your branding.

Author Font Color – Choose the best style according to your brand and theme setup.

Image – Select Customer’s Image

Review Text – Paste your customer’s review here

Review User Name – Provide customer’s name.

Homepage Footer Settings

The footer area is just as important as the rest of your site, providing visitors and customers with a snapshot of your information.

Think of your footer as reiterating your business itself – hours, contact info, secondary email list building, as well as legal links such as Terms of Service and Privacy Policy.

It’s the final piece of design that creates a safety net and helps increase conversions through trust and transparency.

Customize > Sections > Footer > Theme Settings

Display Contact Details – Toggles contact details on or off.

Phone Number Prompt Text – Write your CTA text here. Ex: “Questions or Concerns? Call Anytime!”

Header Phone Number/Email Address – Type your business phone number here or use your company email address. This section affects both header and footer! We felt it was simpler to control linked information from the same spot.

Opening Hours – Provide your opening and closing hours here. Ex: 9am-5pm

Display Footer First Row – Toggles footer first row on or off.

Display Footer Guarantee Box – Toggles footer guarantee section on or off.

Guarantee Box Heading Text – Place your guarantee text here. Ex: “Unhappy With Your Purchase?”

Guarantee Box Information Text – Place your extended guarantee text here. Ex: “We stand by our high-quality products and your satisfaction is guaranteed. If you’re not happy, neither are we.”

Display Footer Checkout – Toggles footer display on or off during customer checkout.

Checkout Box Heading Text – Place your heading text here. Ex: “Your Information is Secure.”

Checkout Box Information Text – Place your box information here. You want to make them feel protected and trusted. Ex: “Your card details are encrypted via dedicated SSL, rest assured your information is 100% protected from theft.”

Enable Credit Card Icons – You will see an “Enable” tick box on top of every card type. Simply untick to remove the display of the particular card type you won’t be processing.

Display Footer Second Row – Toggles the second footer row on or off.

Footer Menu – Select your footer menu. This is typically legal information such as Terms of Service/Privacy Policy.

Newsletter Type – Select your ESP (Email Service Provider) here. Mailchimp or Klaviyo are available to connect to.

Show Optin Form – Toggles opt-in form on or off.

Newsletter Heading – Write your newsletter heading here. Ex: “Subscribe and SAVE!”

Newsletter Text – Write your newsletter text here. Focus on the benefits of joining. Ex: “Get daily deals and sales delivered to your inbox.”

Enter Coupon Code – Enter the coupon code to be shown after newsletter opt-in. NOTE: You will need to set this up in your Shopify admin for customers to use.

Newsletter Button Text – Enter your CTA button text here. Ex: “Send My Deals!”, “I Want to Save”.

Use Custom Phone Icon – Allows you to upload your own phone icon.

Social Media in Footer – Toggles social media follow icons on or off in the footer area.

Social Media URLs – Enter your social media URLs to connect visitors to your business platforms.

Show Checkbox for Terms and Conditions – Toggles checkbox on or off. Located under the opt-in form.

Newsletter Checkbox Text – Enter your desired newsletter opt-in text. Ex: “I agree to subscribe to the newsletter and allow you to market to me.”

Newsletter Checkbox Link Text – Enter the text for your link. Usually Privacy Policy.

Newsletter Checkbox Text Link – Enter the location of your newsletter page. Ex: /pages/privacy

Newsletter Checkbox Warning Pop-up Text – Use this box to display warning text for customers who don’t tick the terms and conditions checkbox. Ex: “You must agree to our terms and conditions. Please try again.”

That’s all there is to the footer. Please remember to click “Save” so you don’t lose your hard work!

Pin It on Pinterest